如何使这个 animation 从屏幕中间开始，而不是在视图中？

Question

The below code is working exactly how I want, but I want the animation to happen not upon being viewed, but in the middle of the screen. I don't really want to slow down the animation, so I'm hoping for a way to change the JS to make this work...

(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

you need test if an element in viewport, for more information read this tutorial

How to test if an element is in the viewport with vanilla JavaScript