Блог

Я работаю над сайтом, на котором я хочу, чтобы содержимое исчезало и при прокрутке отображалось в окне просмотра. У меня есть приведенный ниже код, который хорошо работает при прокрутке, но я хотел бы улучшить его двумя способами, которые, похоже, я не могу понять, как достичь того, чего я хочу…

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

Во-вторых, есть ли способ немного доработать этот код, чтобы указать% элемента, который должен быть в поле зрения, прежде чем произойдет анимация и исчезновение анимации?

 function fadeInDivsOScrollToo() {
$('.fade-in').each(function() {
    var top_of_element = $(this).offset().top;
    var bottom_of_element = $(this).offset().top   $(this).outerHeight();
    var bottom_of_screen = $(window).scrollTop()   $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) amp;amp; (top_of_screen < bottom_of_element) amp;amp; !$(this).hasClass('is-visible')) {
        $(this).addClass('is-visible');
    }
});

}
$(window).on('load', function(){ fadeInDivsOScrollToo(); });
$(window).on('scroll', function(){ fadeInDivsOScrollToo(); });
$(window).on('resize', function(){ fadeInDivsOScrollToo(); });
 

с помощью CSS:

 .fade-in {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.8s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}
 

Не волнуйтесь — в итоге я использовал этот подход и вместо этого использовал путевые точки.