[英]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.