https://codepen.io/alvarotrigo/pen/ZEJgqLN
이 사이트에 있는 텍스트 타이핑 애니메이션 코드를 그대로 가져와서 쓰려는데
모두 외부 css/js파일로 해서 끌어오려고 하는데
근데 자바스크립트만 적용이 안돼요.... 뭐가 문제인지 모르겠습니다
이건 css 코드입니다.
이 사이트에 있는 텍스트 타이핑 애니메이션 코드를 그대로 가져와서 쓰려는데
모두 외부 css/js파일로 해서 끌어오려고 하는데
근데 자바스크립트만 적용이 안돼요.... 뭐가 문제인지 모르겠습니다
이건 html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
<script src="script.js"></script>
</head>
<body>
<div class="word"></div>
</body>
</html>
이건 자바스크립트 코드
var words = ['Hi i like HTML', 'I also like css', 'Lorem ipsum dolor sit amet', ' consectetur adipiscing elit', 'sed do eiusmod tempor incididunt'],
part,
i = 0,
offset = 0,
len = words.length,
forwards = true,
skip_count = 0,
skip_delay = 15,
speed = 70;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= words[i].length) {
++skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
}
else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= len) {
i = 0;
}
}
}
part = words[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
}
else {
offset--;
}
}
$('.word').text(part);
},speed);
};
$(document).ready(function () {
wordflick();
});
html {
height: 100%;
}
body {
display: flex;
height: 100%;
background-color: #333;
}
.word {
margin: auto;
color: white;
font: 700 normal 2.5em 'tahoma';
text-shadow: 5px 2px #222324, 2px 4px #222324, 3px 5px #222324;
}
저도 초보긴 한데 script 태그에 defer 넣어보실? - dc App