월 24,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
완성된코드를 그대로 가져왔는데 크기가 이상해요
https://half-cow-5c7.notion.site/Interactive-Web-bug-b2f14f4375824f3ea4c8eebdce6c48f6제 환경에서 빌드하면 위 링크처럼 사진배치가 이상하게 나와요.top mi pl는 흰 배경에 덮혀서 안보이지 않고, 사진은 확대돼 보여요vscode 환경이고 jquery는 1.12.4를 사용하고 있습니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
2:56에 10씩 증가시키는건 어떻게 하신건가요?
2:56에 개발자도구에서 숫자를 10씩 증가시키는건 어떻게 하신건가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
<script>에 $(function(){})으로 감싸준 이유
$(function(){})은 dom이 모두 load된 후에 실행된다고 배웠어요. section2까지 $(function(){})이 있으나 없으나 똑같이 실행되던데$(function(){})으로 감싼 이유가 있을까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5섹션예제 전부 깨져요 ㅠ
다 열어봤는데 다깨져있어요,,ㅜㅠ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
4-3 함수선언방식 질문
function motion() { //스크롤할때마다 작동할 함수 setProperty(); changeBg(); parallaxMove(); } function init() { motion() }; $(window).scroll(function(e) { motion(); }); init(); //이런식으로 함수끼리 연결?하는방식으로 하셨는데 $(window).scroll(function(e) { setProperty(); changeBg(); parallaxMove(); }); /** 이런식으로 해도 작동이되는거같아서 왜 함수를 스크롤함수,init함수,motion함수 각각 만들어서 연결하는방식으로 하신이유가있을까요? */
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
예제에 들어있는 이미지엑박문제
예제그대로 열었을때 경로도 맞고 이름명도 맞는데 이미지가 안떠요 ㅠ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
선생님 이부분이 이해가 안되서 질문 합니다.
var dis = $(window).scrollTop() / (($('.scroll_box').height() - $(window).height()) / 4);선생님 요게스크롤 위치 / (( 스크롤 박스 높이 - 윈도우 스크린 높이) / 4)요게 정확히 무엇을 뜻하는지 잘 모르겠습니다 ㅠ! 50px / (( 5000px - 900px) / 4) ... 식만 보면 그런 것 같은데.. 식이 잘 이해가 안되네요 ㅜ!
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
선생님 transform과 제이쿼리 혹은 자바가 연관성이 많나요??
css에 그냥 애니메이션 플레이 스테이트 animation 축약형 animation: animation-name animation-duration animation-delay animation-iteration-count animation-timing-function animation-direction fill-mode play-state; * 이름 > 실행속도 > 지연시간 > 반복횟수 > 애니메이션 속도 조절/그래프 > 반복방향설정 > 끝난후위치 > 실행or정지.ggang_model { animation 축약형 }이렇게만 써도 작동할것같은데 혹시 active를 넣고 제이쿼리를 써주시는 이유가 있으실까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
선생님, obj 의 역할을 모르겠습니다
$(obj) = sec01start(obj) 와 같은 것인가요?또한 obj = this 인건가요???
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
두 가지 질문이 있습니다 ㅠㅠ
섹션 7에서 사용한 인터렉션을 첫 번째 상위 섹션에 사용하고 svg인터렉션을 하위 섹션에서 사용하고싶은 상황입니다. 질문 1. 해당 svg인터렉션 코드를 사용하니 상위에 있는 섹션7의 배경문이 열리는 인터렉션이 실행되지 않는 이유를 모르겠습니다 ㅠㅠ 질문2. svg인터렉션 을 하위섹션에 사용하고싶은데 윈도우 시작 부터 svg가 그려지는것을 해당 섹션에서 부터 그려지게 하고싶은데 방법을 모르겠습니다.. 귀찮으시겠지만 도와주시면 감사드려요!!
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
다른 섹션이 위에 있을때 방법 ㅠㅠ
해당 인터렉션을 3번째 섹션에 넣고싶은데 포지션 스티키로 사용해도 위의 1번째 2번째 섹션에서 인터렉션이 진행되어 정작 3번째 섹션에서는 보이지 않습니다 ㅠㅠ 이럴때는 어떻게 사용해야 할까요.. ㅠㅠ 도와주세요..
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
제이뭐리 사용하여 사용자정의 css
제이쿼리를 사용하여 사용자정의 css 를 적용할 수는 없을까요? 그리고 gab은 왜 사용하는건가요? 0*1 = 0 1*1 = 1 이런식이면 사용하는게 의미가 없지 않나요...??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
수강비용 질문
안녕하세요. 지금 막 강의 결제완료했는데 할인 쿠폰이 있는지 모르고 원가로 결제했습니다. 혹시 취소후 다시 결제를 한다던지 아니면 차감해주실 수 있을까요?ㅠㅠ!!
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
로그창 질문
비주얼 스튜디오 코드를 통해서 따라하고 있는데 로그창을 통해서 console.log($); 이 코드로 로그창에 뭐가 나오면 된거라고 하셨는데 로그창에 아무것도 뜨지 않는 것 같습니다 어떻게 해야할까요? 이대로 그냥 진행해도 되는걸까요..ㅠㅠ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
8강 자바스크립트 버전이없어요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
무엇이문제인가 텍스트날짜
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"></head><body><header> p*200>{$}</header><section class="section_today"> <article class="date_box"> <div class="tb_row"> <div class="tb_cell"> <strong class="t_date">TODAY</strong> <div class="date_count"></div> </div> </div> </article></section><script> function countDate() { let el = document.querySelector('.date_count'); let date = new Date(); let todayDate = String(date.getFullYear()) + String(date.getMonth() + 1 ) + String(date.getDate());//오늘의 날짜 let rolling = 24; let resultArray = []; resultArray = todayDate.split(''); resultArray.forEach(function(val,idx) { let countBox = document.createElement('div'); countBox.className = 'count_box'; let numberArray =[]; let number = Number(val); for(let i = 0; i<= rolling; i++) { let sum = number + i; let num = sum >= 10 ? Number(String(sum).split('')[1]) : sum; numberArray[i] =num; }; numberArray.reverse(); numberArray.forEach(function(val) { let countValue = document.createElement('span'); countValue.innerText =val; countBox.appendChild(countValue); }); el.appendChild(countBox); setTimeout(function() { countBox.classList.add('active'); console.log(countBox); }, idx * 300); }) } countDate();</script></body> </html>용해주세요. .section_today{overflow:hidden;position:relative; background:#000; text-align: center; height: 100vh;}.section_today .date_box{height: 100%}.section_today .date_box .t_date{position:absolute; left:20px; top:400px; z-index: 100; font-size: 300px; color:#fff; opacity:1; transform:translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #fff; transition: 1s;}.section_today.active .date_box .t_date {transform: translateX(0%);}.section_today .date_box .date_count{overflow: hidden; position: relative; display: inline-block; height: 200px; opacity:0; transition: opacity 0.5s 1s;}.section_today.active .date_box .date_count {opacity: 1;}.section_today .date_box .date_count:after {clear: both; display: block; content:'';}.section_today .date_box .date_count .count_box {float: left; animation: count_date 2.8s 1 ease-out both paused;}.section_today .date_box .date_count .count_box.active {animation-play-state: running;}.section_today .date_box .date_count .count_box span {display: block; height: 200px; color:#fff; font-size:200px; line-height:1; text-align: center; -webkit-text-fill-color: transparent;-webkit-text-stroke:6px #fff;}@keyframes count_date { 0%{ transform: translateY(0px); } 100%{ transform: translateY(-4800px); /*높이 롤링될 개수 구현값 */ }}무엇인 문제일까요 ㅠㅠ?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
addEventListener
안녕하세요 강의 듣다가 궁금한 점이 있어서 질문드립니다.자바스크립트의 addEventListener는 제이쿼리처럼 한번에 복수의 이벤트를 넣지 못하나요? 예를들어 $(window).on('load scroll') 이런식으로요
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
횟수제한 조건문 이런식으로 변경해서 해도 되나요?
function getList() { var list; listCount++; 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() { winTop = $(window).scrollTop(); onTop = $(document).height() - $(window).height() - $('.footer').height(); if(winTop >= onTop){ var data = getList(); if(listCount < breakList){ target.append(data); }else{ return false; } } } 잘 나오긴 하는데....이런식으로 변경해도 상관없을까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
새로고침 했을 때 페이지 이동
안녕하세요 수업 듣다가 궁금한 점이 생겨 질문 드립니다. 새로고침 했을 때 새로고침 하기 전의 화면이 나타나는게 아니라 위로 이동하던데 왜 그런건가요??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
질문드립니다~
안녕하세요 ~ 제가 초보라 궁금한게 있어서요 $(window).scroll(function(){ getPercent(); }) function init(){ getPercent(); } init(); getPercent(); 이 함수가 왜 두번이나 실행되는거죠 ?