javascript 질문드려요~ 채택완료
<style>
/* ----------------------------------------
* animation
* ----------------------------------------
*/
@keyframes cursor{
50%{ border-color: transparent; }
}
.text{
display: table-cell;
vertical-align: middle;
font-size: 32px;
height: 32px;
border-right: .05em solid black;
animation: cursor 0.5s ease;
}
</style>
<div class="ani01">
<h1 class="text"></h1>
</div>
<script>
const content = "Typing Effect"
const text = document.querySelector(".text")
let index = 0;
function typing(){
text.textContent += content[index++]
if(index > content.length){
text.textContent = ""
index = 0;
}
}
setInterval(typing, 200)
</script>
타이핑효과를 주는 text animation 인데
이게 계속 반복됩니다.
한번만 보여주고 끝내려면 어딜 고쳐야하나요.... ㅜㅜ
답변 2개
ChatGPT 답변 입니다^^
<script>
const content = "Typing Effect";
const text = document.querySelector(".text");
let index = 0;
let intervalId;</p>
<p> function typing() {
text.textContent += content[index++];</p>
<p> if (index >= content.length) {
clearInterval(intervalId);
}
}</p>
<p> intervalId = setInterval(typing, 200);
</script>답변에 대한 댓글 2개
<a href="#pop" onclick="window.open('https://chat.openai.com/chat','','width=1000,height=600')"><i class="fa fa-comments-o" title="chatGPT" style="float:center;font-size:30px"></i></a>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
ChatGPT
저도 써봐야겠네요... ^^