Искажение блоков при прокрутке на CSS3 и Javascript
Достаточно необычный эффект искажения блоков при прокрутке страницы. Всё выполнено в связке 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 |
section.section { max-width: 600px; width: 100%; margin: 0 auto; padding: 60px 15px; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; will-change: transform; } section.section div { width: 100%; height: 400px; background: #FFF; margin-bottom: 60px; display: flex; justify-content: center; align-items: center; font-size: 10vw; } section.section div:last-child { margin-bottom: 0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="section"> <div>▲</div> <div>△</div> <div>▲</div> <div>△</div> <div>▲</div> <div>△</div> </section> <script type="text/javascript"> var section = document.querySelector('section'); var currentPos = window.pageYOffset; var update = function update() { var newPos = window.pageYOffset; var diff = newPos - currentPos; var speed = diff * 0.35; section.style.transform = 'skewY(' + speed + 'deg)'; currentPos = newPos; requestAnimationFrame(update); }; update(); </script> |
