기본 틀을 만들어놓고 기능만 조금씩 추가하니 시간이 많이 안걸리는 것 같다
역시 기본이 중요한건가
html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="chatbot.css"/>
<script src="https://www.cssscript.com/demo/simple-typewriter-effect-pure-javascript-typewriterjs/typewriter.js"></script>
</head>
<body>
<div class="layout">
<img class="cat" src="지냥이.jpg">
<div class="type"></div>
<div class="cat_says">
지냥이는 신관 앞 벤치에 살아!
</div>
<br>
<div class="input_layout">
<input type="text" id="console" class="input_style">
</div>
<div class="button" onclick=check_text()>
</div>
<script src="./chatbot.js"></script>
</div>
</body>
</html>js / 타이핑 부분만
var app = document.getElementsByClassName('type')[0];
var typewriter = new Typewriter(app, {
loop: true,
});
typewriter
.typeString("지냥이에게 말을 걸어보자")
.pauseFor(1300)
.deleteAll()
.typeString("지냥이는 당신을 기다리고 있다")
.pauseFor(2500)
.start();css/ 타이핑 자막이 들어갈 공간만 추가해줬다
.type {
font-family: "MaruBuri-Regular";
height:50px;
width:450px;
margin: auto;
text-align:center;
}result
'교육 > 2022 모각코 코뮤니티 2월과정 - js' 카테고리의 다른 글
| 모각코2월-JS-후기 (1) | 2022.03.01 |
|---|---|
| 모각코2월-JS-15일차-챗봇5 (0) | 2022.03.01 |
| 모각코2월-JS-13일차-챗봇3 (1) | 2022.03.01 |
| 모각코2월-JS-12일차-챗봇2:배경색 (0) | 2022.02.22 |
| 모각코2월-JS-11일차-챗봇1 (0) | 2022.02.21 |
