如何使這個 animation 從屏幕中間開始，而不是在視圖中？

Question

下面的代碼完全按照我的意願工作，但我希望 animation 不是在被查看時發生，而是在屏幕中間發生。 我真的不想放慢 animation 的速度，所以我希望有一種方法可以改變 JS 來完成這項工作......

(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 allModsL = $(".img-l-slide");
var allModsR = $(".img-r-slide");

win.scroll(function(event) {

allModsL.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("come-in-l"); 
  } 
});
  allModsR.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in-r"); 
    } 
  });

});

Answer 1

您需要測試視口中是否有元素，有關更多信息，請閱讀本教程

如何使用 vanilla JavaScript 測試元素是否在視口中