Упрощение входа/уменьшения при прокрутке и видимость в окне просмотра

Когда вы смотрите на веб-сайт https://www.mercedes-benz.com/en/ и прокручиваете вниз, весь контент становится легче. Когда вы прокручиваете полностью вниз и снова прокручиваете вверх (медленно), вы также увидеть, как содержимое (блоки) снова исчезает. Когда вы вернетесь наверх и снова прокрутите вниз, весь контент снова начнет сокращаться.

Я знаю что-то вроде ленивой загрузки или упрощения с помощью jQuery, но как только он загружается, анимация выполняется. Когда вы прокручиваете вверх, ничего не ослабевает. Таким образом, вы не можете снова сделать легкость в анимации.

Я нашел пример (не та анимация, которую я хочу, но я могу изменить это), например, с затуханием:https://codepen.io/chriscoyier/pen/DjmJe

Это javascript, который они использовали:

      (function($) {
  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible"); 
  } 
});

win.scroll(function(event) {
  
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in"); 
    } 
  });
  
});

Я не эксперт по javascript, но можно ли также уменьшить его, когда я прокручиваю вверх, и возвращаюсь назад, когда я прокручиваю вниз?

0 ответов

Другие вопросы по тегам