如何让动画在视口中启动一次

Question

我有一个使用 fullpage.js 插件的页面。此插件允许用户向下滚动并显示整个 100%vh 屏幕。

我的问题是我想延迟不同部分的动画，直到 div 在视口内。我花了一段时间才弄清楚这一点，并试图执行滚动功能，忘记了我并没有真正滚动的事实。在我尝试这样做之前：

<div id="section1-right-container">
    <div id="think"></div>
</div>


$(window).on("scroll", function(){
        // Determine if the element is in the viewport
        if($('section1-right-container').visible(true)) {
        $('section1-right-container').addClass("think");
    }
});

我找到了以下代码并对其进行了一些修改，我只是不确定如何消除滚动部分并在 section1-right-container 出现在视口中后启动动画。

// Returns 如果指定元素已滚动到视口中，则为真。 /*函数isElementInViewport(elem) { var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
/*function checkAnimation() {
    var $elem = $('#think');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

有人知道我能做什么吗？

更新 - 可见插件

(function(e) {
  e.fn.visible = function(t, n, r) {
    var i = e(this).eq(0),
      s = i.get(0),
      o = e(window),
      u = o.scrollTop(),
      a = u + o.height(),
      f = o.scrollLeft(),
      l = f + o.width(),
      c = i.offset().top,
      h = c + i.height(),
      p = i.offset().left,
      d = p + i.width(),
      v = t === true ? h : c,
      m = t === true ? c : h,
      g = t === true ? d : p,
      y = t === true ? p : d,
      b = n === true ? s.offsetWidth * s.offsetHeight : true,
      r = r ? r : "both";
    if (r === "both") return !!b && m <= a && v >= u && y <= l && g >= f;
    else if (r === "vertical") return !!b && m <= a && v >= u;
    else if (r === "horizontal") return !!b && y <= l && g >= f
  }
})(jQuery)

Answer 1

为什么不使用 fullPage.js 回调，例如 onLeave or afterLoad？

这就是他们的目的。

如何让动画在视口中启动一次

How to get an animation to start once in viewport

javascript

jquery

scroll

function

fullpage.js