타이핑 효과 랜딩 페이지
조금 특별한 랜딩 페이지를 만들어 보고 싶어 제작하게 되었다.
CSS공부를 하던 중 알게 된 수코딩님의 강좌를 보고 만들게 되었는데 생각지도 못한 방식으로 만들어지게 되어 신기하기도 하고 꼭 기억하고 싶어 적게 되었다.
CSS 효과
#dynamic {
position: relative;
display: inline-block;
}
#dynamic::after {
content: "";
display: block;
position: absolute;
top: 0;
right: -10px;
width: 4px;
height: 100%;
background-color: white;
}
#dynamic.active::after {
display: none;
}
#dynamic
에 display : inline-block
이 들어간 이유는 P
태그로 만들어지다 보니 커서의 위치가 p
태그의 영역만큼 따라가기에 글자 수가 짧아지거나 너무 길어지면 커서의 위치가 적절하지 않아 위와 같은 방식을 주게 되었다.
JS
let target = document.querySelector("#dynamic");
function randomString() {
let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to Javascript"];
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
// Math.floor를 넣어 소수점으로 나오던 숫자를 3을 넘지 않는 랜덤한 숫자가 나오게 됨
let selectStringArr = selectString.split("");
return selectStringArr;
}
// 타이핑 리셋
function resetTyping() {
target.textContent = "";
dynamic(randomString());
}
//한글자씩 텍스트 출력 함수
function dynamic(randomArr) {
if (randomArr.length > 0) {
target.textContent += randomArr.shift();
setTimeout(function () {
dynamic(randomArr);
}, 80);
} else {
setTimeout(resetTyping, 3000);
}
}
dynamic(randomString());
//커서 깜빡임 효과
function blink() {
target.classList.toggle("active");
}
setInterval(blink, 500);
배열로 출력하고자 하는 값들을 넣고 Math.random()
을 이용하여 랜덤한 형식으로 만들어지게 되는데 이때 소수점으로 나오기에 Math.floor
를 사용하여 소수점으로 나오던 숫자를 일반값으로 반환하게 하는 형식으로 만들었다.
Author And Source
이 문제에 관하여(타이핑 효과 랜딩 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@codedot/타이핑-효과-랜딩-페이지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)