월 24,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
모든 코드 작성은 이클립스를 사용한 것인가요?
모든 코드 작성은 이클립스를 사용한 것인가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-2 다중 패럴렉스 스크립트 작성하기 ( 보충 )
parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); 에서 Math.max값에서 0을 고정으로 줘도 되지 않나요?변수명이 길어서 코드가 복잡해보이는 면도 보이기도 하고, 변수를 활용하여 0을 주었다는건 또다른 이유가 있는것 같아서 질문드려봤어요!
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
offsetTop와 offsetBottom의 값 질문입니다.
제가 따로 홈페이지를 만들며 연습중인데 offsetTop[index] = $(obj).offset().top; offsetBottom[index] = $(obj).offset().top + $(obj).height(); 이렇게 입력하고 로그를 찍었는데 이렇게 찍히는 이유가 뭔가요??ㅠㅠㅠ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
강의 잘 보구 있습니다.
section8 예제에서 모바일일때 위에서부터 스크롤을 할때 확 내리지 않고 천천히 내릴경우 시계안에 이미지 사진이 마지막 네번째 사진이 먼저나오구 스크롤을 한번더 하면 첫번째 사진부터 나오는데 ㅠㅠ 어떻게 수정해야할까요
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
제이쿼리 코드를 > 자바스크립트로 작성시
안녕하세요 선생님 바쁘실텐데 죄송합니다. 저는 자바스크립트 공부를 위하여 선생님이 제이쿼리로 적어주신 코드들을 자바스크립트로 변환하며 공부 하고 있습니다. 하지만 아래와 같이 변수 fgCon에 classList.add('active'); 를 하였지만 아무런 애니메이션 효과도 나타나지 않고 콘솔 검사시 html 내부에는 이미 active 클래스가 삽입 되어있습니다. 어떠한 문제때문에 그런걸까요?? <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-compatible" content="chrome=1,IE=edge"> <title>스터디</title> <link rel="stylesheet" type="text/css" href="../../library/css/common.css"> <script type="text/javascript" src="../../library/js/jquery.1.12.4.js"></script> </head> <style type="text/css"> .tit_area {padding:100px 0 0 0;} .tit_area .f_content {position: relative; width:70%; margin:0 auto;} .tit_area .f_content .tit {position:relative; z-index:20; left:50px; font-size:80px; line-height:1.2; opacity:1;} .tit_area .f_content .txt {position:relative; z-index:20; left:80px; font-size:50px; opacity:1;} .tit_area .f_content .img {position: relative; transform:translateY(50px); transition:4s .2s cubic-bezier(0.3, 1.01, 0.51, 1.04);} .tit_area .f_content.active .img {transform:translateY(-10px);} .tit_area .f_content .img:after {position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; content:""; background-color: #fff; transition:2s .3s cubic-bezier(0.3, 1.01, 0.51, 1.04);} .tit_area .f_content.active .img:after {width: 0;} .tit_area .f_content .img img {width:100%;} </style> <body> <div class="wrap"> <section class="tit_area"> <article class="f_content"> <h2 class="tit"> GGANG CODING </h2> <p class="txt">애니메이션 가속도 처리방법</p> <figure class="img"> <img src="../images/4.jpg"> </figure> </article> </section> </div> <script type="text/javascript"> var fgCon = document.querySelector('.f_content'); function addClass(){ fgCon.classList.add('active'); }; function init(){//초기화 addClass(); }; init(); </script> </body> </html>
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
10-1 스크롤UI만들기 질문입니다.
chekcInSection 함수가 작동이 안되는 것같아요. 스크롤 해도 글씨와 네비가 바뀌지가 않고 새로고침해야지만 바뀝니다 .ㅠㅠ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
올려주신 강의 파일이 빈 파일이 있습니다. section10 부터 잘못 올라온것 같습니다.
올려주신 강의 예제 파일이 빈 파일이 있습니다. section10 부터 잘못 올라온것 같습니다. 확인 부탁드립니다.
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
마지막 섹션에서의 달 스타일 질문드려요.
마지막 섹션에서의 달 스타일이 다음과 같은데요. active상태가 아닐때, opacity 가 0이면 어차피 노출이 안되는데 visibility를 hidden으로 적용하는 이유가 있나요? opacity이외에 visibility값을 주어야 하는 이유가 무엇일까요? .motion_area .motion_moon {visibility:hidden; position:fixed; right:100px; top:100px; z-index:20; width:200px; opacity: 0; transform:translateY(-100px); -webkit-transform:translateY(-100px); -moz-transform:translateY(-100px); -o-transform:translateY(-100px); -ms-transform:translateY(-100px); transition:1s;} .motion_area .motion_moon.active {visibility:visible; opacity:1; transform:translateY(0px); -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -o-transform:translateY(0px); -ms-transform:translateY(0px);}
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
예제코드 문의드립니다
'section5 - step3' 예제코드 파일에 다른 예제파일이 등록되어있습니다. 하단 패럴렉스 완성코드를 확인하고 싶은데 볼수가 없네요. 확인 부탁드립니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
선생님 섹션 순서대로 강의 듣는게 좋을까요? 아니면 관심있는것을 먼저 듣는게 좋을까요?
감사합니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
실제로 DB를 이용해서 구현하는것을 보여주실 수 없을까요?
실제로 DB를 이용해서 구현하는것을 보여주실 수 없을까요?DB에서 자료를 불러온것을 처리하는 방법을 배우고 싶습니다!
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
저 그림들은 어떻게 제작하시나요?
.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션 5 if문 질문
안녕하세요. 선생님 섹션 5의 step2 강의를 듣다 헷갈리고 확실하게 알고 싶어서 질문 올립니다. if(winScrollTop > sectionMainTop && winScrollTop < sectionMainBottom){ //섹션에 진입했는지 체크합니다. if(!sectionIsMoving){ //애니메이션이 진행중인지 체크합니다., false라면 sectionIsMoving = true; //섹션이 이동중인지 체크하는 변수 moveStartRender(); //섹션 이동을 처리해주는 함수 } //console.log('section in'); } 이 부분 코드 if문을 제가..해석한걸 들려드리면 winScrollTop(스크롤바의 현재위치)가 sectionMainTop(0) 보다 크고 , 스크롤바의 현재 위치가 sectionMainBottom(sec_mainvis의 끝, 높이)보다 작을 경우 => 즉 sec_mainvis에 있을때, 진입했을때 sectionsMoving 이 false라면 true로 바꾸고 섹션이동 함수 실행을 해라가 맞나요?ㅠㅠ 2번째 섹션인 sec_list_overlap에서 위로 스크롤 했을때 저 코드가 이해가 되는데(sec_mainvis 섹션에 진입해서) 맨 처음페이지를 로드 했을때도 if(winScrollTop > sectionMainTop && winScrollTop < sectionMainBottom) 저 if문이 맞는거 같은데 왜 moveStartRender(); 가 실행이 안되는 건지 궁금합니다. 제가 놓치거나 잘못생각하는 부분이 있는거 같은데 어딘지 모르겠네요.. 감사합니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
왜 data 값을 못 찾는 걸까요?
강의를 보고 이해한거 토대로 직접 코드를 작성해보았는데요. 다 맞게 작성한 것 같은데 무한스크롤이 안됩니다.ㅠㅠ 로그를 찍어보니 data 변수가 제대로 선언되지 않은 것 같은데 왜 그런걸까요?... 선언하는 위치상으로도 문제가 없는 것 같은데 왜 안되는지 도통 모르겠네요 ㅠㅠ <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-compatible" content="chrome=1,IE=edge"> <title>깡코딩 - 초보자도 만들 수 있는 스크를인터렉션1편</title> <link rel="stylesheet" type="text/css" href=""> <link rel="stylesheet" type="text/css" href="../../library/css/common.css"> <script type="text/javascript" src="../../library/js/jquery.1.12.4.js"></script> </head> <style type="text/css"> .com_tit {margin:100px 0 80px; font-size:70px; text-align: center;} .sc_infinity {} .sc_infinity .list {} .sc_infinity .list:after {clear:both; display:block; content:'';} .sc_infinity .list li {float:left; width:25%;} .sc_infinity .list li figure {padding:10px;} .footer {height:200px; background-color: #ddd;} .footer p {padding:50px 20px;} </style> <body> <div class="wrap"> <section class="sec01"> <h2 class="com_tit">INFINITE SCROLL</h2> <article class="sc_infinity"> <ul class="list"> <li> <figure> <img src="../images/1.jpg"> </figure> </li> <li> <figure> <img src="../images/2.jpg"> </figure> </li> <li> <figure> <img src="../images/3.jpg"> </figure> </li> <li> <figure> <img src="../images/1.jpg"> </figure> </li> <li> <figure> <img src="../images/2.jpg"> </figure> </li> <li> <figure> <img src="../images/3.jpg"> </figure> </li> </ul> </article> <div class="footer"> <p>FOOTER</p> </div> </section> </div> <script> $(function(){ var target = $('.list'), winTop = $(window).scrollTop(), onTop = $(document).height() - $(window).height() - $('.footer').height(), breakList = 10, listCount = 0; function getList(){ var list; listCount++; if(listCount > breakList){ list = null; } 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>'; } return list; } function listCall(){ if(winTop >= onTop){ var data = getList(); if(data !== null){ target.append(data); } else{ return false; } } } console.log(data); $(window).scroll(function(){ listCall(); }); function init(){ listCall(); } init(); }); </script> </body> </html>
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
e라는 인수는 왜 들어가는건가요?
$(window).scroll(function(e){ //스크롤 이벤트 바인딩 motionGgang(); }); 해당 코드에서 'e'라는 인수를 왜 넣어주는건지 궁금합니다!
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
autoprefix 적용이 안돼요
다음과 같이 세팅 화면에서는 autoprefix가 보이는데 검색해서 적용시키려고 하면 뜨지 않습니다.
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
getList() 실행 위치
다음 코드에서 궁금한 점이 있습니다! listCall() 함수에서 getList() 함수가 실행되는 위치는 어디인가요? data에 담겨있는 getList()가 null값인지 아닌지 확인하는 과정에서 자동적으로 실행된다고 보면 되나요? 만약 listCall() 함수에서 실행되는 게 아니라면 어디서 실행이 되어서 listCount가 하나씩 늘어나는 걸가요??
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
초기화 함수, 100% 만드는 방법
많은 코딩 강의를 들어봤지만 이렇게 필요한 부분만 쏙쏙 설명해주시는 강의는 처음이네요 ㅠㅠ 영상이 길지 않은데 핵심 내용들이 담겨 있어서 집중력 있게 볼 수 있는 것 같아요!ㅎㅎ 마지막 초기화 함수에 대해 한 가지 여쭤보려구요~ function init(){ getPercent(); }; $(window).scroll(function(){//스크롤 이벤트를 추가합니다. getPercent(); }); init(); //초기화 예제코드 스크립트 마지막 부분에 저렇게 되어 있는데요. 이미 스크롤시 getPercent() 함수를 실행시키게 했는데 굳이 init() 함수를 마지막에 한 번 더 써서 getPercent() 함수를 또 실행시키는 이유가 있을까요? init()함수를 주석 처리해도 문제없이 잘 나오더라구요~ init()함수를 썼을 때와 안 썼을 때의 차이점이 궁금합니다! 추가적으로 스크롤을 끝까지 해보면 99%까지 나오는데 100%로 만드는 방법은 없을까요??
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
변수에 대한 설명
안녕하세요 강사님:) 지난 강의들과 달리 이번 강의에는 변수에 대한 설명을 생략하신 부분이 많은데, 위의 변수를 이해하지 못하니 줄줄이 뒤에 엮인 변수들을 이해하지 못해서 이번 강의 이해에 어려움을 겪고 있습니다. 강의에서 언급하신 부분 부분은 이해가 됩니다. speed를 조정하는 부분이나, 두번째 섹션에서 패럴렉스를 시작하는 이유랑 translateY가 왜 저 숫자가 나오게 되었는지... 그런데 변수는 parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함. 여기서 부터 막혀서, 큰 틀을 이해하지 못했습니다. 전에 그림으로 그려주실 때는 이해가 잘 됐는데 지금은 혼자 콘솔을 찍어봐도 숫자가 스크롤 할 때마다 변하는데 시작될 위치값이라는게 뭔지, 저 변수가 어디에 사용되려고 따로 계산해서 정의해주셨는지 모르겠습니다 ㅠㅠㅠ😭 parallaxThisTop와 parallaxPercent 부분 자세히 설명해주실 수 있나요? 그 부분 이해하면 뒤에 변수는 다시 공부를 해보려고 합니다...🙏
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
onTop 관련 질문
안녕하세요 선생님. 스크립트쪽이 어렵고 이해가 어려운 학생입니다 질문을 많이 올려 자주 볼수도 있을거 같습니다 ^^;; 다름이 아니라 onTop = $(document).height() - $(window).height() - $('.footer').height(); //스크롤이 문서하단에 도착했는지 계산합니다. if(winTop >= onTop){ //하단에 도착했을경우 여기서 onTop 이 어떻게 문서하단에 도착한것을 뜻하는 식인지 이해가 잘 안가 여쭤봅니다. 제가 식을 이해한 바로는 저 계산의 결과는 푸터를 제외한 내용영역인거같고, 스크롤하단 여백이 푸터 높이만큼 남았을때 리스트가 올라오는거같습니다. 그런데 식이 왜 푸터를 제외한 내용영역부분이 문서하단에 도착했는지를 뜻하는지와 푸터의 높이만큼 스크롤 하단 영역이 남았을때 로드가 되는지 원리가 궁금합니다 ㅠㅠ console.log로 winTop과 onTop 의 값의 변화를 보았을때 대략적으로 이해는 갔지만 아직도 헷갈려서 질문 드립니다. 감사합니다.