월 24,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
find 사용의 이유
안녕하세요. 혹시 변수 선언 할 때에, var scrollBody = $('.motion_area'); 에서는 $() 를 사용하고, bgContent와 ggangBody 에서는 scrollBody.find('.bg'); 등으로 find 메소드를 사용 해주셨는데요, 더욱 길어지는것 같아서 혹시 bgContent에 $('.bg') <-이런식으로 선언이 아닌, find를 사용하는 이유가 있는지 궁금합니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
해시태그로 html을 원하는 위치로 이동 후 주소 창에 있는 해시태그를 삭제 할 수도 있을까요?
해시태그를 사용해서 html의 위치를 이동 했을 때 주소#section01 이런식으로 뒤에 해시태그가 붙지 않습니까?? 혹시 이동이 완료된 후 주소창의 #section01을 삭제할 수 있을까요? 아니면 추후 개발에 필요한 get또는 post 요청 or ajax 또는 백엔드의 통신과 무관해서 나둬도 되는걸까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
offsetTop[index] = $(obj).offset().top; 부분질문
선생님 ! 수업 잘 듣고 있습니다 혹시 offsetTop[index] = $(obj).offset().top; 이 부분에 $(obj)를 자바스크립트로 사용 하고 싶을 땐 어떻게 바꿔야할까요? 시도 해본 방법으로는 obj.offset().top; obj[index].offset().top; 두 방법으로 시험해봣는데 둘다 오류가 뜨네요 혹시 답변 가능 하실까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
animation-direction
안녕하세요 강의 잘 보고있습니다. 여러가지 만들어보던중에 궁금한게 생겨서 질문드립니다. 키프레임은 다음처럼 본 강의영상 예제처럼 똑같이 했습니다. @keyframes useAni2{ 0%{ transform:translate(-200px,0px); } 50%{ transform:translate(200px,0px); } 100%{ transform:translate(600px,200px); } } 그다음 h2요소에 대충 그림그려서 움직이게끔 해봤는데요, h2{ position:absolute; left:30%; top:30%; transform:translate(-50%,-50%); width:100px; height:100px; border:2px solid red; -webkit-animation-name: useAni2; -webkit-animation-duration: 4s; -webkit-animation-delay:0s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count: 2; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode:both; } infinite로 무한히 실행시켜줬을 때 animation-direction:alternate;로 지정해주면 요소가 왔다갔다 반복하는데 animation-direction:reverse;로 해주면 거꾸로 실행되긴하는데 왔다갔다 하지않고 뚝 끊겼다가 다시 시작하고 이런방식으로 작동하네요 fill-mode:both;의 유무와 관계없이 이런 현상이 일어나는데 어떤 차이가 있는건가요?? 구체적으로 왜 alternate로 해주면 0%->50%->100%->50%->0%->50%->... 이렇게 되고 reverse는 100%->50%->0% 끝났다가 다시 100%->50%... 이런식으로 동작하는지 궁금합니다....
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
moon_motion position 관련 문의드립니다.
안녕하세요 :) 강의를 듣고 실습을 진행하는 과정에서 질문이 생겨 문의드립니다. 강의에서는 motion_moon의 position이 fixed로 설정되어 있어 transition이 끝난 후 스크롤에 관계없이(범위 내에서) 고정되어 있는데, 이를 스크롤과 함께 움직이게 하고 싶어 relative로 설정했더니 화면에 보이지 않습니다. position이 fixed가 아닌 경우 transition&transform 효과가 적용이 되지 않는데 이런 경우 어떻게 해결할 수 있을까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
100% 가 아니라 156%가 나와요.
js 문제인가 싶어 선생님 소스를 그대로 갖다 써봤는데도 결과물 최대치가 156%가 나옵니다. css 문제인가도 싶은데 당췌 뭐가 잘못된건지 모르겠어요. <body> <div class="wrap"> <section class="sec01"> <article class="content"> <div class="progress"> <span class="bar"></span> <p class="txt">0%</p> </div> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> 가<br> </article> </section> </div> </body> .content { width: 1000px; margin: 100px auto; } .content .progress { position: fixed; left: 50%; top: 500px; width: 70%; height: 100px; margin-left: -35%; border: 1px solid #222; text-align: center; line-height: 100px; } .content .progress .bar { display: block; width: 0%; height: 100%; background-color: #111; } var text = $(".progress .txt"); var progressBar = $(".progress .bar"); function getPercent() { var scrollHeight = $('.sec01').height(); var scrollRealHeight = (scrollHeight - $(window).height()); var winScrollTop = $(window).scrollTop(); var scrollPercent = (winScrollTop / scrollRealHeight) * 100; var textPercent = Math.floor(scrollPercent); render(textPercent, scrollPercent); } function render(textPercent, scrollPercent) { text.text(textPercent + "%"); progressBar.css({ width: scrollPercent + "%" }); } function init() { getPercent(); } $(window).scroll(function () { getPercent(); }) init();
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
사파리에서 동작구현
예제들을 눌러봤는데 안나오길래 확인해봤더니 사파리에서는 아예 스크립트가 동작되지않습니다. 확인한번 부탁드려요~ 크롬에서는 정상적으로 나오는걸 보았으나 사파리에서는 아예 동작이 안되네요 ㅜㅜ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-2 계산식 질문 드립니다.
안녕하세요? 강사님 해당 강의 중 챕터 수식에 해당하는 부분이 이해가 가지 않아 질문드립니다. parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); => parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)) 위의 계산식 중에 min 계산부분이 이해가 가지 않습니다. 왜 저런 계산식이 나왔는지 의문이여서 질문드려요 ㅜㅜㅜ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
스크립트에서 html생성
질문 1) var countBox = $('<div class="count_box" />'); 위의 코드가 html을 생성하는 코드인것같은데 아래의 코드와 같은내용인가요?? 저렇게 줄여서 써도 html이 생성이 되나요? var countBox = '<div class=:count_box></div>' 질문2) for(var i = 0; i <= rolling; i++){ var sum = number + i; var num = sum >= 10 ? Number(String(sum).split('')[1]) : sum; numberArray[i] = num; }; 여기서 String(sum).split('')[1] 부분은 sum을 먼저 문자열로 바꾼후, split해서 [1]이라면, 예를들어 숫자가 21이 나오면 1이라는 값이 나오는건가요? numberArray[i] = num; 이부분도 이해가 잘가지않습니다 ㅜㅜ,,,, numberArray의 배열의 자리 i가 24까지니까 i의 자리에 num이 들어가는게 맞나요?? 질문3) 완성작에서 월 부분이 4월이면 그냥 4라고 나오는데, 04월이라고 표현하려면 어떤부분을 고쳐야하나요??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요. stop(true) 질문입니다
$('html').stop(true).animate({ scrollTop: sectionMainBottom+1 //IE버그 반복 버그 처리를 위해 1을 추가합니다. },500,function(){ sectionIsMoving = false; //섹션이 이동중인지 체크하는 변수 }); stop()을 사용하면 애니메이션이 중단되는거로 알고 있는데 ()안에 ture를 넣는다는건 어떤의미로 작동이 된다는건가요??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
this와 obj
function sec01Reset(obj){ $(obj).parent().find('.ggang01').removeClass('active'); $(obj).parent().find('.ggang02').removeClass('active'); $(obj).parent().find('.ggang03').removeClass('active'); $(obj).parent().find('.ggang04').removeClass('active'); }; $('.btn.start').on('click',function(){ sec01Start(this); }); $('.btn.reset').on('click',function(){ sec01Reset(this); }) 이 코드에서 버튼을 누르면 함수실행을 하게되는데, 저 this가 a나 b같은 매개변수인가요?? 그 this와 obj부분을 어떤식으로 해석하면 좋을까요??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
else문 += 질문
else{ list = '<li><figure><img src="images/1.jpg"></figure></li>'; list += '<li><figure><img src="images/2.jpg"></figure></li>'; list += '<li><figure><img src="images/3.jpg"></figure></li>'; } 이 부분에서 list에 처음에 1.jpg의 값을 담았다고 해석 되는데 그 뒤에 +=부분은 어떻게 해석을 해야하나요?? 처음 list의 값(1.jpg)에 2.jpg,3.jpg이렇게 더해진거인가요?? 변수 하나에 세계의 값을 넣을수가 있나요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
수정사항과 질문 ( delay , queue )
1. 스펠링 수정하셔야될것같습니다~ * conuntBox --> countBox 2. delay와 queue 펑션을 사용하는 대신에 바닐라 자바스크립트에서는 어떻게 구현하는게 좋을까요? 여러번 setTimeOut을 쓰기에는 조금 불편해보이고, 자바스크립트로 이런구현을 하는데 고민을 해본 사람으로써, 혹시 방법이 있는지 여쭤봅니다. 예전에 저는 gsap의 staggerTo 펑션을 이용해서 구현했는데, 다른방법이 있는지요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
Section-5. 섹션이동 스크롤 질문입니다.
섹션이동을 처리해주는 함수 moveStartRender 에 대해서 질문이 있습니다. 저는 현재 mac에서 매직 마우스를 사용하고 있는데요, 첫번째 sec_mainvis 파트에서 스크롤이 일어날경우에 html 일레먼트를 애니메이트 시켜주게 되는데, 보통 스크롤 하듯이 스크롤을 시켰을때 정확하게 브라우저의 상단에 걸리지 않는것같습니다. 이 함수에서 마우스의 스크롤 이 발생 했을때 스크롤의 크기나 힘에 상관없이 무조건 브라우저 상단에 걸리게 해주게 끔 만들어줘야 되지않나요? 그렇게 할수 있는 방법이 뭐가 있는지 궁금합니다. 아래의 첨부한 이미지는 평소대로 스크롤을 했을때, .sec_mainvis의 높이를 약간 넘어서 스크롤이 진행 된모습을 캡쳐했습니다. 야주 약하게 스크롤을 했을때는 정확하게 브라우저 상단에서 멈추긴 합니다만, 이건 개선의 여지가 있는것 같습니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
6-2 오늘 날짜 카운트 스크립트 만들기 에서 롤링 관련 질문입니다!
var rolling = 24; //롤링될 개수 에서 롤링 될 개수는 왜 24개로 하신건지 알 수 있을까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
2:40
`${}` 이렇게 쓰는 것을 배운적이 잇는데 해당 부분에서는 ``부분이 없고 ${} 이 아이만 써주었던데.. 왜 그런건지 혹시 알 수 있을까요? function 앞에 $이거를 왜 써준 것인지도 궁금해요..ㅠㅠ 혹시 jquery 개념도 알아야하나요? html,css, javascript로만해서 따라갈 수 있을 줄 알았는데 너무 어렵네요..하 어려워서 자바스크립트 배우고 이제 들어보려 했더니 코드가 튕겨 나가버리네요. 제이쿼리를 다시 배우고 와야하는건가..
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
관련 강의 2편은 언제출시되나요?
관련 강의 2편은 언제출시되나요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션에서만 100vh로 스크롤 할 경우
안녕하세요. 강의 잘 듣고 있습니다. 섹션 5의 업그레이드 버전을 스스로 만들어 보고 있는데요. animate의 비동기 방식때문에 젤 밑까지 스크롤 되어지는거 같은데 어떻게 해결 해야 할까요...? https://jsfiddle.net/Lret1yxf/
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요.
수업 잘 듣고 있습니다. 이제 시작하는데, 자바스크립트가 약하다보니까,이해가 잘 안가는 부분들이 있습니다. function getPercent(){ var scrollHeight = $('.sec01').height(); var scrollRealHeight = (scrollHeight - $(window).height()); var winScrollTop = $(window).scrollTop(); var scrollPercent = (winScrollTop / scrollRealHeight) * 100; var textPercent = Math.floor(scrollPercent); 여기까지는 잘 이해 했는데요, 그 뒤부터가 잘 이해가 안갑니다. 1) 우선 코드를 위에서 아래로 순차적으로 읽는게 기본으로 알고 있는데, 왜 getPercent() {}안에 아래의 render()를 넣고나서,아래의 render 함수를 적어주는지 이해가 안갑니다. //render 함수 선언을 할때 적어주는 변수들은 지역변수라서, 가져오지 못할텐데, 사용할 수 있는 이유가 getPercent함수안에 실행할 걸 적어둬서 연결이 되는건가요? render(textPercent,scrollPercent); }; function render(textPercent,scrollPercent){ text.text(textPercent + '%'); //텍스트 값을 업데이트 합니다 progressBar.css({ //게이지 값을 업데이트합니다 width : scrollPercent + '%' }); }; function init(){ getPercent(); }; $(window).scroll(function(){//스크롤 이벤트를 추가합니다. getPercent(); }); init(); //초기화 }); 그리고 init() 함수가 프로그램의 시작을 알리는 함수라고 하는게 이해가 잘 안가네요. 뭘 어떻게 시작을 한다는건지 제가 듣기로는 뭔가 설명이 간략화 된것 같아요. 조금 더 자세히 풀어 설명해 주면 좋겠습니다. 화면과 비교해 가면서요. 다른분 질문해주신걸 보면 init 함수를 적은건 겟퍼센트함수가 스크롤이라는 이벤트가 일어나야 실행이 되는데,스크롤이 안일어나도 실행하게 하려고 넣었다 하셨는데, 좀더 설명이 필요합니다.스크롤이라는 이벤트가 안일어나면 굳이 실행이 안되도 되는것 같은데 실행되어야 할 이유가 있을까요?그리고 init() function init(){ getPercent(); }; $(window).scroll(function(){ getPercent(); }); init(); //초기화 이부분도 이해가 안가요. 제이쿼리 구문이 init(); 여기 와 init함수 선언한거 사이에 오는 순서적 이유가 있나요? 저는 무조건 외우는것보다 왜 그렇게 쓰였는지 이해를 해야 온전한 저의 것이 된다고 생각하는데, 영상 속 설명은 뭔가 이미 듣는 사람이 자바스크립트를 어느정도 안다 가정하고 가르치는 것 같아서..좀 만 더 설명이 들어가면 좋겠다 생각합니다. 물론 따로 매일 자바스크립트를 공부는 하고 있습니다만,선생님의 말씀을 다 이해하기는 어렵네요.좀만 더 보충설명 부탁드려요. ㅜㅜ 제가 공부하다 답답해서 질문이 좀 길었지만, 자세히 적어야, 선생님께서도 자세히 답변 해 주실거라 믿고 좀 길게 적었습니다.답변 기다리겠습니다!
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
톱니바퀴 배경화면을 다른 페이지에서도 사용
톱니바퀴 배경 애니메이션 효과를 다른 html 페이지에서도 적용시키고 싶은데 불러와지지 않습니다. 어떻게 하면 될까요?