當元素使用 getBoundingClientRect 或交叉點觀察器進入視口時運行 function

Question

當 element.txt-anim 進入視口並想使用 getBoundingClientRect 或交叉點觀察器時，我正在嘗試運行名為 txtAnim 的 function

那可能嗎？ 我沒有讓它工作

（我有 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>

任何人都可以幫忙嗎？ 我已經嘗試過使用交叉點觀察者，因為我認為這會更容易

Answer 1

好的，所以您在這里使用交叉點觀察器的方式存在一些問題。

首先，你的根是錯誤的。 您使用與嘗試觀察相同的元素作為root ，這意味着您在問一個問題， When does this element intersect with itself? 這顯然不是一個非常有用的問題。

如果您希望它在您在視口中滾動到它時顯示，您實際上根本不需要指定根。

其次，你沒有檢查你真正需要檢查的東西： isIntersecting屬性。 當交叉點觀察者回調觸發時，第一個參數是一個entries數組，每個條目都有一個isIntersecting屬性，可以是真或假。

我已經制作了這個 jsfiddle，它可能接近於做你想做的事。

https://jsfiddle.net/xapjz2fe/

如您所見，我還添加了一項檢查以確保 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>

我的 javascript 的縮進從 jsfiddle 復制過來被破壞了，對此感到抱歉