Smooth Reveal Examples

Scroll Reveal Example

IntersectionObserver와 μ •κ΅ν•œ cubic-bezier λͺ¨μ…˜μ„ κ²°ν•©ν•˜μ—¬, μŠ€ν¬λ‘€μ„ 내릴 λ•Œλ§ˆλ‹€ μš”μ†Œλ“€μ΄ λΆ€λ“œλŸ½κ²Œ 감기며 μ˜¬λΌμ˜€λŠ” 효과λ₯Ό κ΅¬ν˜„ν•œ μ˜ˆμ œμž…λ‹ˆλ‹€.

01. Intersection Observer

뷰포트(Viewport) μ˜μ—­μ— μš”μ†Œκ°€ λ“€μ–΄μ˜€λŠ” μˆœκ°„μ„ μ •κ΅ν•˜κ²Œ κ°μ§€ν•˜μ—¬ 클래슀λ₯Ό λΆ€μ—¬ν•©λ‹ˆλ‹€. 슀크둀 이벀트λ₯Ό 맀번 κ³„μ‚°ν•˜μ§€ μ•Šμ•„ μ„±λŠ₯이 λ›°μ–΄λ‚©λ‹ˆλ‹€.

02. Cubic Bezier Motion

λ‹¨μˆœν•œ λ¦¬λ‹ˆμ–΄(Linear) μ• λ‹ˆλ©”μ΄μ…˜ λŒ€μ‹  μ»€μŠ€ν…€ 베지에 곑선을 μ μš©ν•˜μ—¬, μ‹œμž‘μ€ λ¬΅μ§ν•˜κ³  끝은 λΆ€λ“œλŸ½κ²Œ κ°κΈ°λŠ” κ³ κΈ‰ λΈŒλžœλ“œ μ‚¬μ΄νŠΈ ν•„ν„° 효과λ₯Ό κ΅¬ν˜„ν•©λ‹ˆλ‹€.

03. Mutation Observer

λΉ„λ™κΈ°λ‘œ λ‚˜μ€‘μ— κ·Έλ €μ§€λŠ” DOM μš”μ†ŒκΉŒμ§€ μ‹€μ‹œκ°„μœΌλ‘œ μΆ”μ ν•˜μ—¬ λ™μΌν•œ 슀크둀 λ“±μž₯ 효과λ₯Ό μžλ™μœΌλ‘œ λΆ€μ—¬ν•©λ‹ˆλ‹€. SPA ν™˜κ²½μ— μ™„λ²½ν•˜κ²Œ λŒ€μ‘ν•©λ‹ˆλ‹€.

04. Flexible Utility

μ›ν•˜λŠ” μš”μ†Œμ— λ‹¨μˆœνžˆ .scroll-reveal 클래슀만 λΆ€μ—¬ν•˜λ©΄ μ–΄λ–€ μ»΄ν¬λ„ŒνŠΈλ“  μ¦‰μ‹œ 생동감 μžˆλŠ” λͺ¨μ…˜μ„ νšλ“ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

↓ 슀크둀 끝! λΆ€λ“œλŸ¬μš΄ μ „ν™˜ 효과λ₯Ό λ‹€μ‹œ 보렀면 μƒˆλ‘œκ³ μΉ¨(F5)을 ν•΄λ³΄μ„Έμš”.