<!--html 작성하기-->
<div class="hero">
<h2>Hello!</h2>
<p id="dynamic">타이핑텍스트와 커서가 들어갈 곳</p>
</div>
/*css 작성하기*/
.hero #dynamic {
position: relative;
display: inline-block;
font-size: 35px;
}
/*커서모양 만들기*/
.hero #dynamic::after {
content: "";
display: block;
position: absolute;
top: 0;
right: -10px;
width: 4px;
height: 100%;
background-color: white;
}
::after (가상요소 선택자)
: 선택한 요소의 맨마지막에 가상요소를 생성함.
아이디dynamic 의 맨마지막에 커서모양을 생성하기위해 사용함.
👉🏻 Typing & Cursor 의 맨끝에 커서모양이 만들어 진 것을 확인할 수 있다!
/*css active클래스에 속성추가*/
.hero #dynamic.active::after{
display: none; /*active 클래스가 있으면 보이지 않음*/
}
//javascript 작성하기
const target = document.querySelector("#dynamic"); //html에서 dynamic 선택
//함수 만들기
function blink(){
target.classList.toggle("active"); // dynamic에 active 클래스 추가<->삭제 반복
}
setInterval(blink, 500) // blink 함수를 0.5초마다 실행
toggle
:클래스 값을 토글링한다. 클래스가 존재하면 제거하고 false를 반환, 존재하지 않으면 클래스를 추가하고 true를 반환
setInterval
:고정된 시간지연으로 함수를 반복적으로 호출
setInterval(함수, 함수실행이 지연되는 시간(1000분의 1초))
👉🏻 Typing & Cursor 끝의 커서가 깜빡거리고 있다!
//javascript 작성하기
const string = "I want to be a Front-end Developer";//원하는 텍스트를 string변수 선언
const split = string.split(""); //string의 텍스트를 여러개의 문자열로 나눠줌
split
:객체를 지정한 구분자를 이용하여 여러개의 문자열로 나눠줌
const str = 'The quick brown fox'; //split을 이용해 문자열 나누기 const words = str.split(' '); console.log(words); //["The", "quick", "brown", "fox"] const chars = str.split(''); console.log(chars); // expected output: ["T", "h", "e", " ", "q", "u", "i", "c", "k", " ", …]
//문자열을 한개씩 나타내주는 함수 만들기
function dynamic(arr){
if(arr.length > 0){ //배열의 길이가 0보다 크면(배열에 요소가 하나라도 있다면)
target.textContent += arr.shift();//dynamic에 textContent에 배열의 요소 추가
setTimeout(function(){
dynamic(arr)}, 80)//0.08초 후에 daynamic함수를 실행
}
}
dynamic(split); //dynamic함수에 split인자 넣어서 실행
setTimeout
:타이머가 만료된 후 지정한 함수를 실행
setTimeout(함수, 함수실행 전 기다릴 시간(1000분의 1초))
shift
:배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환
const array = [1, 2, 3]; // const array2 = array.shift(); console.log(array); // expected output: Array [2, 3] console.log(array2); // expected output: 1
//텍스트내용을 지우는 함수 만들기
function reset(){
target.textContent = ""; //textContent의 내용 없애주기
const resplit = string.split("");
// string의 텍트스를 여러개의 문자열로 나눠주고 resplit 변수에 할당
dynamic(resplit); // dynamic함수에 resplit인자를 넣어서 실행
}
function dynamic(arr){
if(arr.length > 0){
target.textContent += arr.shift();
setTimeout(function(){
dynamic(arr)}, 80)
} else { //배열의 길이가 0이하이면(배열에 요소가 없으면)
setTimeout(reset, 3000); //3초후에 reset함수 실행
}
}
dynamic(split);
👉🏻 css와 javascript를 이용해서 깜빡거리는 커서와 타이핑이 되는 것처럼 보이는 효과 완성!👏🏻👏🏻👏🏻