Плавно падающий снег на GSAP HTML5 Canvas
Простой, плавно падающий снежок на HTML5 Canvas и библиотеку GSAP
Для начала посмотрите ДЕМО
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.flake { position: absolute; width: 100px; height: 100px; background-size: cover; } .flake1 { background-image: url("/img/flake1.svg"); } .flake2 { background-image: url("/img/flake2.svg"); } .flake3 { background-image: url("/img/flake3.svg"); } .flake4 { background-image: url("/img/flake4.svg"); } |
2#: Следующий код поместите после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<script type="text/javascript" src="/js/gsap.min.js"></script> <script type="text/javascript"> // full video tutorial at: https://www.youtube.com/watch?v=TAVVTRaXm5M // click anywhere to pause / unpause let numFlakes = 50; let width = window.innerWidth; let height = window.innerHeight; function createFlake() { let flake = document.createElement("div"); let flakeClass = "flake flake" + gsap.utils.random(1, 4, 1); flake.setAttribute("class", flakeClass); document.body.appendChild(flake); return flake; } function animateFlake(flake) { let scaleFactor = Power3.easeIn(Math.random()); // change to easeOut for more larger flakes // let scaleFactor = Power3.easeOut(Math.random()); let scale = gsap.utils.interpolate(0.3, 2, scaleFactor); let duration = gsap.utils.interpolate(2, 4, 1 - scaleFactor); let opacity = gsap.utils.interpolate(0.5, 1, scaleFactor); gsap.set(flake, { y: -200, x: gsap.utils.random(0, width), scale: scale, opacity: opacity }); gsap.to(flake, { y: height + 200, x: "+=200", duration: duration, delay: "random(0,4)", ease: "none", rotation: "random(-60, 200)", onComplete: animateFlake, onCompleteParams: [flake] }); } for (let i = 0; i < numFlakes; i++) { let flake = createFlake(); animateFlake(flake); } // document.addEventListener("click", () => // gsap.globalTimeline.paused(!gsap.globalTimeline.paused()) // ); // full animated snow tutorial: https://www.youtube.com/watch?v=TAVVTRaXm5M // new JavaScript? Don't worry, my FREE beginner GreenSock course GSAP 3 Express will get you up to speed quickly! // https://www.creativecodingclub.com/courses/FreeGSAP3Express // master the GreenSock Animation Platform at: // https://www.creativecodingclub.com/bundles/creative-coding-club </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js и все SVG картинки в папку img
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
