简体   繁体   English

jQuery触发函数(如果元素在视口中)

[英]JQuery trigger function if element is in viewport

I'm trying to make a function openAnimation() working, when the element is "in viewport"! 当元素“在视口中”时,我试图使功能openAnimation()工作!

Now, this particular function is GSAP. 现在,此特定功能是GSAP。 Every time I run openAnimation() doesn't work as aspected. 每次我运行openAnimation()都无法正常工作。 Runs twice and repeats each time the in-view class is been added. 运行两次,每次添加in-view类时重复一次。

-So how can I run my GSAP function with this plug in? -那么如何使用此插件运行我的GSAP功能?

https://codepen.io/davide77/pen/qPLoKP 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);
}

You can use the library jQuery-visible . 您可以使用jQuery-visible库。 With its help, you can create a window event onScroll and check if your element is "visible", then call your function. 有了它的帮助,您可以在onScroll创建一个窗口事件,并检查您的元素是否“可见”,然后调用您的函数。

You can use http://scrollmagic.io/ . 您可以使用http://scrollmagic.io/ With this you can initiate any function on scroll or when its in view. 使用此功能,您可以在滚动时或在视图中启动任何功能。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM