참고 🤍
https://www.youtube.com/watch?v=wbDpZwDRgRk&list=LL&index=1
https://github.com/dream-ellie/javascript_animation
GitHub - dream-ellie/javascript_animation
Contribute to dream-ellie/javascript_animation development by creating an account on GitHub.
github.com
1) Typelt
(1) Typelt > Documentation > Vanilla JavaScript
(2) Quick Links > Vanilla JavaScript
(3) Installation > CDN or npm / yarn
TypeIt
The most versatile JavaScript typewriter effect library on the planet.
www.typeitjs.com
<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
<style>
/* 커서 스타일링 */
:root {
--ti-cursor-color: red;
}
#title {
font-size: 70px;
font-weight: lighter;
}
</style>
</head>
<body>
<span id="title">Animation 연습중</span>
<script>
// 페이지 로드가 다 되었을 때
document.addEventListener('DOMContentLoaded', () => {
// TypeIt 오브젝트
new TypeIt('#title')
.pause(1000) // 1초 쉬었다가
.delete(4, { delay: 1000 }) // 4개의 문자 지움
.type(' 아자아자') // 다시 타이핑 하기
.type('<em><strong class="font-semibold">_곰효뇽</strong></em>', {
speed: 100,
})
.move(-2, { delay: 150 }) // 커서 왼쪽으로 두번 이동
.delete(6, { delay: 1000 })
.move(null, { to: "END" }) // 커서 끝으로 이동
.delete(2, { delay: 1000 })
.type('권효영')
.move(null, { to: "END" }) // 커서 끝으로 다시 이동
.pause(200)
.break({ delay: 500 })
.break({ delay: 500 })
.type('감사')
.move(-2, { delay: 150 })
.type('ㅎㅎ')
.move(null, { to: "END" })
.go(); // 시작
});
</script>
</body>
</html>
2) ScrollOut
(1) Get Scrolling → 클릭
(2) Installation > CDN or npm
** Demos 들어가면 더 다양하게 있음
ScrollOut
Effects and CSS Vars on Scroll!
scroll-out.github.io
<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./scrollOut.css">
<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
</head>
<body>
<div class="site-wrap">
<section data-scroll>
<h1 class="title">Scroll on down</h1>
<p>
Consectetur adipisicing elit. Tempore tempora rerum, est autem
cupiditate, corporis a qui libero ipsum delectus quidem dolor at
nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis
quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores
sunt esse magni, ut, dignissimos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates,
deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta
dolor itaque adipisci, dolorum minima, veritatis earum provident error
molestias. Ratione magni illo sint vel velit ut excepturi consectetur
suscipit, earum modi accusamus voluptatem nostrum, praesentium
numquam, reiciendis voluptas sit id quisquam. Consequatur in quis
reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit
iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum
quibusdam fugit perferendis et optio recusandae sed ratione. Culpa,
dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus
maiores illum quas quos et aperiam aut doloremque optio maxime fugiat
doloribus. Eum dolorum expedita quam, nesciunt
</p>
<p>
Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem
dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis
blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.
</p>
<p>Adipisicing elit. Tempore tempora rerum.</p>
</section>
<section data-scroll>
<h1 class="title">Articles fading in</h1>
<p>
Consectetur adipisicing elit. Tempore tempora rerum, est autem
cupiditate, corporis a qui libero ipsum delectus quidem dolor at
nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis
quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores
sunt esse magni, ut, dignissimos.
</p>
<p>
Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem
dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis
blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
tempora rerum, est autem cupiditate, corporis a qui libero ipsum
delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
dignissimos.
</p>
<p>
Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem
dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis
blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariatur fugit quibusdam dolores.
</p>
</section>
<section data-scroll>
<h1 class="title">Character splitting</h1>
<p>
Consectetur adipisicing elit. Tempore tempora rerum, est autem
cupiditate, corporis a qui libero ipsum delectus quidem dolor at
nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis
quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores
sunt esse magni, ut, dignissimos.
</p>
<p>
Lorem ipsum tempora in cupiditate, corporis a qui libero ipsum
delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
dignissimos. Adipisci veniam in reiciendis aut asperiores omnis
blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariaturlores sunt esse magni. Tempore tempora rerum, est autem
cupiditate, corporis a qui libero.
</p>
</section>
<section data-scroll>
<h1 class="title">Colors changing</h1>
<p>
Consectetur adipisicing elit. Tempore tempora rerum, est autem
cupiditate, corporis a qui libero ipsum delectus quidem dolor at
nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis
quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores
sunt esse magni, ut, dignissimos.
</p>
<p>
Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem
dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis
blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates,
deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta
dolor itaque adipisci, dolorum minima, veritatis earum provident error
molestias. Ratione magni illo sint vel velit ut excepturi consectetur
suscipit, earum modi accusamus voluptatem nostrum, praesentium
numquam, reiciendis voluptas sit id quisquam. Consequatur in quis
reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit
iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum
quibusdam fugit perferendis et optio recusandae sed ratione. Culpa,
dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus
maiores illum quas quos et aperiam aut doloremque optio maxime fugiat
doloribus. Eum dolorum expedita quam, nesciunt
</p>
<p>Adipisicing elit. Tempore tempora rerum.</p>
</section>
<section data-scroll>
<h1 class="title">The end</h1>
<p>
Consectetur adipisicing elit. Tempore tempora rerum, est autem
cupiditate, corporis a qui libero ipsum delectus quidem dolor at
nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis
quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores
sunt esse magni, ut, dignissimos.
</p>
<p>Adipisicing elit. Tempore tempora rerum.</p>
<p>
Lorem ipsum cupiditate, corporis a qui libero ipsum tempora in
delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
aspernatur pariatur fugit quibusdam tempora in dolores sunt esse
magni, ut, dignissimos.
</p>
</section>
</div>
<script>
// 스크롤할 때 집입 요소가 투명에서 불투명으로
ScrollOut({
// once : true, // 한 번만
onShown: (element) => {
// TypeIt 사용
new TypeIt(element.querySelector('.title'), {
startDelay: 500,
cursor: false,
})
.pause(2000)
.go();
},
})
</script>
</body>
</html>style.css
html,
body {
margin: 0;
}
html {
min-height: 100%;
box-sizing: border-box;
font-size: 10px;
}
body {
height: 100%;
width: 100%;
background-image: linear-gradient(
180deg,
#5961f9 0%,
#2afadf 40%,
#f9fea5 100%
);
background-repeat: no-repeat;
z-index: 1;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
h1,
p {
color: #204754;
font-family: 'Nunito', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
margin-bottom: 1rem;
font-size: 4rem;
}
p {
font-size: 2rem;
line-height: 2.8rem;
}
p:last-child {
margin-bottom: -6px;
}
.site-wrap {
max-width: 700px;
margin: 0 auto;
padding: 10rem 2rem;
}
section {
margin-bottom: 10rem;
padding: 4rem;
background: white;
border-radius: 8px;
box-shadow: 0px 0px 0 1px transparentize(#204754, 0.97),
0px 0px 0 3px transparentize(#204754, 0.98);
}
section:last-child {
margin-bottom: 0;
}
[data-scroll] {
opacity: 0;
will-change: transform, scale, opacity;
transform: translateY(6rem) scale(0.93);
transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll='in'] {
opacity: 1;
transform: translateY(0) scale(1);
}
[data-scroll='out'] {
opacity: 0;
}
3) Anime.js
** Getting started / 예제가 많음
anime.js
Javascript animation engine
animejs.com
https://github.com/dream-ellie/javascript_animation
GitHub - dream-ellie/javascript_animation
Contribute to dream-ellie/javascript_animation development by creating an account on GitHub.
github.com
4) Rellax
** 요소마다 각각 다른 속도로 스크롤링
https://dixonandmoe.com/rellax/
Vanilla Javascript Parallax Library — Rellax
Add a lightweight vanilla javascript parallax library to your website for subtle animations. Works with HTML, Wordpress, Shopify and more!
dixonandmoe.com
https://codepen.io/search/pens?q=rellax // 예제 많음
CodePen Search
codepen.io
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<title>Document</title>
<style>
html,
body {
height: 300vh;
color: #fff;
}
body {
background: url('./background.png');
}
.content {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
margin: 0;
max-width: 100%;
width: 100vw;
}
div {
background: #333;
font-size: 30px;
font-weight: bold;
height: 200px;
line-height: 200px;
margin: 1em;
text-align: center;
width: 300px;
}
.one {
background-color: #ec368d;
}
.two {
background-color: #333;
}
.three {
background-color: #440381;
}
.image {
z-index: -1;
position: absolute;
bottom: 20px;
left: 0px;
}
</style>
</head>
<body>
<!-- 각 요소에 class 추가 / 개별적으로 원하는 속도 지정 -->
<article class="content">
<div class="one rellax" data-rellax-speed="4">Faster</div>
<div class="two">No parallax</div>
<div class="three rellax" data-rellax-speed="-8">Slower</div>
<img class="image rellax" data-rellax-speed="10" src="./gallaxy.png" />
</article>
<script>
new Rellax('.rellax');
</script>
</body>
</html>
5) GreenSock
(1) Docs
** 원하는 플러그인, 개별적으로 설치
** 할 수 있는게 엄청 많음
GreenSock
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
greensock.com
https://greensock.com/docs/v3/Plugins/Flip
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/Flip.min.js"></script>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/Flip.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container final">
<div class="letter F">F</div>
<div class="letter l">l</div>
<div class="letter i">i</div>
<div class="letter p">p</div>
<div class="for">for</div>
<div class="gsap">GSAP</div>
</div>
<script>
gsap.registerPlugin(Flip);
const layouts = ['final', 'plain', 'columns', 'grid'];
const container = document.querySelector('.container');
let curLayout = 0;
function nextState() {
const state = Flip.getState('.letter, .for, .gsap', {
props: 'color,backgroundColor',
simple: true,
});
container.classList.remove(layouts[curLayout]);
curLayout = (curLayout + 1) % layouts.length;
container.classList.add(layouts[curLayout]);
Flip.from(state, {
absolute: true,
stagger: 0.07,
duration: 0.7,
ease: 'power2.inOut',
spin: curLayout === 0,
simple: true,
onEnter: (elements, animation) =>
gsap.fromTo(
elements,
{ opacity: 0 },
{ opacity: 1, delay: animation.duration() - 0.1 }
),
onLeave: (elements) => gsap.to(elements, { opacity: 0 }),
});
gsap.delayedCall(curLayout === 0 ? 3.5 : 1.5, nextState);
}
gsap.delayedCall(1, nextState);
</script>
</body>
</html>style.css
* {
box-sizing: border-box;
}
body {
background: black;
padding: 0;
margin: 0;
font-family: 'Signika Negative', sans-serif, Arial;
font-weight: 300;
height: 100vh;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container.grid,
.container.columns {
align-content: stretch;
align-items: stretch;
flex-wrap: wrap;
}
.letter {
text-align: center;
color: black;
font-size: 10vmax;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
padding: 2px 6px;
}
.container.grid .letter {
flex-basis: 50%;
}
.container.columns .letter {
flex-basis: 25%;
}
.for,
.gsap {
font-size: 5vmax;
color: white;
}
.for {
padding: 2px 1.6vmax;
font-weight: 300;
display: none;
}
.gsap {
padding: 2px 0;
font-weight: 600;
display: none;
}
.container.final .for,
.container.final .gsap {
display: block;
}
.F {
background: rgba(0, 188, 212, 0.7);
}
.l {
background: rgba(40, 150, 255, 0.7);
}
.i {
background: rgba(153, 80, 220, 0.7);
}
.p {
background: rgba(90, 108, 225, 0.7);
}
.container.plain .letter {
background: transparent;
color: white;
padding: 0;
}
.logo {
position: fixed;
width: 60px;
bottom: 20px;
right: 30px;
}
https://www.youtube.com/watch?v=wbDpZwDRgRk&list=LL&index=1
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스크롤에 따라 svg path 그리는 방법 (0) | 2023.04.14 |
|---|---|
| [jQuery] 기초, 입문자 2 (0) | 2023.04.14 |
| [jQuery] 기초, 입문자 1 (0) | 2023.04.12 |
| [JavaScript] Drag&Drop, mouse wheel (0) | 2023.04.05 |
| [JavaScript] 구조분해할당 (0) | 2023.03.14 |
