๐Ÿ““ Scroll Animation - svg

nanaยท2023๋…„ 2์›” 12์ผ
1
post-thumbnail

๐Ÿ““ Scroll Animation

  • ์Šคํฌ๋กค์— ๋”ฐ๋ผ์„œ svg path ๊ทธ๋ฆฌ๊ธฐ
    ( with. stroke-dasharray & stroke-dashoffset)

stroke-dasharray

์„ ์„ ๋Œ€์‰ฌ ํ˜•ํƒœ๋กœ ๋งŒ๋“ค๊ธฐ (๊ฐ’์„ ๋ถ€์—ฌํ•œ ๋งŒํผ ๋Œ€์‰ฌ๊ธธ์ด๊ฐ€ ๋Š˜์–ด๋‚จ)

stroke-dasharray: (ํ™€์ˆ˜๋ฒˆ์งธ ์ธ์ž) (์ง์ˆ˜๋ฒˆ์งธ ์ธ์ž) ... โ†’ ํ™€์ˆ˜ : ๋Œ€์‰ฌ์˜ ๊ธธ์ด | ์ง์ˆ˜ : ๊ณต๋ฐฑ์˜ ๊ธธ์ด

๐Ÿ“ ํ•˜๋‚˜์˜ ์ธ์ž๋งŒ ์ฃผ์–ด์ง€๋ฉด, dasharray๊ฐ€ path์™€ ๊ฐ™์œผ๋ฉด svg๊ฐ€ ๋ชจ๋‘ ๋ณด์ธ๋‹ค
๐Ÿ“ path์˜ ์ด ๊ธธ์ด ๊ตฌํ•˜๋Š” JS ํ•จ์ˆ˜ โ†’ path.getTotalLength( ) = 1000

ex) ๊ธธ์ด๊ฐ€ 1000์ธ path ์š”์†Œ๊ฐ€ ์žˆ์„ ๋•Œ stroke-dasharray : 100 100 ์ด๋ฉด,
๋Œ€์‰ฌ์˜ ๊ธธ์ด 100๊ณผ ๊ณต๋ฐฑ์˜ ๊ธธ์ด 100์ด 1000์ด ๋ ๋•Œ๊นŒ์ง€ ๋ฐ˜๋ณต

stroke-dashoffset

์–ด๋””์„œ๋ถ€ํ„ฐ ๊ทธ๋ฆด์ง€ svg ๋‚˜ํƒ€๋‚ผ ์ง€์  ์ •ํ•˜๊ธฐ

stroke-dashoffset: 1000 ์ด๋ฉด, ์„  ์•ˆ๋ณด์ž„
stroke-dashoffset: 0 ์ด๋ฉด, ์„  ๋‹ค๋ณด์ž„

๐Ÿ“ ์Šคํฌ๋กค์— ๋”ฐ๋ผ์„œ ztroke-dashoffset์˜ 1000 ~ 0 ์‚ฌ์ด๋กœ ๊ธธ์ด ๋ณ€๊ฒฝ

ex) dasharray: 950์ผ ๋•Œ์— ์„œ๋กœ ๋‹ค๋ฅธ dashoffset์„ ์ค€ ์˜ˆ์‹œ

ratio (%)

๋น„์œจ ratio ๊ตฌํ•˜๊ธฐ

  • ratio 0

  • ratio 1


โœจ codepen


โœฆ ์ถœ์ฒ˜ : rudtjd2548/yummy-coding

profile
โœง ์ค‘์š”ํ•œ๊ฑด ๊บพ์ด์ง€ ์•Š๋Š” ๋งˆ์Œ ๐Ÿ”ฅ แ•™(โ€ขำฉโ€ข)แ•ค ๐Ÿ”ฅ

0๊ฐœ์˜ ๋Œ“๊ธ€