I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) typed.js로 글 쓰고 지우는 효과 내기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 7. 7. 16:01

반응형

[즐거'웅'코드] 목차

  1. 리소스
  2. 예제 소스
  3. 구현 예시
리소스
리소스.zip
3.8 kB
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/js/typed.js"></script>
 
<style>
    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
 
    .typed-cursor {
        opacity: 0;
        display: none;
    }
 
    .typed::after {
        position: relative;
        top: -4px;
        content: '|';
        display: inline-block;
        animation: blink 0.7s infinite;
    }
</style>
 
<h1>나는 <span class="typed"></span></h1>
 
<script>
    $(".typed").typed({
        strings: ["개발자입니다.", "블로거입니다.", "유튜버입니다.", "작가입니다."],
        typeSpeed: 100,
        loop: true,
    });
</script>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) odometer.js로 카운트 증가시키기  (0) 2021.07.09
(즐거웅코드) counterup.js로 카운트 증가시키기  (0) 2021.07.09
(즐거웅코드) xeicon 아이콘 사용하기  (0) 2021.07.06
(즐거웅코드) 제이쿼리 window resize 이벤트 한 번만 실행시키기  (0) 2021.07.05
(즐거웅코드) 자바스크립트 window resize 이벤트 한 번만 실행시키기  (0) 2021.07.04

관련글

댓글 0

티스토리툴바