Как реализовать плавное появление блоков?
Здравствуйте. Помогите пожалуйста реализовать плавное появление блоков как в этом примере https://www.youtube.com/watch?v=qXnv_Jcx6Ac.
Нужно, чтобы блоки появлялись слева направо(при этом здесь последующий блок появляется до того как предыдущий откроется полностью); также блоки появляются слегка снизу вверх. Сейчас у меня блоки просто появляются друг за другом и полностью идет появление снизу вверх. Пример того как у меня сейчас работает https://www.youtube.com/watch?v=BKUQkmIKCAk. В коде использовал библиотеку animate.css и jQuery <div class="products-wrapper__grid-container grid-container"> <!-- column-1 --> <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div> <!-- column-2 --> <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div> <!-- column-3 --> <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div> <!-- column-4 --> <div class="grid-container__col grid-container__col-1 animate__animated animate__fadeInUp">some content</div> </div> // ==анимация появления плиток let block_show = false; function scrollTracking(){ if (block_show) { return false; } let wt = $(window).scrollTop(); let wh = $(window).height(); let et = $('.grid-container').offset().top; let eh = $('.grid-container').outerHeight(); let dh = $(document).height(); if (wt + wh >= et || wh + wt == dh || eh + et < wh){ block_show = true; $('.grid-container__col-1:eq(0)').fadeIn(300, function(){ $(this).next().fadeIn(300, arguments.callee); }); } } $(window).scroll(function(){ scrollTracking(); }); $(document).ready(function(){ scrollTracking(); }); |
анимация последовательная в зоне видимости
Sergey-web92,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .grid-container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; height: 300px; overflow: hidden; } .grid-container__col-1{ height: 300px; border: 1px solid red; transform: translateY(50%); opacity: 0; background-image: linear-gradient(to bottom, #D3D3D3, #FF69B4); box-sizing: border-box; } .grid-container.animate .grid-container__col-1{ transform: translateY(0px); opacity: 1; transition: 1.2s; transition-delay: var(--ms, 0ms); } section{ height: 100vh; } </style> <script> document.addEventListener("DOMContentLoaded", function() { const lazyAnimate = divs => divs.forEach(el => { if (el.intersectionRatio > 0.4) { el.target.classList.add('animate'); } }); let observer = new IntersectionObserver(lazyAnimate, { rootMargin: "100px", threshold: 1.0 }); let container = document.querySelectorAll('.grid-container'); container.forEach(div => { let { length } = children = div.querySelectorAll('.grid-container__col-1'); children.forEach(({ style }, i) => style.setProperty('--ms', `${i*1800/length}ms`)) observer.observe(div); }) }); </script> </head> <body> <section></section> <div class="products-wrapper__grid-container grid-container"> <!-- column-1 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-2 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-3 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-4 --> <div class="grid-container__col grid-container__col-1">some content</div> </div> <div class="products-wrapper__grid-container grid-container"> <!-- column-1 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-2 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-3 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-4 --> <div class="grid-container__col grid-container__col-1">some content</div> </div> <div class="products-wrapper__grid-container grid-container"> <!-- column-1 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-2 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-3 --> <div class="grid-container__col grid-container__col-1">some content</div> <!-- column-4 --> <div class="grid-container__col grid-container__col-1">some content</div> </div> <section></section> </body> </html> |
рони, большое спасибо
|
Часовой пояс GMT +3, время: 19:40. |