Форум

seven8959 · #1 (**permalink**) 29.09.2021, 17:47

Всем привет. Подскажите пожалуйста, как сделать появление элементов
при скролле. Элементов много, у всех один и тот же класс, и каждому нужно добавить другой класс. Все это должно работать, когда элемент в поле видимости. У меня сейчас работает не так. Когда первый элемент появился в зоне видимости, то классы добавились ко всем остальным элементам.

function scrollTracking(){
     
  var element = $('.scroll-js');

  var wt = $(window).scrollTop();
  var wh = $(window).height();
  var et = element.offset().top;
  var eh = element.outerHeight();
  var dh = $(document).height();
  var ww = $(window).width();   

  if ((wt + wh >= et || wh + wt == dh || eh + et < wh) && ww > 1024){ 
    
    for( var i = 0; i < element.length; i++) {
      element.addClass('scroll-js--active')
    } 
  }
}

$(window).scroll(function(){
  scrollTracking();
});

//- 1 блок

.container.block.wrapper 
        .bg.scroll-js 
            svg
         img(alt="image" src="img/img.jpg" loading="lazy")

//- 2 блок

ul.info__list.effect.scroll-js
            li.info__items.items 
                .items__heading 
                .items__text 
            li.info__items.items
                .items__heading 
                .items__text 
            li.info__items.items
                .items__heading 
                .items__text 
            li.info__items.items
                .items__heading 
                .items__text 

//-3 блок такой же как первый

// 1 блок 

.bg {
        position: absolute;
        left: -100%;
        bottom: 0;
        display: block;
        transition: all .8s ease-out; 
        
        svg {
            width: 350px;
            height: 200px;
        }
    } 
    
    .scroll-js--active {
        left: 0;
    }


// 2 блок 

.info__items {
        opacity:0;

        &:nth-child(2) {
            transition-delay: .8s;
        }

        &:nth-child(3) {
            transition-delay: 1.6s;
        }

        &:nth-child(4) {
            transition-delay: 2.4s;    
        }
    }

    .scroll-js--active .info__items{
        opacity: 1;
    }

рони · #2 (**permalink**) 29.09.2021, 18:00

seven8959,
https://javascript.ru/forum/dom-wind...tml#post534123

seven8959 · #3 (**permalink**) 29.09.2021, 18:25

К сожаление, то что вы предлагаете, не работает в IE, а нужно

рони · #4 (**permalink**) 29.09.2021, 18:41

seven8959,
делайте цикл по элементам, и у каждого проверяйте видимость.

seven8959 · #5 (**permalink**) 29.09.2021, 18:47

Не совсем понял, сначала цикл, которые у меня? В этом цикле условие if(Так же которое у меня) и после условия вешаем класс?

рони · #6 (**permalink**) 29.09.2021, 18:52

seven8959,
примерно так.

var elements = $('.scroll-js');
 $(window).scroll(function() {
        elements.each(function(indx, el) {
            var visibility = checkViewport(el);
if(visibility) $(el).addClass('scroll-js--active');
       });

seven8959 · #7 (**permalink**) 29.09.2021, 19:32

(((Что то не помогло

рони · #8 (**permalink**) 29.09.2021, 19:52

seven8959,
где минимальный код целиком?Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #9 (**permalink**) 29.09.2021, 21:10

seven8959,
сделано для ie. если что не так, делайте похожий макет со своими html и css.

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .grid-container {
            height: 300px;
            overflow: hidden;
            background-color: #0000FF;
            margin: 10px auto;
            width: 400px;
            display: block;
        }

        .grid-container__col-1 {
            height: 300px;
            width: 100px;
            border: 1px solid red;
            transform: translateY(50%);
            opacity: 0;
            background-color: #FF1493;
            box-sizing: border-box;
            float: left;
        }

        .grid-container.animate .grid-container__col-1 {
            transform: translateY(0px);
            opacity: 1;
            transition: 1.2s;
            transition-delay: 0ms;
        }

        section {
            height: 100vh;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            let container = document.querySelectorAll('.grid-container');
            [].forEach.call(container, function(div) {
                let children = div.querySelectorAll('.grid-container__col-1');
                let length = children.length;
                [].forEach.call(children, function(el, i) {
                    el.style.setProperty('transition-delay', (i * 1800 / length) + 'ms')
                })
            })


            function anim() {
                [].forEach.call(container, function(div) {
                    checkViewport(div) && div.classList.add("animate")
                });
            }

            function checkViewport(a) {
                var b = a.getBoundingClientRect();
                return 0 < b.top && b.top + b.height < window.innerHeight
            };

            window.addEventListener("scroll", anim, false);
            anim()
        });
    </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>

seven8959 · #10 (**permalink**) 29.09.2021, 21:26

Спасибо конечно, но так то это и было все мое.

Форум

Справочник

Discord чат

Курсы javascript