如果元素在视口中，则 JQuery 触发函数

Question

当元素“在视口中”时，我正在尝试使函数 openAnimation() 工作！

现在，这个特殊的功能是 GSAP。每次我运行openAnimation() 时都无法正常工作。 每次添加 in-view 类时运行两次并重复。

-那么如何使用这个插件运行我的 GSAP 功能？

https://codepen.io/davide77/pen/qPLoKP

function inView( opt ) {
    if( opt.selector === undefined ) {
        console.log( 'Valid selector required for inView' );
        return false;
    }
    var elems = [].slice.call( document.querySelectorAll( opt.selector ) ),
        once = opt.once === undefined ? true : opt.once,
        offsetTop = opt.offsetTop === undefined ? 0 : opt.offsetTop,
        offsetBot = opt.offsetBot === undefined ? 0 : opt.offsetBot,
        count = elems.length,
        winHeight = 0,
        ticking = false;


    function update() {
        var i = count;
        while( i-- ) {
            var elem = elems[ i ],
                rect = elem.getBoundingClientRect();
            if( rect.bottom >= offsetTop && rect.top <= winHeight - offsetBot ) {
                elem.classList.add( 'in-view' );

                if( once ) {
                    count--;
                    elems.splice( i, 1 );
                }
            } else {
                elem.classList.remove( 'in-view' );
            }
        }
        ticking = false;

    }

    function onResize() {
        winHeight = window.innerHeight;
        requestTick(); 
    }

    function onScroll() {
        requestTick(); 
    }

    function requestTick() {
        if( !ticking ) {
            requestAnimationFrame( update );
            ticking = true;
        }
    }

    window.addEventListener( 'resize', onResize, false );
    document.addEventListener( 'scroll', onScroll, false );
    document.addEventListener( 'touchmove', onScroll, false );

    onResize();
}

inView({
    selector: '.view-poll', // an .in-view class will get toggled on these elements
    once: true, // set this to false to have the .in-view class be toggled on AND off
    offsetTop: 0, // top threshold to be considered "in view"
    offsetBot: 0 // bottom threshold to be considered "in view"
});


// HOW CAN I RUN THIS FUNCTION NOW?

function openAnimation() {

  var rotate = $('.rotate.in-view');
  var scale = $('.scale.in-view');
  var translate = $('.translate.in-view');

  //feature Left

  TweenLite.from(rotate, 1.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05);
  TweenLite.from(scale, 1.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05);
  TweenLite.from(translate, 1.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05);
}

Answer 1

您可以使用库jQuery-visible。在它的帮助下，您可以创建一个窗口事件onScroll 并检查您的元素是否“可见”，然后调用您的函数。

Answer 2

您可以使用http://scrollmagic.io/。有了这个，您可以在滚动时或在其视图中启动任何功能。