[mirotalksfu] - add snow (credit: Jemima)
هذا الالتزام موجود في:
Miroslav Pejic
47
public/css/Snow.css
Normal file
47
public/css/Snow.css
Normal file
@@ -0,0 +1,47 @@
|
||||
#snow-container {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
.snow {
|
||||
position: absolute;
|
||||
animation:
|
||||
fall ease-in infinite,
|
||||
sway ease-in-out infinite;
|
||||
color: skyblue;
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100vh;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sway {
|
||||
0% {
|
||||
margin-left: 0;
|
||||
}
|
||||
25% {
|
||||
margin-left: 50px;
|
||||
}
|
||||
50% {
|
||||
margin-left: -50px;
|
||||
}
|
||||
75% {
|
||||
margin-left: 50px;
|
||||
}
|
||||
100% {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
50
public/js/Snow.js
Normal file
50
public/js/Snow.js
Normal file
@@ -0,0 +1,50 @@
|
||||
'use strict';
|
||||
|
||||
// https://codepen.io/tutsplus/pen/BaVqjvg
|
||||
|
||||
const snowContainer = document.getElementById('snow-container');
|
||||
|
||||
const snowContent = ['❄', '❅', '❆'];
|
||||
|
||||
const random = (num) => {
|
||||
return Math.floor(Math.random() * num);
|
||||
};
|
||||
|
||||
const getRandomStyles = () => {
|
||||
const top = random(100);
|
||||
const left = random(100);
|
||||
const dur = random(10) + 10;
|
||||
const size = random(25) + 25;
|
||||
return `
|
||||
top: -${top}%;
|
||||
left: ${left}%;
|
||||
font-size: ${size}px;
|
||||
animation-duration: ${dur}s;
|
||||
`;
|
||||
};
|
||||
|
||||
const createSnow = (num) => {
|
||||
for (let i = num; i > 0; i--) {
|
||||
let snow = document.createElement('div');
|
||||
snow.className = 'snow';
|
||||
snow.style.cssText = getRandomStyles();
|
||||
snow.innerHTML = snowContent[random(3)];
|
||||
snowContainer.append(snow);
|
||||
}
|
||||
};
|
||||
|
||||
const removeSnow = () => {
|
||||
snowContainer.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
snowContainer.remove();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
createSnow(30);
|
||||
setTimeout(removeSnow, 1000 * 60);
|
||||
});
|
||||
|
||||
window.addEventListener('click', () => {
|
||||
removeSnow();
|
||||
});
|
||||
@@ -38,15 +38,18 @@
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
|
||||
<link rel="stylesheet" href="../css/landing.css" />
|
||||
<link rel="stylesheet" href="../css/Snow.css" />
|
||||
|
||||
<!-- Js scripts -->
|
||||
|
||||
<script async src="../js/Umami.js"></script>
|
||||
<script async src="../js/Snow.js"></script>
|
||||
<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
|
||||
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
||||
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
|
||||
</head>
|
||||
<body class="is-boxed has-animations">
|
||||
<div id="snow-container"></div>
|
||||
<div class="body-wrap">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم