背景關系： 我有一個副標題“關于我”，當它出現在螢屏上時（每次），它會用影片庫animejs 進行影片處理。你可以在這里找到影片，我從托比亞的移動信件中得到它。
問題： 當我向下滾動到副標題時，我能夠在影片播放之前看到它。換句話說：我向下滾動，我閱讀了副標題“關于我”，然后它消失了，只是為了讓字母一個一個地彈出。
這不是想要的，我正在尋找一種方法來隱藏初始文本“關于我”，然后顯示每個影片字母
我在一些虛擬文本下制作了一個帶有副標題的片段，以便可以滾動到其中。
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
ready_to_play = false
}
if (!aboutme_vis){
ready_to_play = true
}
});/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>作為獎勵，我想要一種每次滾動出螢屏時再次隱藏文本的方法。
這是我的第一個 StackOverflow 問題！我希望任何人都可以幫助我??
uj5u.com熱心網友回復：
所以說實話，很可能有比這更好的解決方案。但這是我發現的一種接近你想要的快速方法。這樣做的問題是，如果它從一開始就在視口中并且沒有發生滾動，它將永遠不會顯示。你必須處理那個。在這里使用IntersectionObserver可能更適合你的情況。
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
setTimeout( () => {
aboutme.style.visibility = "visible";
} );
ready_to_play = false
}
if (!aboutme_vis){
aboutme.style.visibility = "hidden";
ready_to_play = true
}
});/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
#about-me {
visibility: hidden;
}<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/381516.html
標籤：javascript html css 动画片 日本动漫
上一篇：如何在HTML中制作影片WebSpeechAPIUI
下一篇：影片顯示某些隨機線段的生成