월 24,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
반응형에 대해 질문이 있습니다 !
안녕하세요 깡코딩님, 다름이 아니라 모바일 뿐만아니라 pc도 반응형이 필요할텐데 맥북프로같은 경우는 해상도가 크더라구요 ..이럴경우 처음부터 크게 작업하고 미디어 쿼리로 점점 작게 진행해야하는걸까요???1920까지만 신경쓰고 최소로 280까지만 신경썼는데 이렇게 큰게 나오니 또 조정을 해야하나 싶습니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
안녕하세요 선생님,같은 방식으로 날짜 대신 오늘 시간까지 "시간"이 롤링되며 카운팅되는 효과로 적용해볼 수 있을까요??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
함수가 정의되기 전에 함수 호출
2-1[코드설명]기초다지기! 강의에서 질문1. 코드에서 render함수가 정의되기 전에 getPercent함수에서 render를 호출(실행)하는게 이해가 안되요.. ㅜ_ㅜ함수가 값도 되기 때문에 값을 전달하면서 동시에 호출도 하는것이 가능 한건가요? 질문2. function init(){ getPercent();};이렇게 초기화 하는건 기본으로 꼭 해야하는 동작인가요 질문3.javascript 기초를 듣고 왔는데 익숙해질때까지 강의를 반복수강하는것 말고 익숙해지는 방법이 또 있을까요? 기초를 복습할 수 있는 아주 쉬운 예제가 있는 사이트들이 있다면 추천 부탁드립니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 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~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
- 해결됨초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
코드로보시면 간단합니다.왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다.테일윈드backgroundImage 를 단축어로설정하여 bg-sky2 를사용하면 사진이 불러와집니다. 모든것이 정상 작동잘됍니다. 아래는 제가 작성한 코드중 일부분입니다. <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div>이때 absolute 를 사용하였을떄 bg-sky2 이미지가 안보이게됍니다.일부분 버그인줄 알았습니다. 그래서 다른 백그라운드 색상을 바꾸어보았습니다.bg-sky2 ==>(교체) bg-red-400 동일하게 안보입니다.하지만absolute 를 사용하지 않으면 4개가 스택처럼 쌓이지만 정상적이게 원하는퍼 센테이지에 올떄 없어지고 생성됍니다.고민중이미지로 만들었는데 정상작동 하였습니다.하지만 저는backgroundImage 로넣는것이 필터다 backgroundFixed 등 여러가지 활용이 된다고 생각하여 질문드립니다. <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> 요약absolute을 사용하면 다돌아가던것이 왜인지 안돌아갑니다.개발환경은 next.js tailwind 입니다.(취업못하고 공부용입니다.) 전체코드는 다음과같습니다"use client"; import React, { useRef, useEffect, useState } from "react"; import motion_sky1 from "@/../../public/images2/motion_sky1.gif"; function Page() { const [scrollPercent, setScrollPercent] = useState(0); const scrollBody = useRef(null); console.log(scrollPercent); useEffect(() => { const handleScroll = () => { const scrollRealHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollTop = window.scrollY; const percentScroll = Math.round((scrollTop / scrollRealHeight) * 100); setScrollPercent(percentScroll); }; window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <div ref={scrollBody} className="relative left-0 top-0 h-6000 w-full "> <div>내용</div> {/* <img className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-black transition-opacity duration-500 `} src="/images2/motion_sky1.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-teal-500 transition-opacity duration-500`} src="/images2/motion_sky2.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} src="/images2/motion_sky3.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> */} <div className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute Fixed z-50 h-full bg-sky1 transition-opacity duration-500 `} ></div> <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} ></div> <div className="motion_ggang"> <figure className="ch_body"> {/* 몸 */} <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_body2.png" alt="motion_body2" /> </figure> {/* 손 */} <figure className="ch_hand_right"> <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_hand_right.png" alt="motion_hand_right" /> </figure> </div> {/* 달 */} <figure className="motion_moon"> <img className="fixed h-40 w-32 top-12 right-3" src="/images2/motion_moon.png" alt="motion_moon" /> </figure> </div> ); } export default Page;
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
화면 높이 관련 질문 있습니다.
섹션1높이 - 화면 높이 = 2539px 이라고 하셨는데요!섹션1높이는 알겠는데...화면높이는 브라우저의 실질적으로 콘텐츠가 보이는 곳을 말씀하시는걸까요...? 그럼 실제 스크롤거리는 어디 부분을 말하는걸까요...?즉, 화면 높이와 2539px의 정확한 설명이 필요합니다 ㅠ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
선생님
알려주신 수업예제로 웹사이트 만들어도 되는건가요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 vanilla.html 질문합니다.
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ..scrollMove 라는 함수 매게변수에 moveY가 있는데요.moveY가 움직이는 y값이라고 하셨잖아요그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠?moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-2 질문입니다.
var parallaxSpeed = 1200;와 같이 스피드를 1200으로 설정하는건 따로 이유가 있을까요??
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 추가 질문이요
아래의 질문에서 추가입니다!그리고 if(!sectionIsMoving) //sectionIsMoving이 false일때 실행이 된다고 함그런데 아래에서 secitonIsMoving을 다시 true로 바꿔주는데는 무슨 의미인가요.... 별 설명없이 훅 넘어가셔서요.true로 변경해주는게 어떤 효과를 불러일으키나요.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 ! 질문이요.
8:11에서 var sectionIsMoving을 false로 선언을 해주고아래 movesection에서 if을 써줄때!를 넣어준게 헷갈립니다. sectionIsMoving은 false로 선언이 된건데거기다 !sectionIsMoving을 해주면 false의 부정이라 true가 되는거 아닌가요??아니라면 뭔 차이인지 설명 부탁드립니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요!
안녕하세요!작업중에 스크롤시 이벤트할때 pc는 괜찮은데mo에서 스크롤시 배경과 안에 div 등이 같이 상하로 흔들립니다.<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />메타 태그 설정이 되었는데 ,, 웹호스팅으로 보면 괜찮은데,아임웹에 얹어보면 모바일에서만 흔들립니다.section8,sectiob7스크롤 이벤트가 모두 흔들립니다.. ㅜㅜ혹시 해결안이 있을까하여 강의와 상관없지만 여쭤봅니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
질문드립니다.
아래의 이미지처럼 render function 에서 프로그레스 바는 width : scrollPercent 다음에 '%'를 추가하는건 이해가 가는데text.text(textPercetn + 다음으로 들어오는 '%'는 왜 들어가야하나요?? 혹시나해서 text.text(textPercetn); 로 해봤는데 아예 먹히질 않더라구요function render(textPercent,scrollPercent) { text.text(textPercent + '%'); progressBar.css({ width : scrollPercent + '%' }); };
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
질문드립니다.
예제파일을 받아서 index.html로 제가 직접 코딩을 짜보려고 하는데 처음 부분 console확인 하자마자이런 경고가 뜨는데 이게 왜때문인가요.컴플릿html을 개발자로 열면 이렇게 뜨진 않던데....뭐가 문제일까요 Refused to apply style from 'http://127.0.0.1:5500/library/css/common.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.jquery.1.12.4.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)index.html:1 Refused to execute script from 'http://127.0.0.1:5500/library/js/jquery.1.12.4.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.index.html:88 Uncaught ReferenceError: $ is not defined at index.html:88:2index.html:120 Live reload enabled.index.html:1 Refused to apply style from 'http://127.0.0.1:5500/library/css/common.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
색션6강 카운트관련 문의드립니다!
안녕하세요! 명확한 설명으로 강의해주셔서 감사합니다.6강 오늘날짜 카운트인데 예를들어 2023 04 23 이렇게 앞날짜를제가 지정하는 방법이 있을까요?
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션5 관련 질문드립니다.
섹션5에서 원페이지처럼 한단계씩 넘겨보고싶어이것저것 만져보고있습니다만 강의소스에서 어떤식으로 더 스크립트 작성을진행해야할지 감이 잡히지 않아 문의드립니다. !header.eq(idx).hasClass('active') 이런 방식으로 클래스명으로진행 정도를 체크하고, 넘어갈때마다 idx의 값을 증가시켜서작성해보고 있는데 생각처럼 잘 되진않네요... 코드 작성방향에 혹시 도움을 조금 주실 수 있을까하여 문의드립니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
setProperty 를 재활용 하고싶습니다.
인터렉션이 동작하는 범위를 section으로 구분한다고 하였을 때섹션별로 인터렉션 render 들은 별도로 만들고 해당 섹션이 도달하면 작동 되도록하고싶은데요,그러려면 setProperty 을 공통으로 가져가는게 좋을 것 같은데아니면 setProperty 함수 자체에서 분기를 나누는 것도 방법일까요?if (percent >= 0 && percent < 100) { firstSectionRender(); console.log(`페럴렉스섹션[0] ${percent}`); } if (percent >= 100 && percent < 200) { twoSectionRender(); onsole.log(`페럴렉스섹션[1] ${percent}`); }section을 배열에 담아서 반복문을 돌려야 할까요? 적합한 원리를 잘 모르겠습니다.
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
IntersectionObserver
안녕하세요 선생님~ 강의 7강처럼 고정된 컨텐츠로 포트폴리오를 만들려고 하고있습니다.다만 IntersectionObserver 내장함수를 이용하여 백분율을 좀 더 쉽게 구하는 방법이 있을까요? 몇일째 공부중인데, 잘 모르겠어서 질문드립니다 ㅜ
- 미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
offsetheight와 scrollheight
예시코드:function getPercent(){ let scrollHeight = document.querySelector('.sec01').scrollHeight;} 질문내용: getPercent 함수 맨첫번째줄에서 offsetheight을구하는게 아닌 scrollheight을 구해도 정삭작동했는데 이렇게 했을 시 다른점이있을까요?