[英]JQuery trigger function if element is in viewport
当元素“在视口中”时,我试图使功能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);
}
您可以使用jQuery-visible库。 有了它的帮助,您可以在onScroll
创建一个窗口事件,并检查您的元素是否“可见”,然后调用您的函数。
您可以使用http://scrollmagic.io/ 。 使用此功能,您可以在滚动时或在视图中启动任何功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.