묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
go live 실시간 크롬
vs code 에서 go live 를 실행하며 코드를 수정할 때 실시간으로 chrome 에서 상태가 변하지 않습니다.f5 를 누르면 새로운 chrome 창이 뜨면서 수정된 코드 상태를 보여주는데 강의 영상처럼 보고 있는 chrome 창을 유지하면서 실시간으로 확인하려면 어떻게 해야하나요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
반응형에 대해 질문이 있습니다 !
안녕하세요 깡코딩님, 다름이 아니라 모바일 뿐만아니라 pc도 반응형이 필요할텐데 맥북프로같은 경우는 해상도가 크더라구요 ..이럴경우 처음부터 크게 작업하고 미디어 쿼리로 점점 작게 진행해야하는걸까요???1920까지만 신경쓰고 최소로 280까지만 신경썼는데 이렇게 큰게 나오니 또 조정을 해야하나 싶습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm start 오류
계속 이렇게 오류가 떠서 캐시 지워서 해보고 다시 설치도 해보고 명령어도 입력해봐도 해결이 안되네요 ㅜㅜ뭐가 문제일까요..
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
renderGame 함수에 로그를 찍으면 무한루프가 돕니다
window.requestAnimationFrame 에서 계속 호출을 하고 있어서 그런 것 같은데스위치를 만들어야 할까요?
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검이 날아가지 않습니다
const renderGame에서 keyMotion()까지는 작동을 하는데그 이후 forEach부분부터는 작동하지 않는것같습니다, 왜이럴까요?오타도 없고 아무이상없습니다!혹시 window.requestAnimationFrame이 너무 빨라서 bulletComProp foreach가 씹히는걸까요? ㅠㅠ... 코드 보내드립니다<game.js> const renderGame = () => { hero.keyMotion(); bulletComProp.arr.forEach((arr,i)=>{ arr.moveBullet(); }) window.requestAnimationFrame(renderGame); } <class.js> if(key.keyDown['attack']){ this.el.classList.add('attack'); bulletComProp.arr.push(new Bullet()); } class Bullet { constructor(){ this.parentNode = document.querySelector(".game"); this.el = document.createElement("div"); this.el.className = "hero_bullet"; this.x = 0; this.y = 0; this.speed = 30; this.distance = 0; this.init(); } init(){ this.x = hero.position().left + hero.size().width/2; this.y = hero.position().bottom - hero.size().height/2; this.el.style.transform = `translate(${this.x}px, ${this.y}px)`; this.parentNode.appendChild(this.el); } moveBullet(){ this.distance += this.speed; this.el.style.transform = `translate(${this.distance}px, 100)`; this.el.style.backgroundColor = 'red'; } }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
scene에 camera add는 꼭 필요한 건가요?
renderer에서 camera를 render 해주는데, scene에 add가 꼭 필요한건지 궁금해요!scene.add(camera) 를 지웠을 때도 에러메세지 없이 잘 작동이 되는 것 같은데 필요한 코드인가요?만약 필요한 코드라면, scene에 add 된 light와 mesh는 왜 따로 render을 해주지 않는건가요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
css가 연결이 안되요 ㅜㅜ
사용방법 3 듣는중인데요 main.css를 연결하려고 하는데 저렇게 뜨는데 무슨 문제일까요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
강사님 vscode 폰트와 색상이 뭔가요
폰트와 폰트 색상이 예뻐서 그러는데어떤거 사용 하나요?그리고 vscode 다크모드에서도 폰트 색상이 동일하게 적용 되나요?키보드 정보도 알고 싶습니다
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
2:20분 이해가 가지 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; background: coral; transition: 1s; } body { margin: 0; } .box-action { transform: translateX(300px); background: blue; } </style> </head> <body> <div class="box"></div> <script> const box = document.querySelector(".box"); box.addEventListener("click", () => { box.classList.toggle("box-action"); }); </script> </body> </html> 안녕하세요 강사님.toggle 해서 클릭 하면 상자가 300px 인 곳으로 이동하는 건 이해 하였는데, 다시 클릭 하면 왜 기존의 위치로 가는건가요? css에서는 가로 세로 100px 이라고만 했는데....이해가 가지 않습니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
ScrollTrigger의 end와 toggleClass
안녕하세요, 선생님.섹션2 Advanced Trigger - practice 예제에서fixedHeader() 함수를 통해 헤더가 pin되어 start 지점부터 fixed 처리가 되잖아요~이와 동시에 fixed 될 때 특정 클래스(toggleClass : "active")를 넣어서 스타일을 다르게 주려고 했거든요.그런데 end 마지막 지점에 스크롤이 닿으면 fixed는 되어있지만 class는 사라지더라고요.혹시 다른 방법이 있을까요? function fixedHeader(){ ScrollTrigger.create({ trigger: '.nav_container', start: 'top top', // endTrigger:'.footer', end: 'max', pin: true, pinSpacing: false, toggleClass : "active" }) }
-
미해결BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
React에도 적용 가능한가요?
질문은 제목 그대로 입니다 선생님.다 배우면 이것을 React 프로젝트에도 적용이 가능한지 궁금합니다. 좋은 강의를 무료로 베풀어주셔서 감사합니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
Text Effects(2)는 Text Effects(1)영상에 포함돼있는 것 같아요!
Text Effects(1) 의 11분~ 하고 내용이 같아요😄
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
안녕하세요 선생님,같은 방식으로 날짜 대신 오늘 시간까지 "시간"이 롤링되며 카운팅되는 효과로 적용해볼 수 있을까요??
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
nav위에 마우스를 올리면 스크롤이 안돼요 😢
질문1)nav위에서 스크롤이 안되는거랑 nav에 스크롤바가 가려지는걸 해결하고싶어서 컨테이너 안에 요소를 넣었는데 당연하게도 fixed가 안되더라구요😢 고민하다가 마커스위치 셋팅과 같은 방식으로 고정 하면 될것같아서 markers함수 안에gsap.set(nav, { marginTop: offset.y });요렇게 추가해줬는데 스무스스크롤바를 사용할때 fixed는이렇게 하는게 맞을까요?질문2)파트3은 특히나 강의 소리가 작은데 혹시 키워주실 수 있으신가요? 😢
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
SplitText를 순수 자바스크립트로 써봤어요
// const { chars } = new SplitText('.stage h1', { type: 'chars' }); function splitTextChars(elem) { const textElem = document.querySelector(elem); const letters = textElem.textContent.split(''); let newHTML = ''; letters.forEach(letter => { newHTML += /* HTML */ ` <div style="position:relative; display:inline-block">${letter}</div>`; }); textElem.innerHTML = newHTML; return [...document.querySelectorAll(`${elem} div`)]; } const chars = splitTextChars('.stage h1');복습중에 유료플러그인이나 라이브러리 없이 써보고싶어서 만들어봤습니다 ! 맞는 코드인지는 모르겠지만 혹시 참고하실분이 계실까 싶어 남겨둘게요 !ㅎㅎ
-
미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
슬라이드 안 find out more 버튼 위치관련
강사님, 안녕하세요.슬라이드 안 find out more 버튼 스크롤 애니메이션이,가운데 정렬로 올라가는게 아니라, 오른쪽으로 치우쳐있다 가운데로 올라갑니다. css에선 left:50%; 되어 있던데 왜 그럴까요??(올려놓으신 수업 파일도 똑같은 현상입니다.)
-
미해결인터랙티브 웹 개발 제대로 시작하기
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
강좌섹션, 전진! 3D 스크롤 11(5:49) 에서 mousePos 공식 어떻게 나오게 됐는지궁금해 문의 드립니다! mousePos.x = -1 + (e.clientX / window.innerWidth) * 2;mousePos.y = 1 - (e.clientY / window.innerHeight) * 2;이왕 코드 다 작성하고 이해하는 중에,해당 부분도 이해하고 싶어 문의 드립니다 e.clientX(e.clientY) / window.innerWidth(window.innerHeight)브라우저( window.innerWidth , window.innerHeight ) 가로 세로 기준으로현재 마우스 위치(e.clientX/e.clientY)가 어디인지 구하는 수식으로 이해했습니다. mousePos.x = -1 + ..중략.. * 2; mousePos.y = 1 - ..중략.. * 2;그리고 -1과 1은 결과 반환값으로, -1과 1로 나오기 위해서 지정한 것으로 추측되구요,그 이외에- 하는 것, + 하는 것, * 2 하는 것은 어떤 이유에서 만들어진건지 궁금합니다!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
스크롤 페이지 만들기 -땅과 집 색상이 너무 어둡습니다.
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님. 강의 따라하다가 색상이 너무 이상해서 문의드립니다. 제가 따라한 코드가 이상한 건가 싶어서 완성파일 main.js를 실행했는데 똑같이 색상이 이상합니다. 수정방향을 알려주시면 감사하겠습니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
.left는 quickTo를 쓰지 않는 이유
.left도 지속적으로 x를 호출하니 quickTo를 쓰면 더 좋지않을까 라고 생각했는데 .left는 to로 컨트롤하시는 이유가 있을까요?quickTo의 기본값이 픽셀이라 퍼센트 넣으면 동작이 이상해지던데 혹시 이런 이유일까요?!
