如何使動畫在視口中一次開始

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位於視口中時消除滾動部分並啟動動畫。

//如果將指定元素滾動到視口中，則返回true。 / *函數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

為什么不使用諸如onLeave或afterLoad之類的fullPage.js回調？

這就是他們的目的。