Осенние листья, падающие и скапливающиеся внизу страницы на CSS3 и Javascript
Неплохой эффект абстрактных падающих листьев, которые могут скапливаться внизу экрана
Для начала посмотрите ДЕМО
Установка:
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 |
.container{ display: flex; justify-content: center; height: 100%; width: 100%; position: relative; } /* ANIMATION CSS */ @keyframes side-to-side-small { 0% { transform: translatex(0) rotate(-90deg); } 50% { transform: translatex(-2vw); } 100% { transform: translatex(0) rotate(-90deg); } } @keyframes side-to-side-medium { 0% { transform: translatex(0) rotate(-120deg); } 50% { transform: translatex(-4vw); } 100% { transform: translatex(0) rotate(-120deg); } } @keyframes side-to-side-large { 0% { transform: translatex(0) rotate(250deg); } 50% { transform: translatex(-6vw); } 100% { transform: translatex(0) rotate(250deg); } } @keyframes fall{ 100%{ transform: translatey(123vh); } } .leaf .x-axis{ width: 2vmax; height: 2vmax; border-top-left-radius: 5vmax; border-bottom-left-radius: 5vmax; border-bottom-right-radius: 0.1vmax; border-top-right-radius: 5vmax; } .brown-leaf .x-axis{ background: brown; } .red-leaf .x-axis{ background: #e00303; } .yellow-leaf .x-axis{ background: #ff8405; } .small-move .x-axis{ box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); animation: side-to-side-small 4s cubic-bezier(.48,0,.46,1) 3.5 forwards; } .medium-move .x-axis{ box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); animation: side-to-side-medium 3s cubic-bezier(.48,0,.46,1) 5.05 forwards; } .large-move .x-axis{ box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); animation: side-to-side-large 5s cubic-bezier(.48,0,.46,1) 3.05 forwards; } .leaf .y-axis{ animation: fall 15s ease-out forwards; } |
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 52 53 54 55 |
<div class="container"> <div class="tree"> <div class="trunk upper left"></div> <div class="trunk upper right"></div> <div class="trunk lower left"></div> <div class="trunk lower right"></div> </div> </div> <script type="text/javascript"> // Define the type of leaves (to match with various CSS classes) const leafColours = ['red-leaf', 'brown-leaf', 'yellow-leaf']; const leafMovements = ['small-move', 'medium-move', 'large-move']; const MAX_LEAVES = 100; const container = document.querySelector('.container'); let leafCounter = 0; setInterval(() => { // Don't do anything if window not in focus if(document.visibilityState === 'hidden'){ console.info('Browser not in focus, so we will not generate new leaves'); return; } // Some garbage cleaning first up if(leafCounter > MAX_LEAVES){ // Remove oldest leave once we hit the max limit; console.info(`Limit reached on number of leaves (${MAX_LEAVES}), so we are culling the oldest one...`); container.removeChild(container.querySelector('.leaf')); } // Create a leaf div let leaf = document.createElement('div'); // Randomly select leaf colour let selectedLeafColour = Math.floor(Math.random() * leafColours.length); leaf.classList.add(leafColours[selectedLeafColour]); // Randomly select leaf type let selectedLeafMovement = Math.floor(Math.random() * leafMovements.length); leaf.classList.add(leafMovements[selectedLeafMovement]); // Create supporting structure for leaf leaf.classList.add('leaf'); let yAxis = document.createElement('div'); yAxis.classList.add('y-axis'); let xAxis = document.createElement('div'); xAxis.classList.add('x-axis'); yAxis.appendChild(xAxis); leaf.appendChild(yAxis); // Set random x-axis starting position let horizontalPosition = Math.random() * window.innerWidth; leaf.style.position = 'absolute'; leaf.style.left = `${horizontalPosition}px`; // Set to start slightly off top of screen let verticalPosition = -25; leaf.style.top = `{verticalPosition}vh`; container.appendChild(leaf); // Increment leaf counter leafCounter++; }, 1000) </script> |
Здравствуйте не подскажите где и что поменять, что бы листья падали до конца страницы? А то они на середине копятся...
Добрый день. Можно ссылку на проблемную страницу?