타이핑효과 만들기‼️

NARA·2022년 7월 28일

Westudy

목록 보기

9/12

1. 커서모양 만들기

<!--html 작성하기-->
 <div class="hero">
        <h2>Hello!</h2>
        <p id="dynamic">타이핑텍스트와 커서가 들어갈 곳</p>
 </div>

html을 위와같이 작성한 후 css를 이용해 커서모양을 만들어준다.

 /*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 의 맨끝에 커서모양이 만들어 진 것을 확인할 수 있다!

2. 커서 깜빡거리게 하기

/*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 끝의 커서가 깜빡거리고 있다!

3. 타이핑 효과

//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

4. 텍스트 삭제 및 반복

//텍스트내용을 지우는 함수 만들기
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);