44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
리액트로 하면 어떻게 해야할지 작성해주실수있나요?
루프를 useeffect에 넣으니까 그냥 흰화면만 떠서요.. 물론 다음강의보고 완성했지만(css이용한것), click했을때만 자연스럽지 mousemove할때는 끊기더라고여. 리액트로 예시 한번 부탁드립니다.
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
리액트에서 똑같이 만든다면 어떻게 만들어야할까요?
일단 이런식으로 시도는했는데, 안되서요... 그리고 현업에서 인터랙티브 만들때, 그냥 js쓰나요? 리액트,뷰 앵글러안쓰고..? 그리고 전 선생님 강의 리액트 적용하고싶은데, 선생님의 모든강의 리액트에 적용가능할까요???
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
배경화면을 꽉채우는 방법이 궁금합니다.
안녕하세요 강사님, 올려주신 소스 파일보고 질문드립니다. 마우스를 움직이니 배경화면으로 쓰인 벽이미지에 공백(아래 캡쳐한 이미지의 검은 색 부분)이 생기는데 본래 사이트 처럼 꽉차게 하고 싶어서요. 방법이 있을까요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
완성파일 부탁드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. stageResize() resize 관련 부분에 대해서 설명해주신 강의가 혹시 몇강일까요 ㅠ 메일은 krr1996@naver.com
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
requestAnimationFrame 이해가 잘 안가서 그러는데요
mousemove 강의에서 loop함수에 requestAnimationFram 을 ㅅ ㅏ용하잖아요그냥 mousemove 이벤트할때 mouseFunc 콜백 함수 안에다가 requestAnimationFrame 안에있는 코드를 넣어도 되지 않나영?? ㅠㅠ무슨 차이인가요?/ㅠㅠㅠ이해가 잘 안가서요..문의올려봅니다
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
혹시 뭐가 잘못된 코드인지 알 수 있을까요?
안녕하세요~ 다름이 아니오라 콘솔에 1찍혀져서 나오는건데요~ 혹시 뭐가 잘못된 코드인지 알 수 있을까요? 미리 감사드립니다~새해 복 많이 받으세요 의하기를 이용해주세요.
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
완성파일 부탁드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.완성 파일 가능하시다면 pwlsghq@naver.com 부탁드리겠습니ㅏㄷ:)
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
4번 5번 이미지ㅠㅠ
안녕하세요~ 자꾸 오류가나는데 저도 완성본파일 받아볼수있을까요ㅠㅠ 비교해봐야할것같아서요ㅠㅠ
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
저도 loop함수만 실행하면 오류가떠요!
안녕하세요! 저도 스크립트에서 loop(); 만 실행하면 스크롤 하게되면 강아지있는 사진이 붕 뜨는데 뭐가 문제일까요ㅠㅠ 혹시 코드 봐주실수 있나요!! let x = 0; let y = 0; let mx = 0; let my = 0; let speed = 0.03; let scrollTop = 0; let parallax_0, parallax_1, parallax_2, parallax_3, parallax_4, parallax_5, parallax_6; window.onload = function () { progressBar = document.getElementsByClassName("progressBar")[0]; parallax_0 = document.getElementById("parallax_0"); parallax_1 = document.getElementById("parallax_1"); parallax_2 = document.getElementById("parallax_2"); parallax_3 = document.getElementById("parallax_3"); parallax_4 = document.getElementById("parallax_4"); parallax_5 = document.getElementById("parallax_5"); parallax_6 = document.getElementById("parallax_6"); window.addEventListener('resize', stageResize, false); window.addEventListener('mousemove', mouseMove, false); window.addEventListener('scroll', scrollFunc, false); stageResize(); loop(); } function scrollFunc(e) { scrollTop = document.documentElement.scrollTop; let per = Math.ceil(scrollTop / (_documentHum - _windowHNum) * 100); progressBar.style.width = per + '%'; parallax_0.style.transform = "translate3d(0px," + scrollTop * .03 + "px, 0px)"; parallax_1.style.transform = "translate3d(0px," + -scrollTop * .03 + "px, 0px)"; parallax_2.style.transform = "translate3d(0px," + -scrollTop * .12 + "px, 0px)"; parallax_3.style.transform = "translate3d(0px," + -scrollTop * .16 + "px, 0px)"; parallax_4.style.transform = "translate3d(0px," + -scrollTop * .22 + "px, 0px)"; parallax_5.style.transform = "translate3d(0px," + -scrollTop * .25 + "px, 0px)"; } function stageResize(){ _documentHum = document.body.offsetHeight; _windowHNum = window.outerHeight; } function loop(){ mx += (x - mx) * speed; my += (y - my) * speed; parallax_4.style.transform = "translate3d(" + mx / 140 + "px ," + -scrollTop * 22 + "px, 0px)"; parallax_5.style.transform = "scale(1.1) translate(" + mx / 50 + "px," + -scrollTop * 25 + "px)"; parallax_6.style.transform = "scale(1.2) translate(" + -mx / 20 + "px," + -my / 20 + "px)"; window.requestAnimationFrame(loop); } function mouseMove(e){ x = (e.clientX - window.innerWidth / 2); y = (e.clientY - window.innerHeight / 2); }
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
완성본 파일 요청합니다.
입체감이 느껴지는 페럴랙스 페이지 구현강의내용이 너무 건너뛰는 내용이 많은 것 같아요.
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
cursor_item.style.transform 관련 질문입니다!
1. cursor_item 변수 선언 시, html에 cursor_item이 하나밖에 없어서 맨 끝에 [0]을 따로 안 넣었더니 cursor_item.style.transform이 실행되지 않았습니다. 개발자 도구를 통해 확인해보니, Cannot set properties of undefined (setting 'transform')라는 문구가 나왔습니다 변수를 선언할 class가 하나임에도 왜 몇 번째 원소인지 지정해줘야하나요??? (아래 그림 빨간 밑줄 참조) 2. cursor_item.style.transform = "translate("+ e.clientX + "px," + e.clientY + "px)"; 에서 왜 스트링으로 입력해야하는지 모르겠습니다. (아래 그림 파랑 밑줄 참조)
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
썸네일 예제
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강사님. 수업을 재밌게 듣고 있는 수강생입니다. 저는 썸네일상 (붉은 산 이미지)의 인터랙션 효과를 배워보고 싶어서 이 강의를 구입하게 되었는데 혹시 썸네일 파일도 공유 가능 하실런지요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
강사님 도와주세요!
제가 하려고 해도 어떤 부분이 왜 안되는지 전혀 모르겠습니다. ㅠㅠ Console에 문제가 생겼다고 하지도 않은데 왜 안되는지 모르겠습니다. ㅠㅠ 빨간 박스가 전혀 움직이지 않고 undefined만 뜹니다.ㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mouse의 움직임</title> <style> body{ background-color: rgb(255, 182, 93); position: relative; } h1{ color: #000; } .cursor_item { position: absolute; width : 100px; height : 100px; background-color: red; top: 0; left: 0; } </style> <script> window.onload = function(){ let h1 = document.getElementsByTagName("h1")[0]; //Tag이름으로 선택 let cursor_item = document.getElementsByClassName("cursor_item")[0];//클래스 이름으로 선택 window.addEventListener("mousemove", mouseFunc,false); function mouseFunc(e){ h1.innerHTML = "x: " + e.clinetX + "y: " + e.clinetY; //console.log(e.clinetX, e.clinetY); cursor_item.style.transform = "translate(" +e.clinetX + "px," + e.clinetY + "px)"; } } </script> </head> <body> <h1>test</h1> <div class="cursor_item"></div> </body> </html>
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
function mousefunc 관련 질문이요!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>test</title> <style> body{ background-color:black; } h1{ color:#fff; } .cusor_Item{ position:absolute; width:100px; height:100px; background-color:red; } </style> <script> window.onload=function(){ let h1 = document.getElementsByTagName("h1")[0]; let cusor_item=document.getElementsByClassName("cusor_item")[0]; window.addEventListener("mousemove",mousefunc,false); function mousefunc(e){ h1.innerHTML="x: "+e.clientX+"y: "+e.clientY; cusor_item.style.transform = "translate("+e.clientX+"px,"+e.clientY+"px")"; //console.log(e.clientX, e.clientY); } } </script> </head> <body> <h1>test</h1> <div class="cusor_Item"></div> </body> </html> 선생님 말씀해주신대로 써보니까 자꾸 window.onload function {} 이 부분이랑 function mousefunc(e){} 이 부분 태그가 혼동되는 일이 생깁니다 ㅠㅠ 왜그럴까요..? 그리고 저 빨간 부분이 왜 안움직이는 걸까요??
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
totalNum
let totalNum = 0; if(pageNum > 0){ //pageNum 이 0보다 크면 계속 빼줘. pageNum --; }else{ //0보다 작아지면 totalNum 을 넣어줘. pageNum = totalNum -1; //-1 } pageSetFunc(); 여기서 사용된 totalNum이 뭔가요?ㅜㅜ totalNum이 0이라면 왜 -1을 만들어 주나요??
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
innerHeight
왜 scrollHeight에서 innerHeight를 빼야하는지 잘 이해가 안돼요 ㅠㅠ scrollTop이 현재 스크롤의 top위치? scrollHeight가 진회색으로 칠해져있는 스크롤바의 높이? innerHeight가 현재 보고 있는 화면의 높이? 라고 제가 이해한게 맞나요? 위가 맞다면 왜 스크롤바의 높이에서 화면높이를 빼는지 모르겠어요
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
뉴욕타임즈 예제 질문
뉴욕타임즈 새이미지 예제 적용했을 때 마우스 커스가 안보이는데 보이도록 하는 방법이 있을까요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
'가로 진행 바' 제작 (스크롤 백분율 구하기) 강의 관련 질문드립니다.
위 코드에서 bar = document.getElementByClassName('bar')[0]을 onload = function 안에 넣지 않고 이렇게 전역변수로 선언하면 왜 스크립트가 작동하지 않는 걸까요?
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
window.addEventListener(“mousemove”,mousefunc,false); 에 대해서 질문드리고 싶습니다!
안녕하세요 선생님! 수업을 듣다가 궁금한 것이 있어서 질문 드리게 되었습니다. 강의 제목처럼 이벤트를 등록하는 코드 중에서 false라는 부분이 궁금합니다ㅠㅠ 이 false라는게 꼭 이벤트를 등록할때마다 써야되는 문법적인 부분일까요? 또 어떤 의미를 가지고 있는걸까요?? 읽어주셔서 감사합니다! 답변 부탁드립니다:) window.addEventListener(“mousemove”,mousefunc,false);
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
자바스크립트 문자열과 숫자 결합 형변환
안녕하세요, 이 부분에서 h1.innerHTML = "x: " + e.clientX + " y: " + e.clientY; 스트링이랑 e.clientX와 e.clientY를 바로 이은 걸 보고 console.log(typeof(e.clientX)); 찍어 보니까 `e.clientX`는 Number라고 나오는데 자바스크립트에서는 문자열과 숫자를 형변환 없이 그대로 결합해도 상관 없나요? 읽어 주셔서 감사합니다.