Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2021, 16:08
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 02.10.2020
Сообщений: 20

Как реализовать плавное появление блоков?
Здравствуйте. Помогите пожалуйста реализовать плавное появление блоков как в этом примере 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, 17:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,173

анимация последовательная в зоне видимости
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>
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2021, 22:47
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 02.10.2020
Сообщений: 20

рони, большое спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное появление блоков при нажатии на один из них на чистом JS markroutedsaa Общие вопросы Javascript 3 29.07.2020 16:58
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
Плавное исчезновение и появление изображения Surlik jQuery 9 17.03.2012 12:27
как реализовать передачу функции в функцию?? czp Общие вопросы Javascript 10 29.11.2011 17:21
как сделать плавное затухание страницы magistr_bender Элементы интерфейса 1 18.03.2009 13:34