๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’š UIUX ์›นํผ๋ธ”๋ฆฌ์…” ๊ณผ์ •(6๊ฐœ์›”)

2021-08-19 (129์ผ์ฐจ) stagger ํ™œ์šฉ, ํ…์ŠคํŠธํšจ๊ณผ

by widely design 2021. 8. 21.

GSAP๊ณผ ์Šคํฌ๋กคํŠธ๋ฆฌ๊ฑฐ 26~28๊ฐ• (stagger ํ™œ์šฉ)

 

 

 

- ํ•œ ๊ธ€์ž์”ฉ ์ฐจ๋ก€๋Œ€๋กœ ์˜ฌ๋ผ์˜ค๋Š” ํ…์ŠคํŠธํšจ๊ณผ

  : ํ…์ŠคํŠธ๋ฅผ spanํƒœ๊ทธ ๋‘ ๊ฐœ๋กœ ๊ฐ์‹ธ๊ธฐ

  : timeline() ์‚ฌ์šฉํ•˜๊ธฐ

See the Pen by minicoding (@minicoding) on CodePen.


- ํ•œ ๊ธ€์ž์”ฉ ์ณ์ง€๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜

  : css anmation ์‚ฌ์šฉ

See the Pen by minicoding (@minicoding) on CodePen.


- ์ปค์„œ๊ฐ€ ์ž…๋ ฅ๋˜๋Š” ํ…์ŠคํŠธ ๋”ฐ๋ผ๋‹ค๋‹ˆ๊ฒŒ ๋งŒ๋“ค๊ธฐ

See the Pen by minicoding (@minicoding) on CodePen.

๋Œ“๊ธ€