Форум

Sergey-web92 · #1 (**permalink**) 10.02.2021, 17:08

Здравствуйте. Помогите пожалуйста реализовать плавное появление блоков как в этом примере 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();
});

рони · #2 (**permalink**) 10.02.2021, 18:43

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>

Sergey-web92 · #3 (**permalink**) 10.02.2021, 23:47

рони, большое спасибо

Форум

Справочник

Discord чат

Курсы javascript