๋ช ์ค๋ก ๋๋ด๋ ์ธํฐ๋ํฐ๋ธ ์น ๊ฐ๋ฐ ๋ ธํ์ฐ [์ด๊ธํธ]
์งง์ ์๊ฐ์ ์ค๋ฌด์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ์ธํฐ๋ํฐ๋ธ ์คํฌ์ ์๋ ค๋๋ฆฝ๋๋ค.
์๊ฐ์ 1,749๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ํด๊ฒฐ
mouse position interpolation๊ณผ transition linear interpolation์ ์ฐจ์ด
targetX += (x - targetX) * speed; targetY += (y - targetY) * speed;์ด ์ฝ๋๊ฐ ๋งค๋ฒ ๋ง์ฐ์ค๊ฐ ์์ง์ผ ๋๋ง๋ค ๋ณด๊ฐ์ ๊ตฌํ๋ ๊ฑฐ
javascript์ธํฐ๋ํฐ๋ธ-์นSuperDuper
ใป
ํ ๋ฌ ์
0
53
1
- ๋ฏธํด๊ฒฐ
mousemove ์ ๋ฐ๋ผ ๋ค๋๋ ์ปค์ ์ด๋ฏธ์ง wheel ํ ๊ฒฝ์ฐ
์ปค์๋ฅผ ๋ฐ๋ผ๋ค๋๋ ๋๋น ํ๋ฉด์์ mousemove ์ด๋ฒคํธ์๋ง ์ปค์๊ฐ ์์ง์ด๊ณ ,๋ง์ฐ์คํ (wheel ์ด๋ฒคํธ)์ ํ ๊ฒฝ์ฐ์๋ ๋๋น ์ด๋ฏธ์ง๊ฐ ์์ง์ด์ง ์์๋๋ต ์๋์ ๊ฐ์ด ํจํด์ผ๋ก ๋ง์ฐ์ค ํ ์ ๊ฒฝ์ฐ์๋ ์์ง์์ ์ถ๊ฐํด ๋ดค์ต๋๋ค.<p
javascript์ธํฐ๋ํฐ๋ธ-์นoskim7832
ใป
0
152
2
- ๋ฏธํด๊ฒฐ
๋ถ๋๋ฌ์ด ์์ง์ ๊ตฌํ1 ๊ฐ์ ๋ถ๋ถ ์ง๋ฌธ์์ต๋๋ค.
์๋ ํ์ธ์ ํ์ฌ ๊ฐ์์์ let x = 0; let y = 0; let targetX = 0; let targetY = 0; let speed = 0.03;์ด
javascript์ธํฐ๋ํฐ๋ธ-์น๋ถ๋๋ฌ์ด ์กฑ์ ๋น
ใป
0
139
2
- ๋ฏธํด๊ฒฐ
go live ์ค์๊ฐ ํฌ๋กฌ
vs code ์์ go live ๋ฅผ ์คํํ๋ฉฐ ์ฝ๋๋ฅผ ์์ ํ ๋ ์ค์๊ฐ์ผ๋ก chrome ์์ ์ํ๊ฐ ๋ณํ์ง ์์ต๋๋ค.f5 ๋ฅผ ๋๋ฅด๋ฉด ์๋ก์ด chrome ์ฐฝ์ด ๋จ๋ฉด์ ์์ ๋ ์ฝ๋ ์ํ๋ฅผ ๋ณด์ฌ์ฃผ๋๋ฐ ๊ฐ์ ์์์ฒ๋ผ ๋ณด๊ณ ์๋ chrome ์ฐฝ์ ์ ์งํ๋ฉด์ ์ค์๊ฐ์ผ๋ก ํ์ธํ๋ ค๋ฉด
javascript์ธํฐ๋ํฐ๋ธ-์นrntpfu
ใป
0
308
1
- ํด๊ฒฐ
javascript ๋์๋ง vsCode ํ์ฅํฉ ๋ฌธ์!
์๋ ํ์ธ์~ javascript ์ฝ๋ ์์ฑํ์ค ๋, ์์๋๋ ์ฝ๋ ๋์๋ง? ํดํ? ์ฒ๋ผ ๋์ค๋ ๊ธฐ๋ฅ์ ์ด๋ค ํ์ฅํฉ์ ์ฌ์ฉํ์๋์ง ๊ถ๊ธํฉ๋๋ค!
javascript์ธํฐ๋ํฐ๋ธ-์นhweejin_cha
ใป
0
356
1
- ๋ฏธํด๊ฒฐ
๋ธ๋ก๊ทธ ์๋จ ํ๋ด๋ ์ค ํจ๊ณผ ๊ตฌํ ์ง๋ฌธ ์์ต๋๋ค!
์ฌ๊ธฐ์ coverWrap.style.backgroundPosition์ ๋ณ๊ฒฝํด์ฃผ๋๋ฐ ๊ธฐ์กด ์ค์ ์ด cente
javascript์ธํฐ๋ํฐ๋ธ-์นkis9732
ใป
0
348
1
- ๋ฏธํด๊ฒฐ
๋ง์ฐ์ค ์ธํฐ๋ ํฐ๋ธ ๋ณํ ์ง๋ฌธ
์๋ ํ์ธ์. ๋ง์ฐ์ค ์ธํฐ๋ ํฐ๋ธ๋ฅผ ํ๋ค๊ฐ transition: ease-in-out ๊ถ๊ธ์ฆ์ด ์๊ฒผ์ต๋๋ค!๋ง์ฐ์ค์ ๊ถค์ ์ ๋ฐ๋ผ์ ์ด๋ฏธ์ง๊ฐ ์์์ฒ๋ผ ๋์ด๋๋ ๊ฒ์ผ๋ก ๋ณด์ด๊ฒ ํ๊ณ ์ถ์ด์ circle๋ณด๋ค ์์ ํฌ๊ธฐ์ ๋ํ์ ๋ง๋ค์ด ease in out ์ ์ด
javascript์ธํฐ๋ํฐ๋ธ-์นhozong99
ใป
0
331
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์. ์์ ์ ๋ฃ๊ณ ์์ต๋๋ค. ํฌํธํด๋ฆฌ์ค ๊ด๋ จ ์ง๋ฌธ๋ ๊ฐ๋ฅํ ๊น์?
์๊ฐ์ค์ธ๋ฐ ๋ฆฌ๋ด์ผ ๋๊ณ ๊ต์ฅํ ๊น๋ํด์ง ๊ฒ ๊ฐ์ ๋๋ ๋ฐ์ต๋๋ค!ํน์ ํฌํธํด๋ฆฌ์ค ํ์ด์ง๋ AWS๋ก ์ด์ ์ค ์ด์ ๊ฑธ๊น์?์๋๋ผ๋ฉด ์ด๋ค๊ฑธ๋ก ํ๊ณ ๊ณ์ ์ง ๊ถ๊ธํฉ๋๋ค!
javascript์ธํฐ๋ํฐ๋ธ-์น์ฆ๋
ใป
0
389
1
- ํด๊ฒฐ
๋๋น๊ฐ ๋ฒํผ์๋ก์ฌ๋ผ๊ฐ๋ฉด ๋ฒํผ์ hover๊ธฐ๋ฅ์ด ๋ฉ์ถฐ๋ฒ๋ ค์
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
javascript์ธํฐ๋ํฐ๋ธ-์นGyeongdeok PARK
ใป
0
330
1
- ๋ฏธํด๊ฒฐ
perspective์ ๋ํด์
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
javascript์ธํฐ๋ํฐ๋ธ-์นoridori2705
ใป
0
278
1
- ๋ฏธํด๊ฒฐ
CSS์์ ๊ถ๊ธํ๋ ๋ถ๋ถ -์ค์ ํ๋ด๋ ์ค ๊ฐ์ ๋ถ๋ถ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
javascript์ธํฐ๋ํฐ๋ธ-์นoridori2705
ใป
0
464
1
- ๋ฏธํด๊ฒฐ
requestAnimationFrame ์ง๋ฌธ
์ ์๋ ์ด๊ฑฐ ์ฌ์ฉํ๋ฉด์ ์์น๊ฐ ๊ณ์ ์ ๋ฐ์ดํธํด์ฃผ๋๊ฑธ๋ก ์๋๋ฐ ์ด๊ฑธ ์ฌ์ฉํด์ ๊ทธ๋ฌ์ง๋ ๋ชฐ๋ผ๋๊ทธ ๋ฒํผ์์ ์ฌ๋ฆฌ๋ฉด ์ข ํฌ๊ธฐ๊ฐ ๋์ค์ ๋ณํ๋๋๋ฐ ์ด๊ฒ ์ฐ์ฐ์ ๊ณ์ํด์ ์ด๋ฐ๋ฌธ์ ๊ฐ ๋ฐ์ ํ ์๋ ์๋์?
javascript์ธํฐ๋ํฐ๋ธ-์นuphoon
ใป
0
359
1
- ํด๊ฒฐ
๋ฆฌ๋ด์ผ ์ด์ ๊ฐ์ ํ์ผ
์๋ ํ์ธ์!๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค! ์ด๋ฒ์ ๊ฐ์๊ฐ ๋ฆฌ๋ด์ผ๋๋ฉด์๋ฆฌ๋ด์ผ ๋๊ธฐ ์ด์ ์ ๊ฐ์ ์์๊ณผ ํ์ผ์ด ์ฌ๋ผ์ ธ์๋๋ฐ์ด์ ๊ฐ์ ํ์ผ์ด ํ์ํ๋ฐ ํน์ ์ด์ ๊ฐ์ ํ์ผ์ ์ด๋์ ๋ฐ์ ์ ์์๊น์..? ใ 3ใ
javascript์ธํฐ๋ํฐ๋ธ-์น์์ฑ์ ์์
ใป
0
438
1
- ๋ฏธํด๊ฒฐ
์ฝ๋๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ก ๋ณด์ฌ์ฃผ๋ ํ์ฅํ๋ก๊ทธ๋จ์ด ๋ญ๊ฐ์?
์ฝ๋๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ก ๋ณด์ฌ์ฃผ๋ ํ์ฅํ๋ก๊ทธ๋จ์ด ๋ญ๊ฐ์?
javascript์ธํฐ๋ํฐ๋ธ-์น์น์ฆ๋ผ๋ผ
ใป
0
741
1
- ๋ฏธํด๊ฒฐ
์์ ํ์ผ ๋ถํ๋๋ฆฝ๋๋ค~
์๋ ํ์ธ์์์ ์๋ฃ๋ฅผ ๋ฐ์๋ณผ ์ ์์๊น์?์ค๋ฌดํธ์ ์๋ฃ๊ฐ ์๋๋ฐ ์ด๊ธํธ์ ์๋ค์ ใ ใ <a target="_blank" rel="noopener noreferrer nofollow" href="mailto:dbtkdgml91@g
javascript์ธํฐ๋ํฐ๋ธ-์น์ธํฐ๋ํฐ๋ธ-์นํ ๋งํ
ใป
0
318
1
- ๋ฏธํด๊ฒฐ
๋ฐฐ๊ฒฝ์ง๋ฌธ
๋ฐฐ๊ฒฝ์ ์ ๋์ ์ ์ด๋ฏธ์ง ๋ฃ์ ์ ์๋๊ฑฐ์ฃ ?
javascript์ธํฐ๋ํฐ๋ธ-์น์ธํฐ๋ํฐ๋ธ-์น๋ฐ์ฑ์ฐ
ใป
0
346
1
- ๋ฏธํด๊ฒฐ
textWrap์ position์ relative๋ก ์ฃผ๋ ๊ฒ์ ๋ํด ์ง๋ฌธ์์ต๋๋ค!
์๋ ํ์ธ์ ์ ์๋! ํด๋น ์ฝ๋๋ฅผ ๋ฆฌ์กํธ๋ก ๋ง๋๋๋ฐ ์์ด css์ ๊ดํ ์๋ฌธ์ ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค!textWrap์ position์ relative๋ก ๋ถ์ฌํด์ผ๋ง textWrap ์น์ ์์ ์๋ ๊ธ์ด ๋ณด์ด๋๋ฐ ์ relatvie ์์ฑ์ ๋ถ์ฌ
javascript์ธํฐ๋ํฐ๋ธ-์น๊น์์ฐฌ
ใป
0
280
1
- ๋ฏธํด๊ฒฐ
safari์์ position fixed๊ฐ ์ ๋์ํ์ง ์์ต๋๋ค
์๋ ํ์ธ์? ์ค๋ ์๊ฐํ๊ณ ์ฌ๋ ค์ฃผ์ ์์ ํ์ผ์ safari, chrome ๊ฐ ๊ฐ ์คํํด๋ดค๋๋ฐ์. ํฌ๋กฌ์์๋ ์ ๋์ํ๋๋ฐsafari๋ position์ด ์ ๋์ํ์ง ์๋๊ฑฐ ๊ฐ์์์. (text container๊ฐ ๋ฐฐ๊ฒฝ๋ค์์ ์ฌ๋ผ์ด)์ฌํ๋ฆฌ์
์ธํฐ๋ํฐ๋ธ-์นjavascriptpartner
ใป
0
972
1
- ๋ฏธํด๊ฒฐ
addEventListenerํ์ ์ต๋ช ํจ์ ์คํํ ๋ ๋ค์ false๋ ์ด๋ค ์ญํ ์ ํ๋๊ฑด๊ฐ์?
window.addEventListener('scroll', function() {alert('๊ถ๊ธํด์');}, false); 1. ์์ false๋ ์ด๋ค ์ฉ๋๋ก ์ฐ์ด๋๊ฑด๊ฐ์?์
javascript์ธํฐ๋ํฐ๋ธ-์นpartner
ใป
0
552
1
- ๋ฏธํด๊ฒฐ
์คํผ๋ ๋ณ์๋ก scrollTop์ ๋๋ ์ด์ ๊ฐ ๋ฌด์์ธ๊ฐ์?
parallax_0.style.transform = "translate3d(0px ," + scrollTop * 0.2 + "px , 0px)"; parallax_1.style.transform = "tra
์ธํฐ๋ํฐ๋ธ-์นjavascriptbillaa
ใป
0
355
1






