Анимировать на свитке JS - PullRequest
Новая
       14

Анимировать на свитке JS

0 голосов
/ 21 января 2019

Я новичок в JavaScript и пытаюсь добавить анимацию при прокрутке сайта.

У меня есть несколько div-ов, каждый с уникальным именем класса и все с одинаковым .section class.

Я хочу анимировать каждый .section на свитке, не вызывая другие .sections 

<section class="home__one section></section>
<section class="home__two section></section>
<section class="home__three section></section>
<section class="home__four section></section>


$(window).on("scroll",function(){
    var winTop = $(this).scrollTop();
    var section = $(".section").offset().top;

    if(winTop >= section-400) {
      $(".section").addClass("animate");
    };
});

Приведенный выше код, очевидно, срабатывает каждый .section , когда первый достигает своей позиции на прокрутке.

Я не могу понять, как сработал бы один .section , когда он появится.

Возможно, я делаю это совершенно неправильно, поэтому если я так сделаю, ваша помощь будет высоко ценится.

1 Ответ

0 голосов
/ 21 января 2019

Здесь вам нужно пройтись по всем доступным разделам и в зависимости от того, какие разделы совпадают, вы должны применить класс. 

if (winTop >= section - 400) {
  $(".section").addClass("animate");
};

Плюс, у вас нет ; в концеif оператор.

Ваш окончательный код будет выглядеть так: 

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(this).addClass("animate");
    }
  });
});

Я бы предложил удалить класс animate из всех остальных разделов.Итак, измените ваш код следующим образом: 

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(this).addClass("animate");
    }
  });
});

Кроме того, как только вы начнете добавлять класс, вы не хотите, чтобы другие имели класс в них.Таким образом, укажите и верхнее значение. 

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(".section").removeClass("animate");
      $(this).addClass("animate");
    }
  });
});

Рабочий фрагмент: 

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(".section").removeClass("animate");
      $(this).addClass("animate");
    }
  });
});
.section {
  height: 750px;
}
.animate {
  background: #960;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home__one section">Section one</section>
<section class="home__two section">Section two</section>
<section class="home__three section">Section three</section>
<section class="home__four section">Section four</section>

Предварительный просмотр:

Демонстрация, которую вы можете увидетьработает медленно, прокручивая: JSBin Demo .

...