์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์›น ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์œ„ํ•œ GSAP ๊ฐ€์ด๋“œ Part.01

GSAP์„ ํ†ตํ•ด ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น ๊ฐœ๋ฐœ์— ํ•œ ๋‹จ๊ณ„ ๋‹ค๊ฐ€๊ฐˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋ณด๋Š” ๊ด€์ ์ด ๋‹ฌ๋ผ์งˆ ๊ฒ๋‹ˆ๋‹ค.

(5.0) ์ˆ˜๊ฐ•ํ‰ 66๊ฐœ

์ˆ˜๊ฐ•์ƒ 660๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

ํ”„๋ก ํŠธ์—”๋“œ
ํ”„๋ก ํŠธ์—”๋“œ
front-end
front-end
์• ๋‹ˆ๋ฉ”์ด์…˜
์• ๋‹ˆ๋ฉ”์ด์…˜
ํ”„๋ก ํŠธ์—”๋“œ
ํ”„๋ก ํŠธ์—”๋“œ
front-end
front-end
์• ๋‹ˆ๋ฉ”์ด์…˜
์• ๋‹ˆ๋ฉ”์ด์…˜

์ƒˆ์†Œ์‹

1 ๊ฐœ

  • ๋ฒ”์Œค๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์•ˆ๋…•ํ•˜์„ธ์š” ์ˆ˜๊ฐ•์ƒ ์—ฌ๋Ÿฌ๋ถ„ :)

    ๐ŸŽ‰ ๋“œ๋””์–ด ํŒŒํŠธ3 ScrollTrigger ๊ฐ•์˜๊ฐ€ ์˜คํ”ˆํ–ˆ์Šต๋‹ˆ๋‹ค ๐ŸŽ‰

     

    ํŒŒํŠธ3 ๊ฐ•์˜์—์„œ๋Š” ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜์— ๋Œ€ํ•œ ๋งŽ์€ ๋‚ด์šฉ๋“ค์„ GSAP์œผ๋กœ ์ปจํŠธ๋กคํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

    • ScrollTrigger ์‚ฌ์šฉ๋ฒ•

    • scroll animation ์ปจํŠธ๋กค ๋ฐฉ๋ฒ•

    • gsap plugin + scrollTrigger

    • ๋ถ€๋“œ๋Ÿฌ์šด ์Šคํฌ๋กค๋ง(smooth scroll)๊ณผ ScrollTrigger์˜ ์—ฐ๋™

    • SPA (single page application) ๋ฅผ ์‚ฌ์šฉํ•œ ๋ถ€๋“œ๋Ÿฌ์šด ํ™”๋ฉด ์ „ํ™˜ (barba.js)

    • ๋ฐ˜์‘ํ˜• ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ปจํŠธ๋กค

    • ๋™์ž‘์ค„์ด๊ธฐ(์ ‘๊ทผ์„ฑ) ๋ฅผ ์‚ฌ์šฉํ•œ ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‚ฌ์šฉ์ž ์ œ์–ด

     

    ๋งŽ์€ ๋‚ด์šฉ๋“ค์„ ๋‹ด๋‹ค๋ณด๋‹ˆ ๋ฌด๋ ค 13์‹œ๊ฐ„ 38๋ถ„ ์งœ๋ฆฌ ๊ฐ•์˜๊ฐ€ ๋์–ด์š” ๐Ÿฅน

    ์ด๋ฒˆ ํŒŒํŠธ3 ๊ฐ•์˜๋Š” ๊ฐ•์˜ ์˜คํ”ˆ ํ• ์ธ(30%) ์ผ์ฃผ์ผ๋งŒ ์ง„ํ–‰๋˜๋Š”์  ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”

    image(์ด๋ชจํ‹ฐ์ฝ˜์€ ํ”„๋ก ํŠธ์—”๋“œ ๋ถ€ํŠธ์บ ํ”„ 6๊ธฐ ์กธ์—…์ƒ ๊น€๋‹ค์—ฐ๋‹˜๊ป˜์„œ ๋งŒ๋“ค์–ด์ฃผ์…จ์Šต๋‹ˆ๋‹ค โ˜บ๏ธ)

     

    ํŒŒํŠธ3 ๊ฐ•์˜ ๋งŽ๊ด€๋ถ€ ๐Ÿ˜

     


    0

โ‚ฉ44,000