[★] 플러그인
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
1. TextPlugin 정의 - 타이핑 효과1
[Html]
더보기
<div class="wrapper">
<h1>GreenSock's TextPlugin<span></span></h1>
<h2>Set or animate text in sequence. Reversible too!</h2>
<div class="box green"></div>
</div>
[Css]
더보기
<style>
* { margin: 0; padding: 0; }
body { background-color:#1d1d1d; font-family: "Signika Negative", sans-serif; color: #999; margin: 0; font-size: 18px;}
h1, h2 { font-family: "Signika Negative", sans-serif; margin: 10px 0 10px 0; color: #f3f2ef; font-weight: 400;}
h1 { font-size:42px;}
h2 {font-size:24px;}
.box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block; line-height:50px; text-align:center; color:#333;}
.green{ background-color:#6fb936;}
.brandBar { position:absolute; width:100%; height:40px; z-index:1000; line-height:40px; color:#ccc; padding-left:0px;}
.brandBar img{ position:absolute; width:90px; right:20px; top:12px;}
.wrapper { position:absolute; padding:20px;}
.box { width:300px; }
h1 span { color:#6fb936; }
</style>
[Script]
더보기
<script>
gsap.registerPlugin(TextPlugin)
$(function(){
gsap.defaults({ease: "none"});
const tl = gsap.timeline({repeat:3, repeatDelay:1, yoyo:true});
tl.to("h1 span", {duration: 4, text:" is so much fun you should try it some time!"})
.to(".green", {x:100})
.set(".green", {text:"I am done"})
})
</script>
2. TextPlugin 정의 - 타이핑 효과2
[Html]
더보기
<h1 id="myText"></h1>
[Css]
더보기
<style>
* { margin: 0; padding: 0; }
h2 {font-size:24px;}
.box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block; line-height:50px; text-align:center; color:#333;}
.green{ background-color:#6fb936;}
.brandBar { position:absolute; width:100%; height:40px; z-index:1000; line-height:40px; color:#ccc; padding-left:0px;}
.brandBar img{ position:absolute; width:90px; right:20px; top:12px;}
.wrapper { position:absolute; padding:20px;}
.box { width:300px; }
h1 span { color:#6fb936; }
</style>
[Script]
더보기
<script>
gsap.registerPlugin(TextPlugin)
$(function(){
const result = 'GSAP 타이핑 효과입니다.';
gsap.to("#myText", {duration: 3, text: result, delay: 1});
})
</script>
:) 참고링크
티스토리 참고링크
'FRONT > GSAP' 카테고리의 다른 글
[GSAP] ScrollSmooth 효과 (0) | 2024.03.23 |
---|---|
[GSAP] ScrollTrigger 숫자 카운팅 (0) | 2024.03.23 |
[GSAP] ScrollTrigger 중급(실전2) (1) | 2024.03.23 |
[GSAP] ScrollTrigger 중급(실전1) (0) | 2024.03.22 |
[GSAP] ScrollTrigger 기초문법 (0) | 2024.03.22 |