인프런 커뮤니티 질문&답변
작성한 질문수
타이핑을 반복해서 실행할 수 있나요?
작성
·
430
답변 3
1
강의에 있는 내용을 유지하면서 제이쿼리 방식으로 하시려면 아래처럼 반복 옵션만 넣으시면 됩니다.
/* TypeIt - Welcome */
$('#typing').typeIt({
strings: ["Business strategy.", "Innovation Plan.", "Creative Idea."],
speed: 100,
autoStart: true,
breakLines: false,
loop: true
});
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TypeIt</title>
<style>
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body {
font-family: 'Raleway', sans-serif;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#mystyle {
font-size: 3em;
}
#mystyle b {
color: royalblue;
}
#mystyle em {
color: crimson;
}
</style>
</head>
<body>
<!--
Typeit 공식사이트
https://typeitjs.com/
-->
<div id="mystyle"></div>
<!-- 지금 공식사이트의 사용법은 자바스크립트 방식이기 때문에 제이쿼리가 필요 없습니다. -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script src="https://unpkg.com/typeit@8.0.2/dist/index.umd.js"></script>
<script>
new TypeIt("#mystyle", {
strings: ["<b>CodingWorks</b> with Inflearn.", "This class is...", "The best for <em>getting a job.</em>"],
speed: 75,
loop: true, // 반복함
breakLines: false // 줄바꿈 허용 곧, 한줄씩 보이고 사라지고를 반복함
}).go();
</script>
</body>
</html>
0
강의에 있는 Typeit 플러그인은 좀 시간이 지난 것이구요.
좀 전에 공식사이트 들어가 보니까 많이 바뀌어 있더라구요.
그래서 제가 샘플로 만들어 보았으니까 참고하세요.
일단 공식사이트에서 어떻게 사용하는지 옵션은 어떻게 하는 지 먼저 도전해보시는게 어떨까 합니다.
저도 좀 전에 들어가서 제이쿼리 링크하고 Typeit 플러그인 링크하고 사용법 보고 20~30분 정도 시간 걸려서 만든거니까 나무 님도 한번 해보세요~ 혹시 몰라 제가 만든 코드는 답글로 올려 놓을게요.
Typeit 공식사이트 : https://typeitjs.com
감사합니다. 덕분에 많이 배우고 있습니다. ^^