[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://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="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/landing.css" />
|
||||||
|
<link rel="stylesheet" href="../css/Snow.css" />
|
||||||
|
|
||||||
<!-- Js scripts -->
|
<!-- Js scripts -->
|
||||||
|
|
||||||
<script async src="../js/Umami.js"></script>
|
<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/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://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
||||||
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
|
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="is-boxed has-animations">
|
<body class="is-boxed has-animations">
|
||||||
|
<div id="snow-container"></div>
|
||||||
<div class="body-wrap">
|
<div class="body-wrap">
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
المرجع في مشكلة جديدة
حظر مستخدم