웹프로그래밍 기초/소스자료
글자 타이핑효과 Jquery
이데렐라
2019. 11. 21. 12:10
반응형
https://safi.me.uk/typewriterjs/
Typewriter JS - A simple yet powerful native javascript plugin for a cool typewriter effect.
safi.me.uk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Test page</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<style>
html, body{
width:100%;
height:100%;
margin:0;
}
#main{
background-color:black;
height:100%;
color: #fff;
font-size: 50px;
text-align:center;
}
section{
height:100%;
}
i{font-size:300px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://unpkg.com/typewriter-effect@2.3.1/dist/core.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var text = document.getElementById("textType");
var typewriter = new Typewriter(text, {
loop: true
});
typewriter.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.typeString('목요일수업은 즐겁다')
.pauseFor(2500)
.deleteChars(7)
.typeString('<strong>altered!</strong>')
.pauseFor(2500)
.start();
});
</script>
</head>
<body>
<section id="main">main
<div id="textType"></div>
</section>
<section id="about">about
<i class="fas fa-angle-up"></i>
<i class="fas fa-horse-head"></i>
<i class="fas fa-bell"></i>
<i class="fas fa-camera-retro"></i>
</section>
<section id="project">project
</section>
<section id="contact">Contact
</section>
<footer>
만든이
</footer>
</body>
</html>반응형