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

2021-06-24 (73์ผ์ฐจ) scrollTrigger, filter: invert css์ƒ‰์ƒ๋ฐ˜์ „

by widely design 2021. 6. 25.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 79๊ฐ•

GSAP์™€ ์Šคํฌ๋กคํŠธ๋ฆฌ๊ฑฐ 6๊ฐ•

 

 

- ํƒญ๋ฉ”๋‰ด ๋‚ด์ผ ์ด์–ด์„œ

 

- scrollTrigger

  : ๊ฐ€๋ฆฌํ‚ค๋Š” ์ƒ์ด ์Šคํฌ๋กค์„ ๋‚ด๋ ค์„œ ๋ฐœ๊ฒฌ๋˜๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹คํ–‰๋˜๊ฒŒ ๋ช…๋ น

 

 

css

- filter: invert(100%);

  : ์ด๋ฏธ์ง€์™€ ์ƒ‰์ƒ์„ ์ƒ‰์ƒ๋ฐ˜์ „ ์‹œ์ผœ์ฃผ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค!!

 

 

 

- html ์•„์ด์ฝ˜ ๋ฌด๋ฃŒ์‚ฌ์ดํŠธ

https://boxicons.com/

๋Œ“๊ธ€