[html/css/js]타이핑 효과 랜딩 페이지 만들기

Hello_Wendy·2022년 6월 2일
0

html/css/js

목록 보기
12/12
post-thumbnail

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Text</title>
  <!--material icon 사용 위한 링크-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <div class="wrap">
    <h1>
      <span class="material-icons">language</span><!--아이콘 삽입--> 
    </h1>
    <p id="dynamic" class="lg-text"></p>
    <p class="sm-text">CODING | BY WENDY</p>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS

* {
  margin : 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkslateblue;
}

.wrap {
  /*정중앙배치*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); 

  color: white;

  /*아이콘폰트는 css의 텍스트와 관련된 속성 그대로 적용 가능*/
  text-align: center;
}

.material-icons {
  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;
}

/*after 가상요소 만들기(커서 처럼 보이기)*/
#dynamic::after {
  content: "";
  display: block;

  /*커서모양 항상 오른쪽에 위치*/
  position: absolute;
  top: 0;
  right: -10px;

  /*커서 바 모양*/
  width: 4px;  
  height: 100%; /*커서 높이는 글자 크기만큼*/
  background-color: white;
}

#dynamic.active::after {
  display: none;
}

Javascript

/*dynamic 문서객체를 선택*/ 
let target = document.querySelector("#dynamic");

function randomString() {
  //배열변수
let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to Javascript", "Learn to Python", "Learn to Ruby"];
//배열변수 중 랜덤으로 하나를 선택:floor는 소수점 버림
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
//해당 문자열을 split("")방식으로 분리시켜라: 글자 하나하나 쪼개기
let selectStringArr = selectString.split("");

return selectStringArr;
}

//텍스트 문장 다 타이핑되면 리셋되는 효과
function resetTyping(){
  target.textContent = "";
  dynamic(randomString());
}

//랜덤매개변수가 0보다 클 경우 계속 반복(한글자씩 텍스트 타이핑 효과)
function dynamic(randomArr) {
  if(randomArr.length > 0) {
    target.textContent += randomArr.shift();
    setTimeout(function(){
      dynamic(randomArr);
    },80); 
  }else {
    setTimeout(resetTyping,3000)
  }
}

//다이나믹을 호출할 때 selectStringArr을 매개변수로 받음
dynamic(randomString());

//커서가 깜빡임 효과:active 클래스가 추가되었다가 삭제되었다가 반복 
function blink() {
  target.classList.toggle("active");
}
//반복함수 이용
setInterval(blink,500);
profile
안녕 나의 새로운 세상

0개의 댓글