Question

我需要的是在元素可见时（在视口中）触发动画。我有一个名为openAnimation()的函数，它运行GSPA TweenMax。这应该很好地激活我的元素，但它确实有效。

基本上我需要在我的元素inview中触发openAnimation()。

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"
});



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);
}

jquery animate if元素是否在视口中

0 个答案: