html

[HTML+CSS+Javascript 강의] 타이핑 효과 랜딩 페이지 만들기 / 실습 / 웹 코딩

Son 2024. 7. 9. 13:41

[HTML+CSS+Javascript 강의] 타이핑 효과 랜딩 페이지 만들기 / 실습 / 웹 코딩 (youtube.com)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <h1>
            <span class="material-symbols-outlined">language</span>
        </h1>
        <p id="dynamic" class="lg-text active">
            
        </p>
        <p class="sm-text">SUCODING ❘ 100 Subscribe</p>
    </div>    
    <script src="main.js"></script>
</body>
</html>
*｛
    margin：０；
    padding:０；
    box-sizing:　border-box；
｝

body{ 
    background-color: darkslateblue;
}
    
.wrap{ 
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}
    
.material-symbols-outlined{
    font-size: 10rem;    
}

.lg-text{
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;    
}

.sm-text{
    font-size: 1.5rem;
}

#dynamic{
    position: relative;
    display: inline-block;
}

#dynamic::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -10;
    width: 4px;
    height: 100%;
    background-color: white;
}

#dynamic.active::after{
    display: none;
}
let target = document.querySelector("#dynamic");

function randomString(){
    let target = document.querySelector("#dynamic");  //dynamic 클래스를 가져옴
    let stringArr = ["Learn to HTML","Learn to CSS", "Learn to Javascript", "Learn to Python", "Learn to Ruby"];  //HTML상에서 보여줄 글을 랜덤으로 보여주기 위해서 배열을 만듬
    let selectString = stringArr[Math.floor(Math.random()　*　stringArr.length)]; //랜덤으로 보여주기 위해서 배열의 길이만큼을 랜덤함수랑 곱하고 selectString
    let selectStringArr = selectString.split("");  //한글자씩 보여주기 위해서 split

    return selectStringArr;

}

function resetTyping(){
    target.textContent = "";  //화면상의 모든 글자를 다 지우고

    dynamic(randomString());  //다시 글자를 화면에 띄우는 걸 실행  
}



function dynamic(randomArr){

    if(randomArr.length > 0){  //재귀 탈출 조건
        target.textContent += randomArr.shift(); //Shift함수는 배열에서 1개를 출력하고 배열에서 출력문자를 삭제하는 함수
        setTimeout(function(){  //재귀
            dynamic(randomArr);
        },80); 
    }else{
        setTimeout(resetTyping, 3000); //배열에 있는 모든 value값이 화면에 띄워지면 3초뒤 실행
    }
   
}

dynamic(randomString());

function blink(){
    target.classList.toggle("active"); //엑티브 함수 온!
}
setInterval(blink, 500); //0.5초마다 엑티브 함수 실행 깜빡깜빡 하는 효과