"Eat. Sleep. Repeat."라는 텍스트가 있습니다. 각 단어가 하나씩 위로 올라가고 사라지기를 원합니다. 따라서 Eat가 페이드 인되고 Sleep, Repeat이됩니다. anime.js, 키 프레임 사용, CSS 클래스 추가 등과 같은 여러 가지 방법을 시도했지만 어느 것도 작업을 완료하지 못했습니다. 현재 내 코드는 다음과 같습니다.
function findelem(tag, text) {
var x = document.getElementsByTagName(tag);
for (var i = 0; i < x.length; i++) {
if (x[i].innerHTML == text) {
return x[i];
}
}
return null;
}
function wrapWords (text) {
words = text.innerHTML.split(" ");
text.innerHTML = "";
for (var i = 0; i < words.length; i++) {
text.innerHTML += "<span style = \"opacity: 0; position: relative; top: 30px;\">" + words[i] + " " + "</span>";
}
return text.children
}
function animatetext (wordarr) {
anime({
targets: wordarr,
translateY: -30,
duration: 3000,
opacity: 1,
delay: anime.stagger(1000),
});
}
window.onload = function () {
x = findelem("H1", "Eat. Sleep. Repeat.");
xarr = wrapWords(x);
animatetext(xarr);
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<script type="text/javascript"></script>
<h1>Eat. Sleep. Repeat.</h1>이것을 위해 CSS가 필요합니다. 그러나 <span>단어 주위 에 몇 가지 요소 를 추가해야합니다 . 하지만 자바 스크립트 없이는 매우 쉽게 할 수 있습니다. 다음은 그 예입니다.
h1.fadeIn span{
opacity: 0;
transform: translateY(30px);
animation: fadeIn 0.5s ease-out forwards;
display:inline-block;
}
h1.fadeIn span:nth-of-type(2){
animation-delay: 0.5s;
}
h1.fadeIn span:nth-of-type(3){
animation-delay: 1s;
}
@keyframes fadeIn{
to{
opacity: 1;
transform: translateY(0);
}
}<h1 class="fadeIn">
<span>Eat.</span>
<span>Sleep.</span>
<span>Repeat.</span>
</h1>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다