0

当您查看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 专家，但是当我滚动到顶部时是否也可以让它缓和下来，当我向下滚动时它又缓和回来？

4

0 回答 0