CSS๋ง์ผ๋ก ์ ๋ฐํ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๋ง๋ค ์ ์๋ ํ์ ์ ์ธ ๊ธฐ๋ฅ, CSS Animation Range๋ฅผ ์ฌ์ธต์ ์ผ๋ก ์์๋ณด์ธ์. ์์ฑ, ์ค์ ์ ์ฉ ์ฌ๋ก, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๋งค๋ ฅ์ ์ธ ์น ๊ฒฝํ ๊ตฌ์ถ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํด๋ณด์ธ์.
CSS Animation Range ๋ง์คํฐํ๊ธฐ: ์ ๋ฐํ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๊ฒฝ๊ณ ์ค์
๋์์์ด ๋ณํํ๋ ์น ๊ฐ๋ฐ์ ์ธ๊ณ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ํธ์์ฉ์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ์ธํฐํ์ด์ค๋ ๋ ์ด์ ์ฌ์น๊ฐ ์๋๋ผ ํ์ ์กฐ๊ฑด์ด ๋์์ต๋๋ค. ์๋ ๋์ ์ฌ์ฉ์์ ์คํฌ๋กค ๋์์ ๋์ ์ผ๋ก ๋ฐ์ํ๋ ์ ๊ตํ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ํ๋ ค๋ฉด ๋ณต์กํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กดํด์ผ ํ์ต๋๋ค. ์ด๋ฌํ ์๋ฃจ์ ์ ๊ฐ๋ ฅํ์ง๋ง, ๋๋ก๋ ์ฑ๋ฅ ์ ํ๋ฅผ ์ ๋ฐํ๊ณ ๊ฐ๋ฐ ๋ณต์ก์ฑ์ ๋์์ต๋๋ค.
CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๋ชจ๋์ ํ๊ธฐ์ ์ผ๋ก ์ถ๊ฐ๋ CSS Animation Range๋ฅผ ์๊ฐํฉ๋๋ค. ์ด ํ์ ์ ์ธ ๊ธฐ๋ฅ์ ๊ฐ๋ฐ์๊ฐ ์ฃผ์ด์ง ์คํฌ๋กค ํ์๋ผ์ธ์์ ์ ๋๋ฉ์ด์ ์ด ์ธ์ ์์ํ๊ณ ๋๋์ผ ํ๋์ง์ ๋ํ ์ ๋ฐํ ๊ฒฝ๊ณ๋ฅผ CSS ๋ด์์ ์ง์ ์ ์ํ ์ ์๋๋ก ํด์ค๋๋ค. ์ด๋ ์น ๋์์ธ์ ์๋๊ฐ์ ๋ถ์ด๋ฃ๋ ์ ์ธ์ ์ด๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋๋ฉฐ ์ฐ์ํ ๋ฐฉ๋ฒ์ผ๋ก, ์ด์ ์๋ ์์ CSS๋ง์ผ๋ก๋ ๋ฒ๊ฑฐ๋กญ๊ฑฐ๋ ๋ถ๊ฐ๋ฅํ๋ ์คํฌ๋กค ํจ๊ณผ์ ๋ํ ์ธ๋ฐํ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋์์๋ CSS Animation Range์ ๋ณต์กํ ๋ถ๋ถ์ ๊น์ด ํ๊ณ ๋ค ๊ฒ์ ๋๋ค. ํต์ฌ ๊ฐ๋ ์ ํ๊ตฌํ๊ณ , ์์ฑ์ ๋ถ์ํ๋ฉฐ, ์ค์ ์ ์ฉ ์ฌ๋ก๋ฅผ ์์ฐํ๊ณ , ๊ณ ๊ธ ๊ธฐ์ ์ ๋ ผ์ํ๋ฉฐ, ๊ธ๋ก๋ฒ ์น ํ๋ก์ ํธ์ ์ํํ๊ฒ ํตํฉํ๊ธฐ ์ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ ๊ณตํ ๊ฒ์ ๋๋ค. ์ด ๊ฐ์ด๋๋ฅผ ๋ง์น๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ์ง์ ์ผ๋ก ๋งคํน์ ์ด๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์คํฌ๋กค ๊ธฐ๋ฐ ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ์ด ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ํ์ฉํ ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค.
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ํต์ฌ ๊ฐ๋ ์ดํดํ๊ธฐ
animation-range๋ฅผ ๋ถ์ํ๊ธฐ ์ ์, CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ๋ ๋์ ๋งฅ๋ฝ๊ณผ ๊ทธ๊ฒ์ด ํด๊ฒฐํ๋ ๋ฌธ์ ๋ค์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๋ฐ์ ๊ณผ์
์ญ์ฌ์ ์ผ๋ก ์น์์ ์คํฌ๋กค ์ฐ๋ ํจ๊ณผ๋ฅผ ๊ตฌํํ๋ ค๋ฉด ์๋นํ ์์ JavaScript๊ฐ ํ์ํ์ต๋๋ค. GSAP์ ScrollTrigger, ScrollMagic๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฌ์ง์ด ๋ง์ถคํ Intersection Observer ๊ตฌํ์ ๊ฐ๋ฐ์์๊ฒ ์์ด์๋ ์ ๋ ๋๊ตฌ๊ฐ ๋์์ต๋๋ค. ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์์ฒญ๋ ์ ์ฐ์ฑ์ ์ ๊ณตํ์ง๋ง, ๋ค์๊ณผ ๊ฐ์ ๋จ์ ์ด ์์์ต๋๋ค:
- ์ฑ๋ฅ: JavaScript ๊ธฐ๋ฐ ์๋ฃจ์ , ํนํ ์คํฌ๋กค ์ ์์น๋ฅผ ์์ฃผ ์ฌ๊ณ์ฐํ๋ ์๋ฃจ์ ์ ์ ์ฌ์ ๊ธฐ๊ธฐ๋ ๋ณต์กํ ํ์ด์ง์์ ๋ฒ๋ฒ ์(jank)์ด๋ ๋ถ๋๋ฝ์ง ์์ ์ ๋๋ฉ์ด์ ์ ์ ๋ฐํ ์ ์์์ต๋๋ค.
- ๋ณต์ก์ฑ: ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํฉํ๊ณ ๊ด๋ฆฌํ๋ ๊ฒ์ ์ฝ๋์ ์ถ๊ฐ ๊ณ์ธต์ ๋ํด ํ์ต ๊ณก์ ์ ๋์ด๊ณ ๋ฒ๊ทธ ๋ฐ์ ๊ฐ๋ฅ์ฑ์ ์ฆ๊ฐ์์ผฐ์ต๋๋ค.
- ์ ์ธํ ๋ ๋ช ๋ นํ: JavaScript๋ ์ข ์ข ๋ช ๋ นํ ์ ๊ทผ ๋ฐฉ์("์ด๋ฐ ์ผ์ด ๋ฐ์ํ๋ฉด ์ ๊ฒ์ ํ๋ผ")์ ์๊ตฌํ๋ ๋ฐ๋ฉด, CSS๋ ๋ณธ์ง์ ์ผ๋ก ์ ์ธํ ์คํ์ผ("์ด ์์๋ ์ด๋ฐ ์กฐ๊ฑด ํ์์ ์ด๋ ๊ฒ ๋ณด์ฌ์ผ ํ๋ค")์ ์ ๊ณตํฉ๋๋ค. ์์ CSS ์๋ฃจ์ ์ ํ์์ ๋ ์ ๋ง์ต๋๋ค.
CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๋ฑ์ฅ์ ๋ ์์ํ๊ณ , ์ฑ๋ฅ์ด ๋ฐ์ด๋๋ฉฐ, ์ ์ธ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ผ๋ก์ ์ค์ํ ์ ํ์ ์๋ฏธํฉ๋๋ค. ์ด๋ฌํ ์ ๋๋ฉ์ด์ ์ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ์์ง์ ์์ํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๋ ์ ์ ์ฝ๋๋ก ๋ ๋ถ๋๋ฌ์ด ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ต๋๋ค.
animation-timeline ์๊ฐ
CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ๊ธฐ์ด๋ animation-timeline ์์ฑ์ ์์ต๋๋ค. ๊ณ ์ ๋ ์๊ฐ ๋์ , animation-timeline์ ์ง์ ๋ ์์์ ์คํฌ๋กค ์์น์ ๋ฐ๋ผ ์ ๋๋ฉ์ด์
์ด ์งํ๋๋๋ก ํฉ๋๋ค. ์ด ์์ฑ์ ๋ ๊ฐ์ง ์ฃผ์ ํจ์๋ฅผ ์ฌ์ฉํฉ๋๋ค:
scroll(): ์ด ํจ์๋ ์คํฌ๋กค ์งํ ํ์๋ผ์ธ์ ์์ฑํฉ๋๋ค. ์ด๋ค ์์์ ์คํฌ๋กค ์์น๊ฐ ์ ๋๋ฉ์ด์ ์ ๊ตฌ๋ํ ์ง ์ง์ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด,scroll(root)๋ ๋ฌธ์์ ๋ฉ์ธ ์คํฌ๋กค ์ปจํ ์ด๋๋ฅผ,scroll(self)๋ ์คํฌ๋กค ๊ฐ๋ฅํ ์์ ์์ฒด๋ฅผ ์ฐธ์กฐํฉ๋๋ค. ์ด ํ์๋ผ์ธ์ ์คํฌ๋กค ๊ฐ๋ฅ ์์ญ์ ์์(0%)๋ถํฐ ๋(100%)๊น์ง์ ์งํ๋ฅ ์ ์ถ์ ํฉ๋๋ค.view(): ์ด ํจ์๋ ๋ทฐ ์งํ ํ์๋ผ์ธ์ ์์ฑํฉ๋๋ค. ์ ์ฒด ์คํฌ๋กค ๊ฐ๋ฅ ๋ฒ์๋ฅผ ์ถ์ ํ๋scroll()๊ณผ ๋ฌ๋ฆฌ,view()๋ ์คํฌ๋กค ์ปจํ ์ด๋(์ผ๋ฐ์ ์ผ๋ก ๋ทฐํฌํธ) ๋ด์์ ์์์ ๊ฐ์์ฑ์ ์ถ์ ํฉ๋๋ค. ์ ๋๋ฉ์ด์ ์ ์์๊ฐ ๋ทฐ์ ๋ค์ด์ค๊ณ , ๊ฐ๋ก์ง๋ฅด๊ณ , ๋๊ฐ ๋ ์งํ๋ฉ๋๋ค.axis(block ๋๋ inline)์target(์:cover,contain,entry,exit)๋ ์ง์ ํ ์ ์์ต๋๋ค.
animation-timeline์ ์ ๋๋ฉ์ด์
์ ๋ฌด์์ด ๊ตฌ๋ํ๋์ง๋ฅผ ๊ฒฐ์ ํ์ง๋ง, ๊ทธ ์คํฌ๋กค ๊ธฐ๋ฐ ํ์๋ผ์ธ ๋ด์์ ์ธ์ ์ ๋๋ฉ์ด์
์ด ์ค์ ๋ก ์ฌ์๋์ด์ผ ํ๋์ง๋ ์ง์ ํ์ง ์์ต๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ animation-range๊ฐ ํ์์ ์ด ๋ฉ๋๋ค.
animation-range๋ ๋ฌด์์ธ๊ฐ?
ํต์ฌ์ ์ผ๋ก, animation-range๋ CSS ์ ๋๋ฉ์ด์
์ด ์คํ๋ ์คํฌ๋กค ํ์๋ผ์ธ์ ํน์ ๊ตฌ๊ฐ์ ์ ์ํ ์ ์๊ฒ ํด์ค๋๋ค. ์คํฌ๋กค ํ์๋ผ์ธ์ 0%์์ 100%๊น์ง์ ํธ๋์ด๋ผ๊ณ ์๊ฐํด๋ณด์ธ์. animation-range๊ฐ ์๋ค๋ฉด, ์คํฌ๋กค ํ์๋ผ์ธ์ ์ฐ๊ฒฐ๋ ์ ๋๋ฉ์ด์
์ ์ผ๋ฐ์ ์ผ๋ก ํด๋น ํ์๋ผ์ธ์ ์ ์ฒด 0-100% ๋ฒ์์ ๊ฑธ์ณ ์ฌ์๋ ๊ฒ์
๋๋ค.
ํ์ง๋ง ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ฌ ๋(์๋ฅผ ๋ค์ด, 20% ๋ณด์ผ ๋๋ถํฐ 80% ๋ณด์ผ ๋๊น์ง)๋ง ํ์ด๋์ธ๋๋๋ก ํ๊ณ ์ถ๋ค๋ฉด ์ด๋จ๊น์? ๋๋ ์ฌ์ฉ์๊ฐ ํน์ ์น์ ์ ์คํฌ๋กคํด ์ง๋๊ฐ ๋๋ง ๋ณต์กํ ๋ณํ์ด ๋ฐ์ํ๊ณ , ๋ค์ ์คํฌ๋กคํด ๋์์ฌ ๋ ์ญ์ผ๋ก ์ฌ์๋๋๋ก ํ๊ณ ์ถ๋ค๋ฉด์?
animation-range๋ ๋ฐ๋ก ์ด๋ฐ ์ ๋ฐํ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๊ฒ์ animation-timeline ๋ฐ @keyframes ์ ์์ ํจ๊ป ์๋ํ์ฌ ํจ๊ณผ์ ์ธ๋ฐํ ์กฐ์ ์ ์ ๊ณตํฉ๋๋ค. ๋ณธ์ง์ ์ผ๋ก ์ด๊ฒ์ ์ฃผ์ด์ง ์ ๋๋ฉ์ด์
์ ๋ํ ์คํฌ๋กค ํ์๋ผ์ธ์ ํ์ฑ ๋ถ๋ถ์ ๊ตฌ๋ถํ๋ ํ ์์ ๊ฐ, ์ฆ ์์์ ๊ณผ ๋์ ์
๋๋ค.
์ด๊ฒ์ ์ ํต์ ์ธ ์๊ฐ ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ animation-duration๊ณผ ๋น๊ตํด๋ณด์ธ์. animation-duration์ ์ ๋๋ฉ์ด์
์ด ์ผ๋ง๋ ์ค๋ ๊ฑธ๋ฆฌ๋์ง๋ฅผ ์ค์ ํฉ๋๋ค. ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์์๋, ์ ์๋ animation-range๋ฅผ ํต๊ณผํ๋ ๋ฐ ํ์ํ ์คํฌ๋กค์ ์์ด ์ฌ์ค์ "์ง์ ์๊ฐ"์ ๊ฒฐ์ ํฉ๋๋ค. ์คํฌ๋กค์ด ๋น ๋ฅผ์๋ก ์ ๋๋ฉ์ด์
์ ํด๋น ๋ฒ์ ๋ด์์ ๋ ๋นจ๋ฆฌ ์ฌ์๋ฉ๋๋ค.
animation-range ์์ฑ ์ฌ์ธต ๋ถ์
animation-range ์์ฑ์ animation-range-start์ animation-range-end์ ๋จ์ถ ์์ฑ์
๋๋ค. ๊ฐ๊ฐ์ ์์ฑ๊ณผ ๊ฐ๋ ฅํ ๊ฐ๋ค์ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
animation-range-start์ animation-range-end
์ด ์์ฑ๋ค์ ์ฐ๊ด๋ ์คํฌ๋กค ํ์๋ผ์ธ์์ ์ ๋๋ฉ์ด์
์ ํ์ฑ ๋ฒ์ ์์์ ๊ณผ ๋์ ์ ์ ์ํฉ๋๋ค. ๊ฐ๋ณ์ ์ผ๋ก ์ง์ ํ๊ฑฐ๋ animation-range ๋จ์ถ ์์ฑ์ ์ฌ์ฉํ์ฌ ๊ฒฐํฉํ ์ ์์ต๋๋ค.
animation-range-start: ์คํฌ๋กค ํ์๋ผ์ธ์์ ์ ๋๋ฉ์ด์ ์ด ์์๋์ด์ผ ํ๋ ์ง์ ์ ์ ์ํฉ๋๋ค.animation-range-end: ์คํฌ๋กค ํ์๋ผ์ธ์์ ์ ๋๋ฉ์ด์ ์ด ๋๋์ผ ํ๋ ์ง์ ์ ์ ์ํฉ๋๋ค.
์ด ์์ฑ๋ค์ ์ ๊ณต๋๋ ๊ฐ์ ์ ํ๋ animation-timeline์ ์๋์ ์
๋๋ค. scroll() ํ์๋ผ์ธ์ ๊ฒฝ์ฐ, ์ด๋ ์ผ๋ฐ์ ์ผ๋ก ์ปจํ
์ด๋์ ์คํฌ๋กค ์งํ๋ฅ ์ ๋ํ๋
๋๋ค. view() ํ์๋ผ์ธ์ ๊ฒฝ์ฐ, ๋ทฐํฌํธ์์์ ์์ ์ง์
/์ดํ์ ๋ํ๋
๋๋ค.
๋จ์ถ ์์ฑ animation-range
๋จ์ถ ์์ฑ์ ์ฌ์ฉํ๋ฉด ์์์ ๊ณผ ๋์ ์ ๊ฐ๊ฒฐํ๊ฒ ์ค์ ํ ์ ์์ต๋๋ค:
.element {\n animation-range: [ ];\n}
๊ฐ์ด ํ๋๋ง ์ ๊ณต๋๋ฉด animation-range-start์ animation-range-end๊ฐ ๋ชจ๋ ๋์ผํ ๊ฐ์ผ๋ก ์ค์ ๋์ด, ํด๋น ์ง์ ์์ ์ ๋๋ฉ์ด์
์ด ์ฆ์ ์ฌ์๋จ์ ์๋ฏธํฉ๋๋ค(์ผ๋ฐ์ ์ผ๋ก ์ฐ์์ ์ธ ์ ๋๋ฉ์ด์
์๋ ์ ์ฉํ์ง ์์).
animation-range์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ฐ
์ด ๋ถ๋ถ์์ animation-range์ ์ง๊ฐ๊ฐ ๋๋ฌ๋๋ฉฐ, ํ๋ถํ ํค์๋์ ์ ๋ฐํ ์ธก์ ๊ฐ์ ์ ๊ณตํฉ๋๋ค:
1. ๋ฐฑ๋ถ์จ (์: 20%, 80%)
๋ฐฑ๋ถ์จ์ ์ ๋๋ฉ์ด์
์ ์์์ ๊ณผ ๋์ ์ ์ ์ฒด ์คํฌ๋กค ํ์๋ผ์ธ ๊ธธ์ด์ ๋ฐฑ๋ถ์จ๋ก ์ ์ํฉ๋๋ค. ์ด๊ฒ์ ํนํ scroll() ํ์๋ผ์ธ์ ์ง๊ด์ ์
๋๋ค.
- ์์: ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ์ค๊ฐ ๋ถ๋ถ์ ์คํฌ๋กคํ ๋ ์์๊ฐ ํ์ด๋์ธ๋๋ ์ ๋๋ฉ์ด์ .
.fade-in-middle {\n animation: fadeIn 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 30% 70%; /* ์คํฌ๋กค 30%์์ ์์ํ์ฌ 70%์์ ์ข
๋ฃ */\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}
์ด ์์์ fadeIn ์ ๋๋ฉ์ด์
์ ๋ฃจํธ ์คํฌ๋กค ์ปจํ
์ด๋์ ์คํฌ๋กค ์์น๊ฐ ์ ์ฒด ์คํฌ๋กค ๊ฐ๋ฅ ๋์ด์ 30%์ 70% ์ฌ์ด์ ์์ ๋๋ง ์ฌ์๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ ๋ ๋นจ๋ฆฌ ์คํฌ๋กคํ๋ฉด ์ ๋๋ฉ์ด์
์ ๊ทธ ๋ฒ์ ๋ด์์ ๋ ๋นจ๋ฆฌ ์๋ฃ๋๊ณ , ๋ ๋๋ฆฌ๊ฒ ์คํฌ๋กคํ๋ฉด ๋ ์ ์ง์ ์ผ๋ก ์ฌ์๋ฉ๋๋ค.
2. ๊ธธ์ด (์: 200px, 10em)
๊ธธ์ด๋ ์ ๋๋ฉ์ด์ ์ ์์์ ๊ณผ ๋์ ์ ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ฐ๋ผ ์ ๋์ ์ธ ๊ฑฐ๋ฆฌ๋ก ์ ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ํ์ด์ง ์คํฌ๋กค์๋ ๋ ์ฌ์ฉ๋์ง๋ง, ํน์ ์์ ์์น์ ์ฐ๊ฒฐ๋ ์ ๋๋ฉ์ด์ ์ด๋ ๊ณ ์ ํฌ๊ธฐ์ ์คํฌ๋กค ์ปจํ ์ด๋๋ฅผ ๋ค๋ฃฐ ๋ ์ ์ฉํ ์ ์์ต๋๋ค.
- ์์: ๊ฐ๋ก๋ก ์คํฌ๋กค๋๋ ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ์์ ์ฒ์ 500px ์คํฌ๋กค ๋์ ์ฌ์๋๋ ์ ๋๋ฉ์ด์ .
.gallery-caption {\n animation: slideCaption 1s linear forwards;\n animation-timeline: scroll(self horizontal);\n animation-range: 0px 500px;\n}\n\n@keyframes slideCaption {\n from { transform: translateX(100px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n}
3. view() ํ์๋ผ์ธ์ฉ ํค์๋
์ด ํค์๋๋ค์ view() ํ์๋ผ์ธ๊ณผ ํจ๊ป ์ฌ์ฉํ ๋ ํนํ ๊ฐ๋ ฅํ๋ฉฐ, ์์๊ฐ ๋ทฐํฌํธ๋ ์คํฌ๋กค ์ปจํ
์ด๋์ ๋ค์ด์ค๊ฑฐ๋ ๋๊ฐ ๋ ์ ๋๋ฉ์ด์
์ ๋์์ ์ ๋ฐํ๊ฒ ์ ์ดํ ์ ์๊ฒ ํด์ค๋๋ค.
entry: ์์์ ์คํฌ๋กค ํฌํธ ๊ฒฝ๊ณ๊ฐ ํฌํจํ๋ ๋ธ๋ก์entry์ง์ ์ ํต๊ณผํ ๋ ์ ๋๋ฉ์ด์ ๋ฒ์๊ฐ ์์๋ฉ๋๋ค. ์ด๋ ๋ณดํต ์์์ ์ฒซ ๋ฒ์งธ ๊ฐ์ฅ์๋ฆฌ๊ฐ ๋ทฐํฌํธ์ ๋ํ๋๊ธฐ ์์ํ ๋๋ฅผ ์๋ฏธํฉ๋๋ค.exit: ์์์ ์คํฌ๋กค ํฌํธ ๊ฒฝ๊ณ๊ฐ ํฌํจํ๋ ๋ธ๋ก์exit์ง์ ์ ํต๊ณผํ ๋ ์ ๋๋ฉ์ด์ ๋ฒ์๊ฐ ๋๋ฉ๋๋ค. ์ด๋ ๋ณดํต ์์์ ๋ง์ง๋ง ๊ฐ์ฅ์๋ฆฌ๊ฐ ๋ทฐํฌํธ์์ ์ฌ๋ผ์ง ๋๋ฅผ ์๋ฏธํฉ๋๋ค.cover: ์์๊ฐ ์คํฌ๋กค ์ปจํ ์ด๋๋ ๋ทฐํฌํธ๋ฅผ *๋ฎ๋* ์ ์ฒด ๊ธฐ๊ฐ ๋์ ์ ๋๋ฉ์ด์ ์ด ์ฌ์๋ฉ๋๋ค. ์์์ ์์ชฝ ๊ฐ์ฅ์๋ฆฌ๊ฐ ์คํฌ๋กค ํฌํธ์ ๋ค์ด์ฌ ๋ ์์ํ์ฌ ๋ค์ชฝ ๊ฐ์ฅ์๋ฆฌ๊ฐ ๋๊ฐ ๋ ๋๋ฉ๋๋ค. ์ด๋ ์ข ์ข ์์๊ฐ ๋ทฐ์ ์์ ๋์ ์ ๋๋ฉ์ด์ ์ ๋ํ ๊ธฐ๋ณธ์ ์ด๊ฑฐ๋ ๊ฐ์ฅ ์ง๊ด์ ์ธ ๋์์ ๋๋ค.contain: ์์๊ฐ ์คํฌ๋กค ์ปจํ ์ด๋/๋ทฐํฌํธ ๋ด์ *์์ ํ ํฌํจ*๋์ด ์๋ ๋์ ์ ๋๋ฉ์ด์ ์ด ์ฌ์๋ฉ๋๋ค. ์์๊ฐ ์์ ํ ๋ณด์ผ ๋ ์์ํ์ฌ ์ผ๋ถ๋ผ๋ ๋๊ฐ๊ธฐ ์์ํ๋ฉด ๋๋ฉ๋๋ค.start:entry์ ์ ์ฌํ์ง๋ง, ํนํ ์์์ ๋ํ ์คํฌ๋กค ํฌํธ์ ์์ ๊ฐ์ฅ์๋ฆฌ๋ฅผ ์ฐธ์กฐํฉ๋๋ค.end:exit์ ์ ์ฌํ์ง๋ง, ํนํ ์์์ ๋ํ ์คํฌ๋กค ํฌํธ์ ๋ ๊ฐ์ฅ์๋ฆฌ๋ฅผ ์ฐธ์กฐํฉ๋๋ค.
์ด ํค์๋๋ค์ ๊ธธ์ด ๋๋ ๋ฐฑ๋ถ์จ ์คํ์
๊ณผ ๊ฒฐํฉํ์ฌ ํจ์ฌ ๋ ์ธ๋ฐํ ์ ์ด๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, entry 20%๋ ์์๊ฐ ๋ทฐํฌํธ์ 20% ๋ค์ด์์ ๋ ์ ๋๋ฉ์ด์
์ด ์์๋จ์ ์๋ฏธํฉ๋๋ค.
- ์์: ํ์ด๋ก ์น์ ์ "๋ฎ์ ๋" ์์์ด ๋ณํ๋ ์คํฐํค ๋ค๋น๊ฒ์ด์ ๋ฐ.
.hero-section {\n height: 500px;\n /* ... ๊ธฐํ ์คํ์ผ ... */\n}\n\n.sticky-nav {\n position: sticky;\n top: 0;\n animation: navColorChange 1s linear forwards;\n animation-timeline: view(); /* ์คํฌ๋กค ํฌํธ ๋ด ์์ ์ ๋ทฐ์ ์๋์ */\n animation-range: cover;\n}\n\n@keyframes navColorChange {\n 0% { background-color: transparent; color: white; }\n 100% { background-color: #333; color: gold; }\n}
์ด ์๋๋ฆฌ์ค์์, .sticky-nav ์์(๋๋ ๊ทธ๊ฒ์ด ์ฐ๊ฒฐ๋ view() ํ์๋ผ์ธ์ ์์)๊ฐ ๋ทฐํฌํธ๋ฅผ ๋ฎ์์ ๋ฐ๋ผ navColorChange ์ ๋๋ฉ์ด์
์ด ์งํ๋ฉ๋๋ค.
- ์์: ๋ทฐํฌํธ์ ๋ค์ด์ฌ ๋ ๋ฏธ๋ฌํ๊ฒ ์ปค์ง๊ณ ๋๊ฐ ๋ ๋ค์ ์์์ง๋ ์ด๋ฏธ์ง.
.image-wrapper {\n animation: scaleOnView 1s linear forwards;\n animation-timeline: view();\n animation-range: entry 20% cover 80%; /* ์์๊ฐ 20% ๋ณด์ผ ๋ ์์ํ์ฌ, ๋ทฐ๋ฅผ 80% ๋ฎ์ ๋๊น์ง ์ฌ์๋จ */\n}\n\n@keyframes scaleOnView {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); } /* ๋๋ต ์ค์์ ์์ ๋ ์ต๋ ํฌ๊ธฐ */\n 100% { transform: scale(1); }\n}
์ด๊ฒ์ animation-range๊ฐ view() ํ์๋ผ์ธ์ ์ผ๋ถ๋ฅผ @keyframes ์ ๋๋ฉ์ด์
์ ๋ค๋ฅธ ๋จ๊ณ์ ์ด๋ป๊ฒ ๋งคํํ ์ ์๋์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
4. normal (๊ธฐ๋ณธ๊ฐ)
normal ํค์๋๋ animation-range์ ๊ธฐ๋ณธ๊ฐ์
๋๋ค. ์ด๋ ์ ๋๋ฉ์ด์
์ด ์ ํ๋ ์คํฌ๋กค ํ์๋ผ์ธ์ ์ ์ฒด ๊ธธ์ด(0%์์ 100%)์ ๊ฑธ์ณ ์คํ๋์ด์ผ ํจ์ ๋ํ๋
๋๋ค.
normal์ ์ข
์ข
์ ํฉํ์ง๋ง, ๋ณต์กํ ํจ๊ณผ์ ํ์ํ ์ ๋ฐํ ํ์ด๋ฐ์ ์ ๊ณตํ์ง ๋ชปํ ์ ์์ผ๋ฉฐ, ๋ฐ๋ก ์ด๊ฒ์ด animation-range๊ฐ ๋ ์ธ๋ฐํ ์ ์ด๋ฅผ ์ ๊ณตํ๋ ์ด์ ์
๋๋ค.
์ค์ฉ์ ์ธ ์ ์ฉ ์ฌ๋ก ๋ฐ ์ฌ์ฉ ์ฌ๋ก
animation-range์ ํ์ ์ต์ํ์ ๋
ธ๋ ฅ๊ณผ ์ต๋์ ์ฑ๋ฅ์ผ๋ก ์ ๊ตํ๊ณ ์ํธ์์ฉ์ ์ธ ์คํฌ๋กค ํจ๊ณผ์ ์๋ช
์ ๋ถ์ด๋ฃ๋ ๋ฅ๋ ฅ์ ์์ต๋๋ค. ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ๋ถํฐ ๊ต์ก ํ๋ซํผ์ ์ด๋ฅด๊ธฐ๊น์ง, ์ ์ธ๊ณ์ ์ผ๋ก ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์๋ ๋ช ๊ฐ์ง ๊ฐ๋ ฅํ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ํจ๋ด๋์ค ์คํฌ๋กค๋ง ํจ๊ณผ
๋ฐฐ๊ฒฝ ์ฝํ
์ธ ๊ฐ ์ ๊ฒฝ ์ฝํ
์ธ ๋ณด๋ค ๋ค๋ฅธ ์๋๋ก ์์ง์ฌ ๊น์ด๊ฐ์ ๋ง๋๋ ํจ๋ด๋์ค๋ ์ ํต์ ์ผ๋ก JavaScript์ ์ฃผ์ ์ฌ์ฉ ์ฌ๋ก์์ต๋๋ค. animation-range๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์ฌ ๊ฐ๋จํด์ง๋๋ค.
์ฌํ ์น์ฌ์ดํธ๊ฐ ๋ชฉ์ ์ง๋ฅผ ์๊ฐํ๋ค๊ณ ์์ํด๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ๋ฉด ๋์ ์ค์นด์ด๋ผ์ธ์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ์ฒ์ฒํ ์ด๋ํ๋ ๋ฐ๋ฉด, ํ
์คํธ๋ ๋ฒํผ ๊ฐ์ ์ ๊ฒฝ ์์๋ ์ ์ ์๋๋ก ์์ง์
๋๋ค. scroll(root) ํ์๋ผ์ธ์ ์ ์ํ๊ณ ์ ์๋ animation-range์ ํจ๊ป transform: translateY() ์ ๋๋ฉ์ด์
์ ์ ์ฉํ๋ฉด, ๋ณต์กํ ๊ณ์ฐ ์์ด ๋ถ๋๋ฌ์ด ํจ๋ด๋์ค๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค.
.parallax-background {\n animation: moveBackground var(--parallax-speed) linear forwards;\n animation-timeline: scroll(root);\n animation-range: 0% 100%; /* ๋๋ ํน์ ์น์
๋ฒ์ */\n}\n\n@keyframes moveBackground {\n from { transform: translateY(0); }\n to { transform: translateY(-100px); } /* ์ ์ฒด ์คํฌ๋กค์ ๊ฑธ์ณ 100px ์๋ก ์ด๋ */\n}
animation-range๋ ํจ๋ด๋์ค ํจ๊ณผ๊ฐ ๋ฌธ์์ ์ ์ฒด ์คํฌ๋กค๊ณผ ๋๊ธฐํ๋๋๋ก ๋ณด์ฅํ์ฌ ์ ๋์ ์ด๊ณ ๋ชฐ์
๊ฐ ์๋ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์์ ๋ํ๋ด๊ธฐ ์ ๋๋ฉ์ด์
์ฌ์ฉ์์ ๋ทฐํฌํธ์ ๋ค์ด์ฌ ๋ ์์๋ฅผ ๋ํ๋ด๋ ๊ฒ(ํ์ด๋์ธ, ์ฌ๋ผ์ด๋์ , ํ์ฅ)์ ์ผ๋ฐ์ ์ธ UI ํจํด์ ๋๋ค. ์ด๋ ์๋ก์ด ์ฝํ ์ธ ์ ์ฃผ์๋ฅผ ๋๊ณ ์งํ๊ฐ์ ๋ง๋ค์ด๋ ๋๋ค.
์จ๋ผ์ธ ๊ฐ์ข ํ๋ซํผ์ ์๊ฐํด๋ณด์ธ์: ์ฌ์ฉ์๊ฐ ๊ฐ์๋ฅผ ์คํฌ๋กคํ๋ฉด, ๊ฐ ์๋ก์ด ์น์
์ ๋ชฉ์ด๋ ์ด๋ฏธ์ง๊ฐ ์ฐ์ํ๊ฒ ํ์ด๋์ธํ๋ฉฐ ์ฌ๋ผ์ด๋๋์ด ๋ํ๋ ์ ์์ต๋๋ค. animation-timeline: view()์ ํจ๊ป animation-range: entry 0% cover 50%๋ฅผ ์ฌ์ฉํ๋ฉด, ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ ์ค๊ฐ ์ง์ ์ ๋๋ฌํ ๋๊น์ง ์์ ํ ํฌ๋ช
ํ ์ํ์์ ์์ ํ ๋ถํฌ๋ช
ํ ์ํ๋ก ํ์ด๋์ธ๋๋๋ก ์ง์ํ ์ ์์ต๋๋ค.
.reveal-item {\n opacity: 0;\n transform: translateY(50px);\n animation: revealItem 1s linear forwards;\n animation-timeline: view();\n animation-range: entry 10% cover 50%; /* 10% ๋ณด์ผ ๋ ์์ํ์ฌ 50% ๋ณด์ผ ๋ ์ข
๋ฃ */\n}\n\n@keyframes revealItem {\n to { opacity: 1; transform: translateY(0); }\n}
์ด ์ ๊ทผ ๋ฐฉ์์ ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ์ ์ ํ ์ค๋ช ์ด๋ ๋ด์ค ํฌํธ์ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์น์ ์ด๋ , ์ฝํ ์ธ ๋ก๋ฉ์ ๋ ์ญ๋์ ์ด๊ณ ๋งค๋ ฅ์ ์ผ๋ก ๋๋ผ๊ฒ ๋ง๋ญ๋๋ค.
์งํ๋ฅ ํ์๊ธฐ
๊ธด ๊ธฐ์ฌ, ์ฌ์ฉ ์ค๋ช ์ ๋๋ ๋ค๋จ๊ณ ์์์ ๊ฒฝ์ฐ, ์งํ๋ฅ ํ์๊ธฐ๋ ์ฌ์ฉ์์๊ฒ ํ์ฌ ์์น์ ๋จ์ ์์ ๋ณด์ฌ์ค์ผ๋ก์จ ์ฌ์ฉ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ธ ํจํด์ ๋ทฐํฌํธ ์๋จ์ ์ฝ๊ธฐ ์งํ๋ฅ ๋ง๋์ ๋๋ค.
ํ์ด์ง ์๋จ์ ์์ ๋ง๋๋ฅผ ๋ง๋ค๊ณ ๊ทธ ๋๋น๋ฅผ ๋ฌธ์์ ์คํฌ๋กค ์งํ๋ฅ ์ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค. animation-timeline: scroll(root)์ animation-range: 0% 100%๋ฅผ ์ฌ์ฉํ๋ฉด, ์ฌ์ฉ์๊ฐ ํ์ด์ง ์๋จ์์ ํ๋จ์ผ๋ก ์คํฌ๋กคํจ์ ๋ฐ๋ผ ๋ง๋์ ๋๋น๊ฐ 0%์์ 100%๋ก ํ์ฅ๋ ์ ์์ต๋๋ค.
.progress-bar {\n position: fixed;\n top: 0; left: 0;\n height: 5px;\n background-color: #007bff;\n width: 0%; /* ์ด๊ธฐ ์ํ */\n animation: fillProgress 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 0% 100%;\n z-index: 1000;\n}\n\n@keyframes fillProgress {\n to { width: 100%; }\n}
์ด๊ฒ์ ์ฝํ ์ธ ๊ฐ ๋ง์ ํ์ด์ง์์ ํ์์ ๊ฐ์ ํ๊ณ ์ฌ์ฉ์ ๋ถ๋ง์ ์ค์ด๋ ๋ช ํํ ์๊ฐ์ ์ ํธ๋ฅผ ์ ๊ณตํ๋ฉฐ, ์ด๋ ๊ธ๋ก๋ฒ ์ฝํ ์ธ ์๋น์ ์์ด ๊ฐ์น ์๋ ๊ธฐ๋ฅ์ ๋๋ค.
๋ณต์กํ ๋ค๋จ๊ณ ์ ๋๋ฉ์ด์
animation-range๋ ๋จ์ผ ์คํฌ๋กค ํ์๋ผ์ธ์ ํน์ ํ๊ณ ๊ฒน์น์ง ์๋ ๊ตฌ๊ฐ์ ๊ฑธ์ณ ๋ค๋ฅธ ์ ๋๋ฉ์ด์
์ด ์ฌ์๋์ด์ผ ํ๋ ๋ณต์กํ ์ํ์ค๋ฅผ ์กฐ์จํ ๋ ์ง๊ฐ๋ฅผ ๋ฐํํฉ๋๋ค.
"์ฐ๋ฆฌ ํ์ฌ์ ์ญ์ฌ" ํ์ด์ง๋ฅผ ์์ํด๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ๋ฉด "๋ง์ผ์คํค" ์น์ ์ ์ง๋๊ฒ ๋ฉ๋๋ค. ๊ฐ ๋ง์ผ์คํค์ ๊ณ ์ ํ ์ ๋๋ฉ์ด์ ์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค:
- ๋ง์ผ์คํค 1: ๊ทธ๋ํฝ์ด ํ์ ํ๊ณ ํ์ฅ๋ฉ๋๋ค (
animation-range: 10% 20%) - ๋ง์ผ์คํค 2: ํ์๋ผ์ธ ์์๊ฐ ์์์ ์ฌ๋ผ์ด๋์ธ ๋ฉ๋๋ค (
animation-range: 30% 40%) - ๋ง์ผ์คํค 3: ์ธ์ฉ๋ฌธ ๋งํ์ ์ด ๋ํ๋ฉ๋๋ค (
animation-range: 50% 60%)
๋ฒ์๋ฅผ ์ ์คํ๊ฒ ์ ์ํจ์ผ๋ก์จ, ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ๋ฉด์ ๋ค๋ฅธ ์ฝํ ์ธ ์กฐ๊ฐ์ผ๋ก ์ฃผ์๋ฅผ ์ ๋ํ๋ ์์ง๋ ฅ ์๊ณ ์ํธ์์ฉ์ ์ธ ๋ด๋ฌํฐ๋ธ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
.milestone-1-graphic {\n animation: rotateExpand 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 10% 20%;\n}\n.milestone-2-timeline {\n animation: slideIn 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 30% 40%;\n}\n/* ... ๋ฑ๋ฑ ... */\n
์ด๋ฌํ ์์ค์ ์ ์ด๋ ๋ค์ํ ์ฒญ์ค์๊ฒ ๊ณต๊ฐ์ ๋ถ๋ฌ์ผ์ผํค๋ ๊ณ ๋๋ก ๋ง์ถคํ๋๊ณ ๋ธ๋๋ํ๋ ์คํ ๋ฆฌํ ๋ง ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์ธํฐ๋ํฐ๋ธ ์คํ ๋ฆฌํ ๋ง
๋จ์ํ ๋ํ๋ด๊ธฐ ํจ๊ณผ๋ฅผ ๋์ด, animation-range๋ ์ ํ ๋๋ฉ ํ์ด์ง๋ ํธ์ง ์ฝํ
์ธ ์์ ์ข
์ข
๋ณผ ์ ์๋ ํ๋ถํ๊ณ ์ํธ์์ฉ์ ์ธ ๋ด๋ฌํฐ๋ธ๋ฅผ ์ฉ์ดํ๊ฒ ํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์คํ ๋ฆฌ๋ฅผ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ์์๊ฐ ์ปค์ง๊ฑฐ๋, ์์์ง๊ฑฐ๋, ์์ด ๋ณํ๊ฑฐ๋, ์ฌ์ง์ด ๋ค๋ฅธ ๋ชจ์์ผ๋ก ๋ณํ๋ ์ ์์ต๋๋ค.
์ ํ ์ถ์ ํ์ด์ง๋ฅผ ์๊ฐํด๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ์๋๋ก ์คํฌ๋กคํ๋ฉด ์ ํ ์ด๋ฏธ์ง๊ฐ ์ฒ์ฒํ ํ์ ํ์ฌ ๋ค๋ฅธ ๊ฐ๋๋ฅผ ๋ณด์ฌ์ฃผ๊ณ , ๋์์ ๊ธฐ๋ฅ ํ ์คํธ๊ฐ ํ์ด๋์ธ๋ฉ๋๋ค. ์ด ๊ณ์ธตํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉ์์ ์ฐธ์ฌ๋ฅผ ์ ์งํ๊ณ ์ ์ฒด ๋น๋์ค ์์ด ์ ๋ณด๋ฅผ ๋์ ์ผ๋ก ์ ์ํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
animation-range๊ฐ ์ ๊ณตํ๋ ์ ๋ฐํ ์ ์ด๋ฅผ ํตํด ๋์์ด๋์ ๊ฐ๋ฐ์๋ ์๋ํ ๋๋ก ์ด๋ฌํ ๊ฒฝํ์ ์ ํํ๊ฒ ์ฐ์ถํ์ฌ, ์ฌ์ฉ์์ ์คํฌ๋กค ์๋์ ๊ด๊ณ์์ด ๋ถ๋๋ฝ๊ณ ์๋์ ์ธ ํ๋ฆ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ค์ ํ๊ธฐ
animation-range๋ก CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ๊ตฌํํ๋ ๊ฒ์ ๋ช ๊ฐ์ง ์ฃผ์ ๋จ๊ณ๋ฅผ ํฌํจํฉ๋๋ค. ํ์ ๊ตฌ์ฑ ์์๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
scroll() ๋ฐ view() ํ์๋ผ์ธ ๋ค์ ๋ณด๊ธฐ
์ฒซ ๋ฒ์งธ ๊ฒฐ์ ์ ์ ๋๋ฉ์ด์ ์ ์ด๋ค ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ฐ์ธ๋ฉํ ๊ฒ์ธ๊ฐ์ ๋๋ค:
scroll(): ์ ์ฒด ๋ฌธ์ ์คํฌ๋กค์ด๋ ํน์ ์ปจํ ์ด๋์ ์คํฌ๋กค์ ๋ฐ์ํ๋ ์ ๋๋ฉ์ด์ ์ ์ด์์ ์ ๋๋ค.- ๋ฌธ๋ฒ:
scroll([|| ]?)
์๋ฅผ ๋ค์ด, ์ฃผ ๋ฌธ์ ์คํฌ๋กค์ ๊ฒฝ์ฐscroll(root), ์์ ์์ฒด์ ์คํฌ๋กค ์ปจํ ์ด๋์ ๊ฒฝ์ฐscroll(self), ๋๋ ์ฌ์ฉ์ ์ ์ ์์์ ์์ง ์คํฌ๋กค์ ๊ฒฝ์ฐscroll(my-element-id y)๋ฅผ ์ฌ์ฉํฉ๋๋ค. view(): ์คํฌ๋กค ์ปจํ ์ด๋(๋ณดํต ๋ทฐํฌํธ) ๋ด์์ ์์์ ๊ฐ์์ฑ์ ์ํด ํธ๋ฆฌ๊ฑฐ๋๋ ์ ๋๋ฉ์ด์ ์ ๊ฐ์ฅ ์ ํฉํฉ๋๋ค.- ๋ฌธ๋ฒ:
view([|| ]?)
์๋ฅผ ๋ค์ด, ๊ธฐ๋ณธ ๋ทฐํฌํธ ํ์๋ผ์ธ์ ๊ฒฝ์ฐview(), ๋ธ๋ก ์ถ ๊ฐ์์ฑ์ ์ฐ๊ฒฐ๋ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐview(block)๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ถ๋ชจ/์กฐ์์view-timeline-name์ ์ฌ์ฉํ์ฌ ๋ทฐ ํ์๋ผ์ธ์ ์ด๋ฆ์ ์ง์ ํ ์๋ ์์ต๋๋ค.
์ค์ํ ๊ฒ์, animation-timeline์ ์ ๋๋ฉ์ด์
์ ์ ์ฉํ๋ ค๋ ์์์ ์ ์ฉํด์ผ ํ๋ฉฐ, ๋ฐ๋์ ์คํฌ๋กค ์ปจํ
์ด๋ ์์ฒด์ ์ ์ฉํ ํ์๋ ์๋ค๋ ๊ฒ์
๋๋ค (ํด๋น ์์๊ฐ ์คํฌ๋กค ์ปจํ
์ด๋์ธ ๊ฒฝ์ฐ๋ ์ ์ธ).
@keyframes๋ก ์ ๋๋ฉ์ด์
์ ์ํ๊ธฐ
์ ๋๋ฉ์ด์
์ ์๊ฐ์ ๋ณํ๋ ํ์ค @keyframes ๊ท์น์ ์ฌ์ฉํ์ฌ ์ ์๋ฉ๋๋ค. ๋ค๋ฅธ ์ ์ ์ด ํคํ๋ ์๋ค์ด ์คํฌ๋กค ํ์๋ผ์ธ์ ์ด๋ป๊ฒ ๋งคํ๋๋๊ฐ์
๋๋ค.
์ ๋๋ฉ์ด์
์ด ์คํฌ๋กค ํ์๋ผ์ธ์ ์ฐ๊ฒฐ๋๋ฉด, @keyframes ๋ด์ ๋ฐฑ๋ถ์จ(0%์์ 100%)์ ๋ ์ด์ ์๊ฐ์ ๋ํ๋ด์ง ์์ต๋๋ค. ๋์ , ์ง์ ๋ animation-range๋ฅผ ํตํ ์งํ๋ฅ ์ ๋ํ๋
๋๋ค. ๋ง์ฝ animation-range๊ฐ 20% 80%๋ผ๋ฉด, @keyframes์ 0%๋ ์คํฌ๋กค ํ์๋ผ์ธ์ 20%์ ํด๋นํ๊ณ , @keyframes์ 100%๋ ์คํฌ๋กค ํ์๋ผ์ธ์ 80%์ ํด๋นํฉ๋๋ค.
์ด๊ฒ์ ๊ฐ๋ ฅํ ๊ฐ๋
์ ์ ํ์
๋๋ค: ํคํ๋ ์์ ์ ๋๋ฉ์ด์
์ ์ ์ฒด ์ํ์ค๋ฅผ ์ ์ํ๊ณ , animation-range๋ ๊ทธ ์ํ์ค๋ฅผ ํน์ ์คํฌ๋กค ๊ตฌ๊ฐ์ ์๋ผ๋ด์ด ๋งคํํฉ๋๋ค.
animation-timeline ๋ฐ animation-range ์ ์ฉํ๊ธฐ
์ด์ ์ค์ฉ์ ์ธ ์์ ๋ฅผ ํตํด ๋ชจ๋ ๊ฒ์ ์ข ํฉํด ๋ณด๊ฒ ์ต๋๋ค: ๋ทฐํฌํธ์์ ์์ ํ ๋ณด์ด๊ฒ ๋๋ฉด์ ์ฝ๊ฐ ์ปค์ง๊ณ , ๋๊ฐ ๋ ๋ค์ ์์์ง๋ ์์์ ๋๋ค.
HTML ๊ตฌ์กฐ:
\n \n Hello World\n \n
CSS ์คํ์ผ๋ง:
.animated-element {\n height: 200px;\n width: 200px;\n background-color: lightblue;\n margin: 500px auto;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5em;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n\n /* ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ์ํ ์ฃผ์ ์์ฑ */\n animation: scaleOnView 1s linear forwards;\n animation-timeline: view(); /* ์ด ์์๊ฐ ๋ทฐ์ ๋ค์ด์ค๊ณ ๋๊ฐ์ ๋ฐ๋ผ ์ ๋๋ฉ์ด์
์ด ์งํ๋จ */\n animation-range: entry 20% cover 80%; /* ์ ๋๋ฉ์ด์
์ ์์๊ฐ 20% ๋ณด์ผ ๋๋ถํฐ ๋ทฐ๋ฅผ 80% ๋ฎ์ ๋๊น์ง ์คํ๋จ */\n}\n\n@keyframes scaleOnView {\n 0% { transform: scale(0.8); opacity: 0; }\n 50% { transform: scale(1.1); opacity: 1; } /* ํ์ฑ ๋ฒ์์ ์ค๊ฐ์ฏค์์ ์ต๋ ํฌ๊ธฐ ๋ฐ ๋ถํฌ๋ช
๋ */\n 100% { transform: scale(0.9); opacity: 1; }\n}
์ด ์์ ์์:
animation-timeline: view()๋ ์ ๋๋ฉ์ด์ ์ด.animated-element์ ๋ทฐํฌํธ ๋ด ๊ฐ์์ฑ์ ์ํด ๊ตฌ๋๋๋๋ก ๋ณด์ฅํฉ๋๋ค.animation-range: entry 20% cover 80%๋ ์ ๋๋ฉ์ด์ ์ ํ์ฑ ์์ญ์ ์ ์ํฉ๋๋ค: ์์๊ฐ ๋ทฐํฌํธ์ 20% ๋ค์ด์์ ๋(์์ชฝ ๊ฐ์ฅ์๋ฆฌ๋ถํฐ) ์์ํ์ฌ ์์๊ฐ ๋ทฐํฌํธ๋ฅผ 80% ๋ฎ์ ๋๊น์ง(์์ชฝ ๊ฐ์ฅ์๋ฆฌ๋ถํฐ) ์ฌ์๋ฉ๋๋ค.@keyframes scaleOnView๋ ๋ณํ์ ์ ์ํฉ๋๋ค. ํคํ๋ ์์0%๋ ๋ทฐ ํ์๋ผ์ธ์entry 20%์, ํคํ๋ ์์50%๋ `entry 20%`์์ `cover 80%` ๋ฒ์์ ์ค๊ฐ ์ง์ ์, ๊ทธ๋ฆฌ๊ณ100%๋cover 80%์ ๋งคํ๋ฉ๋๋ค.animation-duration: 1s์animation-fill-mode: forwards๋ ์ฌ์ ํ ๊ด๋ จ์ด ์์ต๋๋ค. ์ง์ ์๊ฐ์ "์๋ ๋ฐฐ์จ" ์ญํ ์ ํฉ๋๋ค; ๊ธด ์ง์ ์๊ฐ์ ์ฃผ์ด์ง ์คํฌ๋กค ๊ฑฐ๋ฆฌ ๋ด์์ ์ ๋๋ฉ์ด์ ์ด ํด๋น ๋ฒ์์์ ๋ ๋๋ฆฌ๊ฒ ๋ณด์ด๊ฒ ํฉ๋๋ค.forwards๋ ์ ๋๋ฉ์ด์ ์ ์ต์ข ์ํ๊ฐ ์ ์ง๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ด ์ค์ ์ ์์ CSS๋ง์ผ๋ก ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ดํ๋ ๋งค์ฐ ๊ฐ๋ ฅํ๊ณ ์ง๊ด์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
๊ณ ๊ธ ๊ธฐ์ ๋ฐ ๊ณ ๋ ค์ฌํญ
๊ธฐ๋ณธ ์ฌํญ์ ๋์ด, animation-range๋ ๋ค๋ฅธ CSS ์ ๋๋ฉ์ด์
์์ฑ๊ณผ ์ํํ๊ฒ ํตํฉ๋๋ฉฐ ์ฑ๋ฅ ๋ฐ ํธํ์ฑ์ ๋ํ ๊ณ ๋ ค๊ฐ ํ์ํฉ๋๋ค.
animation-range์ animation-duration ๋ฐ animation-fill-mode ๊ฒฐํฉํ๊ธฐ
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ์คํฌ๋กค ์๋์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ฏ๋ก ์ ํต์ ์ธ ์๋ฏธ์ ๊ณ ์ ๋ "์ง์ ์๊ฐ"์ ์์ง๋ง, animation-duration์ ์ฌ์ ํ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. ์ด๋ ์ ๋๋ฉ์ด์
์ด ์ง์ ๋ ๋ฒ์ ๋ด์์ "์ ์" ์๋๋ก ์ฌ์๋ ๊ฒฝ์ฐ ์ ์ฒด ํคํ๋ ์ ์ํ์ค๋ฅผ ์๋ฃํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ "๋ชฉํ ์ง์ ์๊ฐ"์ ์ ์ํฉ๋๋ค.
- ๊ธด
animation-duration์ ์ฃผ์ด์งanimation-range๋ด์์ ์ ๋๋ฉ์ด์ ์ด ๋ ๋๋ฆฌ๊ฒ ์ฌ์๋๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๊ฒ ํฉ๋๋ค. - ์งง์
animation-duration์ ์ฃผ์ด์งanimation-range๋ด์์ ์ ๋๋ฉ์ด์ ์ด ๋ ๋น ๋ฅด๊ฒ ์ฌ์๋๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๊ฒ ํฉ๋๋ค.
animation-fill-mode ์ญ์ ์ค์ํฉ๋๋ค. forwards๋ ํ์ฑ animation-range๋ฅผ ํต๊ณผํ ํ ์ ๋๋ฉ์ด์
์ ์ต์ข
์ํ๊ฐ ์ ์ง๋๋๋ก ๋ณด์ฅํ๋ ๋ฐ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค. ์ด๊ฒ์ด ์์ผ๋ฉด ์ฌ์ฉ์๊ฐ ์ ์๋ ๋ฒ์๋ฅผ ๋ฒ์ด๋ ์คํฌ๋กคํ๋ฉด ์์๊ฐ ์๋ ์ํ๋ก ๋์๊ฐ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์จ ํ ํ์ด๋์ธ ์ํ๋ฅผ ์ ์งํ๋ ค๋ฉด animation-fill-mode: forwards๊ฐ ํ์์ ์
๋๋ค.
ํ ์์์ ์ฌ๋ฌ ์ ๋๋ฉ์ด์ ์ฒ๋ฆฌํ๊ธฐ
๋จ์ผ ์์์ ์ฌ๋ฌ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด๋ animation-name, animation-timeline, animation-range(๋ฐ ๊ธฐํ ์ ๋๋ฉ์ด์
์์ฑ)์ ์ผํ๋ก ๊ตฌ๋ถ๋ ๊ฐ ๋ชฉ๋ก์ ์ ๊ณตํ์ฌ ๋ฌ์ฑ๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด, ํ ์์๊ฐ ๋ทฐ์ ๋ค์ด์ฌ ๋ ํ์ด๋์ธ๋๋ ๋์์ ๋ทฐ๋ฅผ ๋ฎ์ ๋ ํ์ ํ ์ ์์ต๋๋ค:
.multi-animated-item {\n animation-name: fadeIn, rotateItem;\n animation-duration: 1s, 2s;\n animation-timeline: view(), view();\n animation-range: entry 0% cover 50%, cover;\n animation-fill-mode: forwards, forwards;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes rotateItem {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}
์ด๋ ์์ ์ธ๊ด์ ๋ค๋ฅธ ์ธก๋ฉด์ ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ค๋ฅธ ๊ตฌ๊ฐ์ผ๋ก ์ ์ดํ ์ ์๋ ์ ๋ฐํ ์กฐ์จ์ ํ์ ๋ณด์ฌ์ค๋๋ค.
์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ
animation-range๋ฅผ ํฌํจํ CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์ ์ฃผ์ ์ด์ ์ค ํ๋๋ ๋ด์ฌ๋ ์ฑ๋ฅ์์ ์ด์ ์
๋๋ค. ์คํฌ๋กค ์ฐ๊ฒฐ ๋ก์ง์ JavaScript์์ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ์์ง์ผ๋ก ์ฎ๊น์ผ๋ก์จ:
- ๋ฉ์ธ ์ค๋ ๋ ๋ถ๋ด ์ํ: ์ ๋๋ฉ์ด์ ์ด ์ปดํฌ์งํฐ ์ค๋ ๋์์ ์คํ๋ ์ ์์ด, ๋ฉ์ธ JavaScript ์ค๋ ๋๊ฐ ๋ค๋ฅธ ์์ ์ ์ฒ๋ฆฌํ ์ ์๊ฒ ๋์ด ๋ ๋ถ๋๋ฌ์ด ์ํธ์์ฉ์ ์ ๋ํฉ๋๋ค.
- ์ต์ ํ๋ ๋ ๋๋ง: ๋ธ๋ผ์ฐ์ ๋ CSS ์ ๋๋ฉ์ด์ ๋ฐ ๋ณํ์ ๊ณ ๋๋ก ์ต์ ํ๋์ด ์์ผ๋ฉฐ, ์ข ์ข GPU ๊ฐ์์ ํ์ฉํฉ๋๋ค.
- ๋ฒ๋ฒ ์ ๊ฐ์: ์คํฌ๋กค ์ด๋ฒคํธ์ ๋ํ JavaScript ์์กด๋๋ฅผ ์ค์ด๋ฉด ์คํฌ๋กค ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ๊ณผ๋ถํ๋ ๋ ๋ฐ์ํ ์ ์๋ "๋ฒ๋ฒ ์"(๋๊น ํ์)์ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค.
์ด๋ ํนํ ๋ค์ํ ์ฅ์น์ ๋คํธ์ํฌ ์กฐ๊ฑด์์ ์น์ฌ์ดํธ์ ์ ์ํ๋ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ๋ ์ ๋์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ
2023๋
๋ง / 2024๋
์ด ํ์ฌ, CSS ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
(animation-timeline ๋ฐ animation-range ํฌํจ)์ ์ฃผ๋ก Chromium ๊ธฐ๋ฐ ๋ธ๋ผ์ฐ์ (Chrome, Edge, Opera, Brave ๋ฑ)์์ ์ง์๋ฉ๋๋ค.
ํ์ฌ ์ํ:
- Chrome: ์์ ์ง์ (Chrome 115 ์ดํ)
- Edge: ์์ ์ง์
- Firefox: ๊ฐ๋ฐ ์ค / ํ๋๊ทธ ๋ค์ ์์
- Safari: ๊ฐ๋ฐ ์ค / ํ๋๊ทธ ๋ค์ ์์
ํด๋ฐฑ ์ ๋ต:
- ๊ธฐ๋ฅ ์ฟผ๋ฆฌ (
@supports):@supports (animation-timeline: scroll())๋ฅผ ์ฌ์ฉํ์ฌ ์ง์๋๋ ๊ฒฝ์ฐ์๋ง ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํฉ๋๋ค. ์ง์๋์ง ์๋ ๋ธ๋ผ์ฐ์ ์๋ ๋ ๊ฐ๋จํ, ์ ๋๋ฉ์ด์ ์ด ์๊ฑฐ๋ JavaScript ๊ธฐ๋ฐ์ ํด๋ฐฑ์ ์ ๊ณตํฉ๋๋ค. - ์ ์ง์ ํฅ์: ์ด๋ฌํ ๊ณ ๊ธ ์ ๋๋ฉ์ด์ ์์ด๋ ์ฝํ ์ธ ๊ฐ ์์ ํ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ์ดํดํ ์ ์๋๋ก ๋์์ธํฉ๋๋ค. ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํ์์ ์ธ ๊ฒ์ด ์๋๋ผ ํฅ์์ํค๋ ์์์ฌ์ผ ํฉ๋๋ค.
์น ํ์ค์ ๋น ๋ฅธ ๋ฐ์ ์ ๊ณ ๋ คํ ๋, ๊ฐ๊น์ด ๋ฏธ๋์ ๋ ๋์ ๋ธ๋ผ์ฐ์ ์ง์์ ๊ธฐ๋ํ ์ ์์ต๋๋ค. ์ต์ ํธํ์ฑ ์ ๋ณด๋ Can I Use...์ ๊ฐ์ ์๋ฃ๋ฅผ ์ฃผ์ํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๋๋ฒ๊น
์ด๋ฌํ ์ ๋๋ฉ์ด์ ์ ๋๋ฒ๊น ํ๋ ๊ฒ์ ์๋ก์ด ๊ฒฝํ์ด ๋ ์ ์์ต๋๋ค. ์ต์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ, ํนํ Chromium์์๋ ํ๋ฅญํ ์ง์์ ์ ๊ณตํ๊ธฐ ์ํด ๋ฐ์ ํ๊ณ ์์ต๋๋ค:
- Animations ํญ: Chrome DevTools์ "Animations" ํญ์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. ๋ชจ๋ ํ์ฑ ์ ๋๋ฉ์ด์ ์ ๋ณด์ฌ์ฃผ๊ณ , ์ผ์ ์ค์ง, ๋ค์ ์ฌ์ ๋ฐ ์คํฌ๋ฌ๋น์ ํ ์ ์์ต๋๋ค. ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ, ์ข ์ข ์คํฌ๋กค ํ์๋ผ์ธ๊ณผ ํ์ฑ ๋ฒ์์ ์๊ฐ์ ํํ์ ์ ๊ณตํฉ๋๋ค.
- Elements ํจ๋: "Elements" ํจ๋์์ ์์๋ฅผ ๊ฒ์ฌํ๊ณ "Styles" ํญ์ ๋ณด๋ฉด ์ ์ฉ๋
animation-timeline๋ฐanimation-range์์ฑ์ ๋ณผ ์ ์์ต๋๋ค. - ์คํฌ๋กค ํ์๋ผ์ธ ์ค๋ฒ๋ ์ด: ์ผ๋ถ ๋ธ๋ผ์ฐ์ ๋ ํ์ด์ง์ ์ง์ ์คํฌ๋กค ํ์๋ผ์ธ์ ์๊ฐํํ๋ ์คํ์ ์ธ ์ค๋ฒ๋ ์ด๋ฅผ ์ ๊ณตํ์ฌ, ์คํฌ๋กค ์์น๊ฐ ์ ๋๋ฉ์ด์ ์งํ๋ฅ ์ ์ด๋ป๊ฒ ๋งคํ๋๋์ง ์ดํดํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
์ด๋ฌํ ๋๊ตฌ์ ์ต์ํด์ง๋ฉด ๊ฐ๋ฐ ๋ฐ ๊ฐ์ ํ๋ก์ธ์ค๊ฐ ํฌ๊ฒ ๋นจ๋ผ์ง ๊ฒ์ ๋๋ค.
๊ธ๋ก๋ฒ ๊ตฌํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
animation-range๋ ๋๋ผ์ด ์ฐฝ์์ ์์ ๋ฅผ ์ ๊ณตํ์ง๋ง, ์ ์ธ๊ณ ๋ชจ๋ ๋ฐฐ๊ฒฝ๊ณผ ์ฅ์น์ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด์๋ ์ฑ
์๊ฐ ์๋ ๊ตฌํ์ด ์ค์ํฉ๋๋ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค์ฌํญ
์์ง์์ ์ผ๋ถ ์ฌ์ฉ์, ํนํ ์ ์ ์ฅ์ ๋ ๋ฉ๋ฏธ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ๋ฐฉํฅ ๊ฐ๊ฐ์ ์๊ฒ ํ๊ฑฐ๋ ํด๋ก์ธ ์ ์์ต๋๋ค. ํญ์ ๋ค์์ ๊ณ ๋ คํ์ธ์:
prefers-reduced-motion๋ฏธ๋์ด ์ฟผ๋ฆฌ: ์ฌ์ฉ์ ์ ํธ๋๋ฅผ ์กด์คํ์ธ์. ์ด์ ์ฒด์ ์ค์ ์์ "๋์ ์ค์ด๊ธฐ"๋ฅผ ํ์ฑํํ ์ฌ์ฉ์์ ๊ฒฝ์ฐ, ์ ๋๋ฉ์ด์ ์ ํฌ๊ฒ ์ค์ด๊ฑฐ๋ ์์ ํ ์ ๊ฑฐํด์ผ ํฉ๋๋ค.
@media (prefers-reduced-motion) {\n .animated-element {\n animation: none !important; /* ์ ๋๋ฉ์ด์
๋นํ์ฑํ */\n transform: none !important; /* ๋ณํ ์ฌ์ค์ */\n opacity: 1 !important; /* ๊ฐ์์ฑ ๋ณด์ฅ */\n }\n}
์ด๊ฒ์ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ํฌํจํ ๋ชจ๋ ์ ๋๋ฉ์ด์ ์ ๋ํ ์ค์ํ ์ ๊ทผ์ฑ ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค.
- ๊ณผ๋ํ ์์ง์ ํผํ๊ธฐ: ํ์ฑํ๋ ๊ฒฝ์ฐ์๋, ์ฐ๋งํ๊ฑฐ๋ ๋ถํธํ ์ ์๋ ๊ฐ์์ค๋ฝ๊ณ , ๋น ๋ฅด๊ฑฐ๋, ํฐ ๊ท๋ชจ์ ์์ง์์ ํผํ์ธ์. ๋ฏธ๋ฌํ ์ ๋๋ฉ์ด์ ์ด ์ข ์ข ๋ ํจ๊ณผ์ ์ ๋๋ค.
- ๊ฐ๋ ์ฑ ๋ณด์ฅ: ์ ๋๋ฉ์ด์ ์ ๋ฐ์ ๊ฑธ์ณ ํ ์คํธ์ ์ค์ํ ์ฝํ ์ธ ๊ฐ ์ฝ๊ธฐ ์ฌ์ด ์ํ๋ฅผ ์ ์งํ๋๋ก ํ์ธ์. ํ ์คํธ๋ฅผ ์ฝ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค๊ฑฐ๋ ๊น๋ฐ์์ ์ ๋ฐํ๋ ๋ฐฉ์์ผ๋ก ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ์ง ๋ง์ธ์.
๋ฐ์ํ ๋์์ธ
์ ๋๋ฉ์ด์ ์ ํฐ ๋ฐ์คํฌํฑ ๋ชจ๋ํฐ๋ถํฐ ์์ ๋ชจ๋ฐ์ผ ํฐ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ฅ์น์์ ์ ๋ณด์ด๊ณ ์ฑ๋ฅ์ด ์ข์์ผ ํฉ๋๋ค. ๋ค์์ ๊ณ ๋ คํ์ธ์:
- ๋ทฐํฌํธ ๊ธฐ๋ฐ ๊ฐ: ํคํ๋ ์ ๋ด์์ ๋ณํ์ด๋ ์์น ์ง์ ์ ๋ฐฑ๋ถ์จ,
vw,vh์ ๊ฐ์ ์๋ ๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๋๋ฉ์ด์ ์ด ์์ฐ์ค๋ฝ๊ฒ ํ์ฅ๋๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. - ์ ๋๋ฉ์ด์
๋ฒ์์ ๋ํ ๋ฏธ๋์ด ์ฟผ๋ฆฌ: ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ค๋ฅธ
animation-range๊ฐ์ด๋ ์ฌ์ง์ด ์์ ํ ๋ค๋ฅธ ์ ๋๋ฉ์ด์ ์ ์ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ํ๋ฉด ๊ณต๊ฐ๊ณผ ์ฑ๋ฅ์ด ๋ ์ ํ์ ์ธ ๋ชจ๋ฐ์ผ ์ฅ์น์์๋ ๋ณต์กํ ์คํฌ๋กค ๊ธฐ๋ฐ ๋ด๋ฌํฐ๋ธ๋ฅผ ๋จ์ํํ ์ ์์ต๋๋ค. - ์ฌ๋ฌ ์ฅ์น์์ ํ ์คํธํ๊ธฐ: ํญ์ ์ค์ ์ฅ์น๋ DevTools์ ๊ฐ๋ ฅํ ์ฅ์น ์๋ฎฌ๋ ์ด์ ์ ์ฌ์ฉํ์ฌ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ํ ์คํธํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ด๋ ๋ ์ด์์ ๋ฌธ์ ๋ฅผ ํ์ ํ์ธ์.
์ ์ง์ ํฅ์
๋ธ๋ผ์ฐ์ ํธํ์ฑ์์ ์ธ๊ธํ๋ฏ์ด, ํต์ฌ ์ฝํ ์ธ ์ ๊ธฐ๋ฅ์ด ์ด๋ฌํ ๊ณ ๊ธ ์ ๋๋ฉ์ด์ ์ ์ ๋ ์์กดํ์ง ์๋๋ก ํ์ธ์. ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๋ ๋์ ์ค์ด๊ธฐ ์ค์ ์ ํ ์ฌ์ฉ์๋ ์์ ํ๊ณ ๋ง์กฑ์ค๋ฌ์ด ๊ฒฝํ์ ํ ์ ์์ด์ผ ํฉ๋๋ค. ์ ๋๋ฉ์ด์ ์ ํ์ ์ฌํญ์ด ์๋ ํฅ์ ๊ธฐ๋ฅ์ ๋๋ค.
์ด๋ JavaScript๋ ๊ณ ๊ธ CSS ์ ๋๋ฉ์ด์ ์ด ๋ก๋๋์ง ์๋๋ผ๋ ์ฝํ ์ธ ๊ฐ ์๋ฏธ๋ก ์ ์ผ๋ก ์ ํํ๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๋๋ก HTML๊ณผ CSS๋ฅผ ๊ตฌ์กฐํํด์ผ ํจ์ ์๋ฏธํฉ๋๋ค.
์ฑ๋ฅ ์ต์ ํ
์์ CSS ์ ๋๋ฉ์ด์ ์ ์ฑ๋ฅ์ด ์ข์ง๋ง, ์๋ชป๋ ์ ํ์ ์ฌ์ ํ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค:
transform๊ณผopacity์ ๋๋ฉ์ด์ ํ๊ธฐ: ์ด ์์ฑ๋ค์ ์ข ์ข ์ปดํฌ์งํฐ์์ ์ฒ๋ฆฌ๋์ด ๋ ์ด์์ ๋ฐ ํ์ธํธ ์์ ์ ํผํ ์ ์์ผ๋ฏ๋ก ์ ๋๋ฉ์ด์ ์ ์ด์์ ์ ๋๋ค. ๊ฐ๋ฅํ ๊ฒฝ์ฐwidth,height,margin,padding,top,left,right,bottom๊ณผ ๊ฐ์ ์์ฑ์ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ์ ํผํ์ธ์. ์ด๋ค์ ๋น์ฉ์ด ๋ง์ด ๋๋ ๋ ์ด์์ ์ฌ๊ณ์ฐ์ ์ ๋ฐํ ์ ์์ต๋๋ค.- ๋ณต์กํ ํจ๊ณผ ์ ํํ๊ธฐ: ์ ํน์ ์ผ ์ ์์ง๋ง, ํนํ ์ฌ๋ฌ ์์์ ๋์์ ๋๋ฌด ๋ง์ ๋ณต์กํ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ๋ ๊ฒ์ ํผํ์ธ์. ์๊ฐ์ ํ๋ถํจ๊ณผ ์ฑ๋ฅ ์ฌ์ด์ ๊ท ํ์ ์ฐพ์ผ์ธ์.
- ํ๋์จ์ด ๊ฐ์ ์ฌ์ฉํ๊ธฐ:
transform: translateZ(0)๊ณผ ๊ฐ์ ์์ฑ(ํ๋ ๋ธ๋ผ์ฐ์ ์transform์ ๋๋ฉ์ด์ ์์๋ ๋ช ์์ ์ผ๋ก ํ์ํ์ง ์์ ๊ฒฝ์ฐ๊ฐ ๋ง์)์ ๋๋๋ก ์์๋ฅผ ์์ฒด ๋ณตํฉ ๋ ์ด์ด๋ก ๊ฐ์ ํ์ฌ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
์ค์ ์์ ๋ฐ ์๊ฐ
์ดํด๋ฅผ ๋์ฑ ๊ณต๊ณ ํ ํ๊ณ ๋ค์ ํ๋ก์ ํธ์ ์๊ฐ์ ์ฃผ๊ธฐ ์ํด, animation-range์ ์ค์ ์ ์ฉ ์ฌ๋ก ๋ช ๊ฐ์ง๋ฅผ ๊ตฌ์ํด ๋ณด๊ฒ ์ต๋๋ค:
- ๊ธฐ์
์ฐ๋ก ๋ณด๊ณ ์: ์ฌ์ฉ์๊ฐ ๋ฌธ์๋ฅผ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ๊ธ์ต ์ฐจํธ๊ฐ ์ ๋๋ฉ์ด์
์ผ๋ก ๋ํ๋๊ณ , ํต์ฌ ์ฑ๊ณผ ์งํ(KPI)๊ฐ ์นด์ดํธ์
๋๋ฉฐ, ํ์ฌ ๋ง์ผ์คํค์ด ๋ฏธ๋ฌํ ์๊ฐ์ ์ ํธ๋ก ๊ฐ์กฐ๋๋ ์ํธ์์ฉ์ ์ธ ์ฐ๋ก ๋ณด๊ณ ์๋ฅผ ์์ํด๋ณด์ธ์. ๊ฐ ์น์
์ ์์ฒด์ ์ธ ํน์
animation-range๋ฅผ ๊ฐ์ง ์ ์์ด, ์๋ด๋ ๋ ์ ๊ฒฝํ์ ๋ง๋ญ๋๋ค. - ์ ํ ์ผ์ผ์ด์ค (์ ์ ์๊ฑฐ๋): ์๋ก์ด ๊ฐ์ ฏ์ ์ ํ ์์ธ ํ์ด์ง์์, ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ์ฃผ ์ ํ ์ด๋ฏธ์ง๊ฐ ์ฒ์ฒํ ํ์ ํ๊ฑฐ๋ ํ๋๋์ด ๊ธฐ๋ฅ์ด ๋จ๊ณ๋ณ๋ก ๋๋ฌ๋ ์ ์์ต๋๋ค. ์ก์ธ์๋ฆฌ ์ด๋ฏธ์ง๋ ์ค๋ช ์ด ๋ณด์ด๊ฒ ๋ ๋ ์์๋๋ก ๋ํ๋ ์ ์์ต๋๋ค. ์ด๋ ์ ์ ์ธ ํ์ด์ง๋ฅผ ๋์ ์ธ ํํ์ผ๋ก ๋ณํ์ํต๋๋ค.
- ๊ต์ก ์ฝํ ์ธ ํ๋ซํผ: ๋ณต์กํ ๊ณผํ ๊ฐ๋ ์ด๋ ์ญ์ฌ์ ํ์๋ผ์ธ์ ๊ฒฝ์ฐ, ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๊ณผ์ ์ ์ค๋ช ํ ์ ์์ต๋๋ค. ๋ค์ด์ด๊ทธ๋จ์ด ์กฐ๊ฐ๋ณ๋ก ๋ง๋ค์ด์ง๊ฑฐ๋, ์ญ์ฌ ์ง๋๊ฐ ๊ตฐ๋ ์ด๋์ ๋ณด์ฌ์ฃผ๋ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉ์์ ์คํฌ๋กค ๊น์ด์ ๋ง์ถฐ ๋๊ธฐํํ ์ ์์ต๋๋ค. ์ด๋ ์ดํด์ ๊ธฐ์ต์ ๋์ต๋๋ค.
- ์ด๋ฒคํธ ์น์ฌ์ดํธ: ์ถ์ ์น์ฌ์ดํธ๋ ์ํฐ์คํธ ์ฌ์ง๊ณผ ์ด๋ฆ์ด ํด๋น ์น์ ์ด ๋์ ๋๊ฒ ๋ ๋๋ง ์ ๋๋ฉ์ด์ ์ผ๋ก ๋ํ๋๋ "๋ผ์ธ์ ๊ณต๊ฐ"๋ฅผ ํน์ง์ผ๋ก ํ ์ ์์ต๋๋ค. ์ผ์ ์น์ ์ ์ฌ์ฉ์๊ฐ ์ง๋๊ฐ ๋ ํ์ฌ ์๊ฐ ์ฌ๋กฏ์ ๋ฏธ๋ฌํ ๋ฐฐ๊ฒฝ ๋ณ๊ฒฝ์ผ๋ก ๊ฐ์กฐํ ์ ์์ต๋๋ค.
- ์ํธ ํฌํธํด๋ฆฌ์ค: ์์ ๊ฐ๋ค์
animation-range๋ฅผ ์ฌ์ฉํ์ฌ ์์ ์ ์ํ์ ์ํ ๋ ํนํ ์ผ์ผ์ด์ค๋ฅผ ๋ง๋ค ์ ์์ผ๋ฉฐ, ๊ฐ ์ํ์ ์คํ์ผ์ ๋ง์ถฐ ๋ง์ถค ์ ์๋ ์ ๋๋ฉ์ด์ ์ผ๋ก ๊ณต๊ฐ๋์ด ๊ธฐ์ต์ ๋จ๊ณ ์์ ์ ์ธ ๋ธ๋ผ์ฐ์ง ๊ฒฝํ์ ๋ง๋ญ๋๋ค.
์ด๋ฌํ ์๋ค์ animation-range์ ๋ค์ฌ๋ค๋ฅํจ๊ณผ ํํ๋ ฅ์ ๊ฐ์กฐํฉ๋๋ค. ์คํฌ๋กค์ด ์ด๋ป๊ฒ ๋ด๋ฌํฐ๋ธ๋ฅผ ์ด๋๊ณ ์ฝํ
์ธ ๋ฅผ ๋๋ฌ๋ผ ์ ์๋์ง ์ฐฝ์์ ์ผ๋ก ์๊ฐํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ค์ ๋ถ๋น๋ ์จ๋ผ์ธ ํ๊ฒฝ์์ ๋๋ณด์ด๋ ์ง์ ์ผ๋ก ๋
ํนํ๊ณ ๋งค๋ ฅ์ ์ธ ๋์งํธ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
๊ฒฐ๋ก
animation-timeline๊ณผ ํจ๊ป CSS Animation Range๋ ์์ ์น ์ ๋๋ฉ์ด์
๊ธฐ๋ฅ์์ ์ค์ํ ๋ฐ์ ์ ์๋ฏธํฉ๋๋ค. ์ด๊ฒ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ์คํฌ๋กค ๊ธฐ๋ฐ ํจ๊ณผ์ ๋ํ ์ ๋ก ์๋ ์์ค์ ์ ์ธ์ ์ ์ด๋ฅผ ์ ๊ณตํ๋ฉฐ, ์ ๊ตํ ์ํธ์์ฉ์ ๋ณต์กํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์ญ์์ ๋ ์ฑ๋ฅ์ด ์ข๊ณ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ ์์ CSS์ ์์ญ์ผ๋ก ์ด๋์ํต๋๋ค.
์คํฌ๋กค ํ์๋ผ์ธ์์ ์ ๋๋ฉ์ด์ ์ ์์์ ๊ณผ ๋์ ์ ์ ๋ฐํ๊ฒ ์ ์ํจ์ผ๋ก์จ, ์จ๋งํ๋ ํจ๋ด๋์ค ํจ๊ณผ, ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ๊ณต๊ฐ, ๋์ ์งํ๋ฅ ํ์๊ธฐ, ๊ทธ๋ฆฌ๊ณ ๋ณต์กํ ๋ค๋จ๊ณ ๋ด๋ฌํฐ๋ธ๋ฅผ ์กฐ์จํ ์ ์์ต๋๋ค. ์ฑ๋ฅ์์ ์ด์ ๊ณผ CSS ๋ค์ดํฐ๋ธ ์๋ฃจ์ ์ ์ฐ์ํจ์ด ๊ฒฐํฉ๋์ด, ์ด๊ฒ์ ๋ชจ๋ ๊ฐ๋ฐ์์ ํดํท์ ๊ฐ๋ ฅํ ์ถ๊ฐ ๊ธฐ๋ฅ์ด ๋ฉ๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์์ด ์์ง ํตํฉ๋๋ ๊ณผ์ ์ ์์ง๋ง, ์ ์ง์ ํฅ์ ์ ๋ต์ ํตํด ์ค๋๋ ๋ถํฐ ์ด๋ฌํ ๊ธฐ๋ฅ์ ์คํํ๊ณ ๊ตฌํํ์ฌ ํ๋ ๋ธ๋ผ์ฐ์ ์ฌ์ฉ์์๊ฒ๋ ์ต์ฒจ๋จ ๊ฒฝํ์ ์ ๊ณตํ๊ณ ๋ค๋ฅธ ์ฌ์ฉ์์๊ฒ๋ ์ฐ์ํ๊ฒ ํด๋ฐฑํ ์ ์์ต๋๋ค.
์น์ ๋์์์ด ์งํํ๋ ์บ๋ฒ์ค์ ๋๋ค. CSS Animation Range๋ฅผ ๋ฐ์๋ค์ฌ ๋ ํ๊ธฐ์ฐจ๊ณ , ์ํธ์์ฉ์ ์ด๋ฉฐ, ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทธ๋ ค๋ณด์ธ์. ์คํ์ ์์ํ๊ณ , ๋๋ผ์ด ๊ฒ๋ค์ ๋ง๋ค๋ฉฐ, ๋ชจ๋๋ฅผ ์ํ ๋ ์ญ๋์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ๋์งํธ ์ธ๊ณ์ ๊ธฐ์ฌํ์ธ์.