์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

๋ถ€๋“œ๋Ÿฌ์šด ์ „์ฒด ์Šคํฌ๋กค ์„ค์น˜(Lenis)

Project Log

by loeybho 2024. 6. 4. 20:31

๋ณธ๋ฌธ

๊ณต๋ถ€ ๊ณ„๊ธฐ ๐Ÿ“š

https://lenis.darkroom.engineering/

 

Lenis๋ฅผ ์ด์šฉํ•˜์—ฌ ํฌํŠธํด๋ฆฌ์˜ค์— ๋ถ€๋“œ๋Ÿฌ์šด ์ „์ฒด ์Šคํฌ๋กค์„ ์„ค์น˜ํ•ด๋ณด์ž. 

- ๋ถ€๋“œ๋Ÿฝ๊ณ , ์พŒ์ ํ•œ ๊ฒฝํ—˜์„ ์ œ๊ณต
- ์‹œ๊ฐ์ ์ธ ์ธ์ƒ์„ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค.

 

 

ํ™œ์šฉ ์˜ˆ์‹œ ๐Ÿช„

์„ค์น˜ ๋ฐฉ๋ฒ•์€ ๊ต‰์žฅํžˆ ์‹ฌํ”Œํ•˜๋‹ค.

1. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜

npm i lenis

 

 

2. ๊ด€๋ จ ์ฝ”๋“œ๋ฅผ ๋ฉ”์ธ์— ๋„ฃ๊ธฐ

const lenis = new Lenis()

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

 

 

 


 

 

์š”์ฆ˜ ์˜์ƒ์œผ๋กœ ๊ฐœ๋ฐœ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ๋ง‰์—ฐํžˆ ์ฝ๋Š” ๊ฒƒ๋ณด๋‹ค ํ™•์‹คํžˆ ํšจ๊ณผ๊ฐ€ ์ข‹๋‹ค. ๋‚˜์™€ ํ•์ด ๋งž๋Š” ์„ ์ƒ๋‹˜์„ ์ฐพ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

 

์˜์ƒ + ์ฝ๊ธฐ + ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์„ ์ž˜ ๋ฒ„๋ฌด๋ฆฌ๋ฉฐ ํ•ด๋‚˜๊ฐ€๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

 

์น˜์šฐ์น˜์ง€ ์•Š๊ณ  ๊พธ์ค€ํžˆ

๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ