반응형
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>반응형
'웹프로그래밍 기초 > 소스자료' 카테고리의 다른 글
| [ TIP] 폰트로 아이콘 활용하기 fontawesome (0) | 2023.05.18 |
|---|---|
| [참고소스] 레이어팝업 (0) | 2022.05.24 |
| [참고]디자이너 & 개발자 포트폴리오사이트 참고 (0) | 2022.04.05 |
| [실전실습] 동적인 배경화면 적용하기 (0) | 2021.06.15 |
| [참고] SNS 공유 시 설정 메타태그 (0) | 2019.12.05 |
댓글