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
<script>
const content = "Typing Effect";
const text = document.querySelector(".text");
let index = 0;
let intervalId;
function typing() {
text.textContent += content[index++];
if (index >= content.length) {
clearInterval(intervalId);
}
}
intervalId = setInterval(typing, 200);
</script>
푸른산타님 감사합니다.
ChatGPT
저도 써봐야겠네요... ^^
<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>
setInterval(typing, 200) -> setTimeout(typing, 200)
감사합니다. 친절한태엽씨님~
귀한 시간 내주셔서 감사합니다.
