[英]Run function when element enters to viewport with getBoundingClientRect or intersection observer
i'm trying to run a function called txtAnim when the element.txt-anim enters to the viewport and want to use getBoundingClientRect or intersection observer当 element.txt-anim 进入视口并想使用 getBoundingClientRect 或交叉点观察器时,我正在尝试运行名为 txtAnim 的 function
Is that possible?那可能吗? I didn't get it working
我没有让它工作
(I have the animation working but i want it fired when it enters to the viewport) (我有 animation 工作,但我希望它在进入视口时触发)
function txtAnim(speed){ jQuery('.txt-anim').css("opacity", "1"); var skills = jQuery('.txt-anim p').contents().filter(function() { return this.nodeType === 3; // only immediate text in div, not in span }).map(function() { var txt = "<span class='letter'>" + jQuery(this).text().split("").join("</span><span class='letter'>") + "</span>"; // console.log(txt); jQuery(this).replaceWith(txt); }); var i = 0; var span = jQuery('.txt-anim').find('span'); jQuery(".txt-anim p").empty(); typeWriter(); function typeWriter() { if (i < span.length) { jQuery('.txt-anim p').append(span[i]); i++; setTimeout(typeWriter, speed); }else{ console.log("text animation ended"); jQuery('.home-page-cities-mobile').css("opacity", "1"); jQuery('.flecha-home').css("opacity", "1"); } } } //Intersection Observer const textAnim = document.querySelector('.txt-anim'); let options = { root: textAnim, rootMargin: "0px", threshold: 1.0 }; let observer = new IntersectionObserver(txtAnim(20), options); observer.observe(textAnim);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="logo-message txt-anim"> <p> <span class="letter">L</span> <span class="letter">i</span> <span class="letter">q</span> <span class="letter">u</span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter empty"> </span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter">e</span> <span class="letter">a</span> <span class="letter">s</span> <span class="letter empty"> </span> <span class="letter">t</span> <span class="letter">o</span> <span class="letter empty"> </span> <span class="letter">g</span> <span class="letter">e</span> <span class="letter">t</span> <span class="letter empty"> </span> <span class="letter">a</span> <span class="letter">n</span> <span class="letter">y</span> <span class="letter">w</span> <span class="letter">h</span> <span class="letter">e</span> <span class="letter">r</span> <span class="letter">e</span> </p> </div>
Can anyone help?任何人都可以帮忙吗? I've tried with intersection observer beucase i thought it would be easier
我已经尝试过使用交叉点观察者,因为我认为这会更容易
OK, so there's a couple problems with the way you're using intersection observer here.好的,所以您在这里使用交叉点观察器的方式存在一些问题。
First, your root is wrong.首先,你的根是错误的。 You're using the same element for
root
as you're trying to observe, which means you're asking the question, When does this element intersect with itself?
您使用与尝试观察相同的元素作为
root
,这意味着您在问一个问题, When does this element intersect with itself?
which is obviously not a very useful question.这显然不是一个非常有用的问题。
If you want it to show when you've scrolled to it in the viewport, you actually don't need to specify a root at all.如果您希望它在您在视口中滚动到它时显示,您实际上根本不需要指定根。
Secondly, you're not checking the thing you really need to check: the isIntersecting
property.其次,你没有检查你真正需要检查的东西:
isIntersecting
属性。 When the intersection observer callback fires, the first argument is an array of entries
, and each entry has an isIntersecting
property which can be true or false.当交叉点观察者回调触发时,第一个参数是一个
entries
数组,每个条目都有一个isIntersecting
属性,可以是真或假。
I've made this jsfiddle that maybe comes close to doing what you want.我已经制作了这个 jsfiddle,它可能接近于做你想做的事。
https://jsfiddle.net/xapjz2fe/ https://jsfiddle.net/xapjz2fe/
As you can see, i've also added in a check to make sure the function txtAnim
doesn't run itself more than once -- without that check, if you scrolled to the element, then scrolled away and scrolled back, txtAnim
would run a second time and it would mess everything up.如您所见,我还添加了一项检查以确保 function
txtAnim
不会多次自行运行 - 没有该检查,如果您滚动到元素,然后滚动离开并向后滚动, txtAnim
将运行第二次,它会搞砸一切。
let txtAnimStarted = false; function txtAnim(speed){ if (txtAnimStarted) return; txtAnimStarted = true; console.log('starting txtAnim'); jQuery('.txt-anim').css("opacity", "1"); var skills = jQuery('.txt-anim p').contents().filter(function() { return this.nodeType === 3; // only immediate text in div, not in span }).map(function() { var txt = "<span class='letter'>" + jQuery(this).text().split("").join("</span><span class='letter'>") + "</span>"; // console.log(txt); jQuery(this).replaceWith(txt); }); var i = 0; var span = jQuery('.txt-anim').find('span'); jQuery(".txt-anim p").empty(); typeWriter(); function typeWriter() { if (i < span.length) { jQuery('.txt-anim p').append(span[i]); i++; setTimeout(typeWriter, speed); }else{ console.log("text animation ended"); jQuery('.home-page-cities-mobile').css("opacity", "1"); jQuery('.flecha-home').css("opacity", "1"); } } } //Intersection Observer const textAnim = document.querySelector('.txt-anim'); let options = { rootMargin: "0px", threshold: 1.0 }; let observer = new IntersectionObserver((entries) => { const entry = entries[0]; if (entry.isIntersecting) txtAnim(20); }, options); observer.observe(textAnim);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="margin-bottom:1000px">top div, scroll down</div> <div class="logo-message txt-anim" style="padding-bottom:20px"> <p> <span class="letter">L</span> <span class="letter">i</span> <span class="letter">q</span> <span class="letter">u</span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter empty"> </span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter">e</span> <span class="letter">a</span> <span class="letter">s</span> <span class="letter empty"> </span> <span class="letter">t</span> <span class="letter">o</span> <span class="letter empty"> </span> <span class="letter">g</span> <span class="letter">e</span> <span class="letter">t</span> <span class="letter empty"> </span> <span class="letter">a</span> <span class="letter">n</span> <span class="letter">y</span> <span class="letter">w</span> <span class="letter">h</span> <span class="letter">e</span> <span class="letter">r</span> <span class="letter">e</span> </p> </div>
My indentation of the javascript got ruined copying over from jsfiddle, sorry about that我的 javascript 的缩进从 jsfiddle 复制过来被破坏了,对此感到抱歉
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.