묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
video 크기
안녕하세요.위 화면처럼 contents부분의 들어간 video가 옆에 세로 스크롤이 생깁니다.처음엔 가로, 세로 스크롤이 다 생겨서 다시했더니 이번엔 세로 스크롤이 생기네요.강의를 더 가면 object-fit: cover;로 맞추던데.. 그렇게 해도 스크롤은 사라지지 않아요.지금은 우선 여기까지 진도를 나갔지만..처음 진도를 나갈땐 visual title의 font-size: 70px;도 먹지않아 글씨가 작았는데....왜 그럴까요?
-
해결됨JavaScript로 배우는 fullPage + anime + SVG Animation 포트폴리오
스크롤링
Fullpage 를 사용할때요예를 들어 섹션 0,1,2,...이렇게 있을때, 만약 섹션1에 갔을때만 Fullpage의 스크롤링을 막을수는 없는지요? 해당하는 섹션에서 모달을 띄운다 했는때 그안에서의 긴 컨텐츠를 스크롤하는 동안은 섹션1 전체의 스크롤은 안움직이게 할수 있나 해서요
-
해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
javascript 도움말 vsCode 확장팩 문의!
안녕하세요~ javascript 코드 작성하실 때, 예상되는 코드 도움말? 툴팁? 처럼 나오는 기능은 어떤 확장팩을 사용하시는지 궁금합니다!
-
해결됨애플 웹사이트 인터랙션 클론!
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
안녕하세요,유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,해당 강좌를 시청하며 2가지 문의사항이 있습니다.감사합니다! #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
수업자료 오류
안녕하세요.수업자료 다운시 내용이 없습니다.압축폴더가 올바르지 않다며 풀리지도 않습니다.jaja29@naver.com으로 보내주실 수 있을까요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션12 보너스 챕터에 관한 질문입니다!
섹션12에서 텍스트가 나타나고 사라지는 인터렉션에서 처음 텍스트를 스크롤 하지 않고 처음 텍스트만 보이다가 스크롤이 시작되고 나서 사라지고 다음텍스트가 보이게 하려면 어떻게 코드를 작성해야할까요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-1 강좌 섹션 질문 합니다.
안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요,브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다.제가 이해한 것은1. 요소의 offsetTop과 scrollTop 값을 통해서 계산한 위치값 포인트에서, 모든 애니메이션이 시작한다(모든 애니메이션의 시작)2. 패럴럭스 애니메이션을 위해서, 해당 이미지가 일어날 섹션이 아닌, 그 위의 섹션 위치에서 애니메이션을 실행한다.3. 값은 1000이든 2000이든 어떤 값에서 0으로 줄어드는 로직으로 계산한다.이 세가지 내용입니다. parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함.해당 구문 이후로는 계속 이해가 가질 않아서요 텍스트로 길게 장황하게 라도 설명해주시면, 작성해주신 텍스트 내용 안에서 다시 이해해보는데 큰 도움이 될 듯합니다. 감사합니다.var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드[질문]parallaxSpeed를 거리라고 강좌에서 말씀해주셨는데, 1200로 초기화 될 때, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요?숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다.혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음[질문]여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.[질문]패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다[질문]첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함[질문]parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
PlaneGeometry 브라우저 화면 크기에 맞게 셋팅하는 법
PlaneGeometry 브라우저 화면 크기에 맞게 셋팅하는 법이 있을까요? width, height를 계산해서 넣어야하는데 계산식이 어떻게 되는지 모르겠네요...OrthographicCamera를 사용 중입니다!답변 주시면 감사하겠습니다!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Mesh에 Camera를 붙일 수 있나요??
Mesh에 Camera를 붙일 수 있나요??아니면 아래 선생님 사이트처럼 동영상 대신 해당 위치에 Camera를 셋팅할 수 있나요??답변 부탁드리겠습니다!!!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의 보던중 사용중인 툴이 궁금해서 여쭤봅니다.
강의를 보던중 강사님께서 callback 이라는 뜻을 찾기위해 특정 위젯 같은 것을 실행 후 검색어 입력 후 파파고로 실행 하시던데.혹시 이 툴이 뭔지 알수 있을까요?윈도우 사용자 입니다.
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
reorder('YXZ') 동작
강의 너무 재밌게 잘 듣고 있습니다!roatation에서 reorder를 했을때 어떻게 동작하는 것인지 정확히 이해가 가지 않아서 질문 남겨봅니다~reorder('YXZ') 는 어떤 것을 위해 설정한 것인지, YXZ 순서가 무엇을 의미하는지 궁금합니다~ (rotation.x, rotation.y 로 값을 설정하는데, YXZ 순서는 어떤 것을 설정해주는 것인지요?)아래 코드처럼 테스트했을때, 1,2번 위치에 설정했을때는 잘 동작하고, 마지막에 설정했을때는 기존처럼 동작하는데, reorder() 해주는 위치도 궁금합니다. (한번 설정하면 계속 동작하는 것인지?)// 1. 회전 전에 설정 mesh.rotation.reorder('YXZ'); mesh.rotation.y = THREE.MathUtils.degToRad(45); // 2. 중간에 설정 mesh.rotation.reorder('YXZ'); mesh.rotation.x = THREE.MathUtils.degToRad(20); // 3. 마지막에 설정 mesh.rotation.reorder('YXZ');
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
블로그 상단 페럴렉스 효과 구현 질문 있습니다!
여기서 coverWrap.style.backgroundPosition을 변경해주는데 기존 설정이 center center로 되어있다가 스크롤이 내려갈 때 0부터 시작하기 때문에 가장 상단의 페이지에서 시작하면 그림이 위로 뚝 떨어지는데 어떻게 해결해야 할까요ㅠㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
카메라 컨트롤을 어떤 걸 사용해야 할지 모르겠습니다...!
안녕하세요. 1분코딩 선생님 강의를 수강 중인 수강생입니다. 현재 아래 사이트의 화면과 비슷한 기능을 구현해야 하는 상황인데 어떤 카메라 컨트롤을 써야 할지 감이 잡히지 않아 질문 드립니다...https://www.lamborghini.com/en-en/3dFlyControls와 PointerLockControls로 테스트를 해보았는데 FlyControls의 경우는 비슷하게 구현은 되었지만 화면을 계속 움직이다보면 화면이 기울어버리는 경우가 생기고,PointerLockControls의 경우는 움직이려면 lock(); 함수를 실행시키면 마우스가 사라져서 문제가 되었습니다.카메라 컨트롤 셋팅은 glb파일의 카메라 객체를 넣어 생성하였습니다.위의 사이트와 비슷한 기능을 만들려면 어떤 카메라 컨트롤러가 적합할까요...?카메라 객체로 컨트롤 셋팅을 하고 따로 셋팅을 해줘야하는 값들이 있을까요...?답변 및 조언 주시면 정말 감사하겠습니다!
-
해결됨JavaScript로 배우는 fullPage + anime + SVG Animation 포트폴리오
질문드립니다.
#sec3에서 물결 움직이는거에서요,브라우저 화면을 키우면 꽉차지 않고 잘리는 부분 수정에서left:o 을 빼 한다고 하셨잖아요...근데, 좀더 큰 모니터에서 확인을 해보니 여전히 꽉차지 않고 잘려나오는데 어떻게 해야 할까요?이것저것 해봤는데, 잘 안되어서 피그마에서 좀더 크게 그려야 하는걸까요^^.sec3_svg{ fill: #667eea; stroke: none; position: absolute; /* left: 0; ->큰화면에서 꽉차게 안나옴 */ bottom: 0; width: 100%; }
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
gsap 상업적 사용여부
Club GreenSock을 제외하면 상업적으로 무료로 사용가능한건가요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
강의에서 나온 이미지 색상보다 더 밝게 나와요
위의 사진처럼 강의보다 훨씬 밝게 나오는데 문제가 무엇일까요..? import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; // ----- 주제: 여러 이미지 텍스쳐가 적용된 큐브 export default function example() { // 로딩 매니저 const loadingManager = new THREE.LoadingManager(); loadingManager.onStart = () => { console.log("시작"); }; loadingManager.onLoad = () => { console.log("로드 완료"); }; loadingManager.onProgress = (img) => { console.log(img + "로드 중"); }; loadingManager.onError = () => { console.log("로드 에러"); }; // 텍스쳐 이미지 로드 const textureLoader = new THREE.TextureLoader(loadingManager); const rightTex = textureLoader.load("/textures/mcstyle/right.png"); const leftTex = textureLoader.load("/textures/mcstyle/left.png"); const topTex = textureLoader.load("/textures/mcstyle/top.png"); const bottomTex = textureLoader.load("/textures/mcstyle/bottom.png"); const frontTex = textureLoader.load("/textures/mcstyle/front.png"); const backTex = textureLoader.load("/textures/mcstyle/back.png"); const materials = [ new THREE.MeshBasicMaterial({ map: rightTex }), new THREE.MeshBasicMaterial({ map: leftTex }), new THREE.MeshBasicMaterial({ map: topTex }), new THREE.MeshBasicMaterial({ map: bottomTex }), new THREE.MeshBasicMaterial({ map: frontTex }), new THREE.MeshBasicMaterial({ map: backTex }), ]; // 픽셀화 rightTex.magFilter = THREE.NearestFilter; leftTex.magFilter = THREE.NearestFilter; topTex.magFilter = THREE.NearestFilter; bottomTex.magFilter = THREE.NearestFilter; frontTex.magFilter = THREE.NearestFilter; backTex.magFilter = THREE.NearestFilter; // Renderer const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color("white"); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.y = 1.5; camera.position.z = 4; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight("white", 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight("white", 1); directionalLight.position.set(1, 1, 2); scene.add(directionalLight); // Controls const controls = new OrbitControls(camera, renderer.domElement); // Mesh const geometry = new THREE.BoxGeometry(2, 2, 2); const mesh = new THREE.Mesh(geometry, materials); scene.add(mesh); // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener("resize", setSize); draw(); }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
three.js 사용방법 1
아무것도 뜨지 않습니다 왜그럴까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
fork 주소가 어떻게 되나요?
강의노트 주소는 어디에 있나요 아무리 찾아봐도 없네요
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
dat.gui
react에 three.js를 따라하고 있습니다. 그런데 다른건 다 잘 되는데 dat.GUI는 똑같이 따라 하니 안되네요 혹시 다른 방법을 더 추가 해야 할까여 import * as THREE from 'three'; import dat from 'dat.gui'; export default function example() { const scene = new THREE.Scene(); const renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio>=1 ? 2 : 1); document.body.innerHTML=""; document.body.appendChild(renderer.domElement); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.y = 1; camera.position.z = 5; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight('white', 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight('white', 1); directionalLight.position.x = 1; directionalLight.position.z = 2; scene.add(directionalLight); // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 'seagreen' }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // Dat GUI const gui = new dat.GUI({ name: "My GUI" }); console.log(gui) gui.add(mesh.position, 'y', -5, 5, 0.01).name('큐브 Y'); gui.add(camera.position, 'x', -10, 10, 0.01).name('카메라 X'); camera.lookAt(mesh.position); // 그리기 const clock = new THREE.Clock(); function draw() { const time = clock.getElapsedTime(); mesh.rotation.y = time; camera.lookAt(mesh.position); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener('resize', setSize); draw(); }
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일 스와이프 구현 마지막 숙제
혹시 모바일 cd플레이어 관련해서 function touchFunc(e) { let type = null; let touch = null; switch (e.type) { case "touchstart": type = "mousedown"; touch = e.changedTouches[0]; start_X = touch.clientX; end_X = 0; break; case "touchend": type = "mouseup"; touch = e.changedTouches[0]; end_X = touch.clientX; let chkNum = start_X - end_X; let chkNumAbs = Math.abs(chkNum); if (chkNumAbs > 100) { console.log(chkNum); if (chkNum < 0) { if (pageNum > 0) { pageNum--; } else { pageNum = totalNum - 1; } } else { if (pageNum < totalNum - 1) { pageNum++; } else { pageNum = 0; } } pageChangeFunc(); } break; } }마지막으로 숙제해주신부분에서 pageNum이계속해서 -- 또는 ++ 이면 없는 인덱스까지 튀어나오기때문에 주석해주신 부분에서 pageNum의 컨디션을 넣어주어야 한다고 생각해서 작성했는데 혹시 맞는지 궁금합니다