728x90
반응형
SMALL
지난시간에 이어 이번에도 글자타이핑효과에 대해서 글을 써볼껀데요~ㅋㅋ
이번엔 쫌 긴 소스,, 즉 p태그, span태그 등의 css의 기본적인 태그들로 자동글자효과를 내는 것에 대해서
알아보겠습니다.
자 기본적인 php나 html5폼태그를 사용해서 폼을 구성한 후 css&javscript를 덫붙혀서 아웃트라인을 잡아주면 되는데요.
기본적인 소스들을 적어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/hiphop5782/js@0.0.6/typing/hakademy-typing.css">
<style>
</style>
<script src="https://cdn.jsdelivr.net/gh/hiphop5782/js@0.0.6/typing/hakademy-typing.js"></script>
<Script Language="JavaScript">
<!--//
//타이핑 기법
window.addEventListener("load", function(){
var tag = document.querySelector(".typing-txt");
var app = new Hakademy.util.typing(tag, {
text:[
"실시간 생중계 시스템 관리",
"컨퍼런스 기획",
"무대조명 설치",
"해외연사 섭외",
"무대 디자인",
"웹사이트 템플릿",
"음향효과 대박"
],
color:{
apply:true
}
});
});
//-->
</Script>
<style type="text/css">
.wrapper{
width: 500px;
height: 70px;
background-color: gray;
}
</style>
</head>
<body>
<h1>TypingTest입니다.</h1>
<div class="wrapper">
<center><p class="typing-txt" style="font-size:30px;"></p></center>
</div>
</body>
</html>
자 이렇게하면 기본적인 흰색배경과 div class의 회색배경에 p태그에 들어간 텍스트글자가 자동으로 써지게
될 것입니다.
결과는 동영상으로 확인해보시고요~
이 정도는 만들어야 크몽이나 일반적인 웹사이트에 만들어진 것과 같은 유사한 효과를 낼 수 있습니다.
여기서 더더욱 간단하게 만들순 없을 것 같네요~
아니면 php나 파이썬을 이용한 코딩이 필요할 것 같네요~^^
- 참고 링크
글자타이핑소스링크 - http://www.sysout.co.kr/home/webbook/page/read/947;jsessionid=554B89E994CCB44ABB44C994EFF96EF6
728x90
반응형
LIST
'IT 관련,, > Java관련 언어들' 카테고리의 다른 글
| [웹/eGovFrame]eGov를 사용한 휴대폰 coolsms API 토큰인증-2!! (2) | 2021.01.24 |
|---|---|
| [웹/eGovFrame]eGov를 사용한 휴대폰 coolsms API 토큰인증-1!! (0) | 2021.01.24 |
| [웹/eGovFrame]전자정프프레임워크 처음 설정 경로 바꾸기!! (0) | 2020.12.05 |
| [JSP/Servlet]서블릿을 이용한 mvc2패턴을 알아보자~!! (0) | 2020.09.27 |
| [웹/JSP]jsp jstl에 대해서 알아보장~!! (0) | 2020.09.13 |