Осенние листья с Parallax эффектом, летающие по экрану на CSS3
Классный эффект с падающими листьями. Используется parallax эффект и создаётся ощущение глубины
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
section .set { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } section .set div { position: absolute; display: block; } section .set div:nth-child(1) { left: 20%; animation: animate 15s linear infinite; animation-delay: -7s; } section .set div:nth-child(2) { left: 50%; animation: animate 20s linear infinite; animation-delay: -5s; } section .set div:nth-child(3) { left: 70%; animation: animate 20s linear infinite; animation-delay: 0s; } section .set div:nth-child(4) { left: 0%; animation: animate 15s linear infinite; animation-delay: -5s; } section .set div:nth-child(5) { left: 85%; animation: animate 18s linear infinite; animation-delay: -10s; } section .set div:nth-child(6) { left: 0%; animation: animate 12s linear infinite; } section .set div:nth-child(7) { left: 15%; animation: animate 14s linear infinite; } section .set div:nth-child(8) { left: 60%; animation: animate 15s linear infinite; } @keyframes animate { 0% { opacity: 0; top: -10%; transform: translateX(20px) rotate(0deg); } 10% { opacity: 1; } 20% { transform: translateX(-20px) rotate(45deg); } 40% { transform: translateX(-20px) rotate(90deg); } 60% { transform: translateX(20px) rotate(180deg); } 80% { transform: translateX(-20px) rotate(180deg); } 100% { top: 110%; transform: translateX(-20px) rotate(225deg); } } .set2 { transform: scale(2) rotateY(180deg); filter: blur(2px); } .set3 { transform: scale(0.8) rotateX(180deg); filter: blur(4px); } |
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 |
<section> <div class="set"> <div><img class="layer" data-speed="-5" src="/img/leaves1.png" alt=""></div> <div><img class="layer" data-speed="5" src="/img/leaves1.png" alt=""></div> <div><img class="layer" data-speed="2" src="/img/leaves2.png" alt=""></div> <div><img class="layer" data-speed="6" src="/img/leaves3.png" alt=""></div> <div><img class="layer" data-speed="8" src="/img/leaves4.png" alt=""></div> <div><img class="layer" data-speed="-2" src="/img/leaves2.png" alt=""></div> <div><img class="layer" data-speed="4" src="/img/leaves3.png" alt=""></div> <div><img class="layer" data-speed="-9" src="/img/leaves4.png" alt=""></div> </div> <div class="set set2"> <div><img class="layer" data-speed="6" src="/img/leaves1.png" alt=""></div> <div><img class="layer" data-speed="-7" src="/img/leaves1.png" alt=""></div> <div><img class="layer" data-speed="5" src="/img/leaves2.png" alt=""></div> <div><img class="layer" data-speed="5" src="/img/leaves3.png?" alt=""></div> <div><img class="layer" data-speed="2" src="/img/leaves4.png" alt=""></div> <div><img class="layer" data-speed="6" src="/img/leaves2.png" alt=""></div> <div><img class="layer" data-speed="8" src="/img/leaves3.png" alt=""></div> <div><img class="layer" data-speed="-2" src="/img/leaves4.png" alt=""></div> </div> <div class="set set3"> <div><img class="layer" data-speed="6" src="/img/leaves1.png" alt=""></div> <div><img class="layer" data-speed="-7" src="/img/leaves1.png" alt=""></div> <div><img class="layer" data-speed="5" src="/img/leaves2.png" alt=""></div> <div><img class="layer" data-speed="5" src="/img/leaves3.png?token=AFJTBTDSGGRX7NKNYXOY2SC7FYN54" alt=""></div> <div><img class="layer" data-speed="2" src="/img/leaves4.png" alt=""></div> <div><img class="layer" data-speed="6" src="/img/leaves2.png?token=AFJTBTBFDMRAAN2A54QD4GS7FYN2K" alt=""></div> <div><img class="layer" data-speed="8" src="/img/leaves3.png" alt=""></div> <div><img class="layer" data-speed="-2" src="/img/leaves4.png" alt=""></div> </div> </section> |
Осталось лишь залить все картинки из прикреплённого архива в папку img
