ggangcoding162118

안녕하세요. 먼저 다음 강의를 기다려 주셔서 감사합니다. 현재 여러가지 이유로 아직 계획을 못잡고 있습니다. 좋은 소식으로 찾아 뵐 수 있도록 노력하겠습니다. 감사합니다.😊

다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요

안녕하세요. 포토샵이 없을 경우 포토샵에서 어떤 작업을 하는지 참고만 하면 좋을 것 같습니다. 포토샵으로 대단한 그래픽 작업을 하는게 아니라 이미지의 크기를 분석하는 등의 기본적인 작업만 하기에 참고만 하여도 될 것 같고, 만약 직접 해보고 싶은데 포토샵이 없다면 해당 작업을 대체할 수 있는 무료 그래픽 툴을 찾아서 하는 것도 방법이 될 수 있을것 같네요. :)

캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?

글에 작성하신 예제 코드는 삭제부탁드립니다~ :)

swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터

<h2>이미지 이펙트를 스와이프 슬라이드에서 실행하는 방법입니다 :)</h2>&nbsp;<h3>스와이프 최신 버전을 추가하세요</h3><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css"><script src="<a target="_blank" rel="noopener noreferrer nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>">https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script></a>&nbsp;<h3>html을 변경하세요</h3><section class="sec01">&nbsp; <h2 class="tit">&nbsp; &nbsp; HELLO :D&nbsp; &nbsp; GGANG CODING&nbsp; </h2>&nbsp; <div class="swiper-container">&nbsp; &nbsp; &nbsp; <div class="swiper-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="swiper-slide slide1"><div class="ggang_effect bg01"></div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="swiper-slide slide2"><div class="ggang_effect bg02"></div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="swiper-slide slide3"><div class="ggang_effect bg03"></div></div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="swiper-button-next"></div>&nbsp; &nbsp; &nbsp; <div class="swiper-button-prev"></div>&nbsp; </div></section>&nbsp;<h3>스와이프 슬라이드를 초기화 하고 콜백 함수에서 이미지 이펙트를 실행하세요</h3>&nbsp;$(function(){&nbsp; const swiper = new Swiper('.swiper-container', {&nbsp; &nbsp; effect: 'fade',&nbsp; &nbsp; speed: 0,&nbsp; &nbsp; navigation: {&nbsp; &nbsp; &nbsp; &nbsp; nextEl: '.swiper-button-next',&nbsp; &nbsp; &nbsp; &nbsp; prevEl: '.swiper-button-prev',&nbsp; &nbsp; },&nbsp; &nbsp; on: {&nbsp; &nbsp; &nbsp; init: function () {&nbsp; &nbsp; &nbsp; &nbsp; var thisSlide = $('.swiper-container').find('.swiper-slide').eq(0);&nbsp; &nbsp; &nbsp; &nbsp; ggangImgEffect(thisSlide, 'ran'); // 최초 처음실행&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; slideChange: function () {&nbsp; &nbsp; &nbsp; &nbsp; var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex);&nbsp; &nbsp; &nbsp; &nbsp; ggangImgEffect(thisSlide, this.activeIndex);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });});&nbsp;

안녕하세요 :)CSS 작성 방식은 프로젝트 요구사항 또는 개발자들의 취향에 따라 달라질 수 있을 것 같아요.개인적인 생각으로는 모바일이 우선인 프로젝트라면 모바일부터 PC 가 우선이면 PC부터 작성하면 될 것 같습니다.즉 상황에 따라 작성하면 될 것 같고웹 사이트의 미니멈과 맥시멈 사이즈는 기획자분과 논의하여 처리하면 될 것 같습니다.물론 다양한 경우의 수가 있겠지만인터랙티브한 사이트는 1920사이즈가 넘어가면 성능에 영향을 주는 경우도 있기에 초기에 고려하여 작업 면 될 것 같습니다 :)물론 개발자의 작업 방식에 따라 달라지겠지만 이너 사이즈를 1920에 맞추고 나머지는 100%로 활용한다면 1920이상의 디자인에도 대응되는 경우가 있지만 디자인에 따라 다른 사항이니 상황에 따라 협의하여 진행하면 될 것 같습니다. :)그럼 또 다른 궁금증이 생기면 문의주세요 :D

반응형에 대해 질문이 있습니다 !

안녕하세요수업에서 requestAnimationFrame은 무한 반복 되는게 맞습니다~ 필요에 따라 requestAnimationFrame을 종료해야 한다면 cancelAnimationFrame을 사용하여 정지하면 됩니다 :)

renderGame 함수에 로그를 찍으면 무한루프가 돕니다

안녕하세요:D네 규격만 맞추면 가능합니다. 😄 만약 규격을 맞추는 작업이 오히려 복잡하다면 소스를 수정하여 만들면 될 것 같습니다.그럼 또 다른 궁금증이 생기면 문의주세요 :)

날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?

안녕하세요 :)해당 부분은 getPercet, render 함수를 먼저 작성하였지만 해당 함수들은 바로 실행되는 것이 아니라 메모리에 올라가 있는 상태이고요 init 함수를 호출하면 순차적으로 함수들이 호출됩니다: D 이 부분에 대해 더 자세히 공부하고 싶다면 호이스팅에 관하여 알아보면 도움이 될 것 같아요. :)&nbsp;그리고 그 외 질문에 대한 주관적인 생각입니다~ 사실 코딩 문법 숙지는 많이 하다 보면 자연스럽게 국어처럼 익숙해져서 어느 순간 잘 알게 되어 있어요. 그리고 계속 개발을 하다 보면 문법은 그냥 기초적인 부분이라고 깨우치게 되실거고 중요한건 문법이 아니라 설계를 하고 문제를 해결하는 부분이 더 중요하단 걸 알게 되실 거예요. 다만 문법을 빠르게 숙지 하기 위해선 반복 학습이 최고라고 생각 되네요~!그럼 또 다른 궁금증이 생기면 문의주세요 :)

함수가 정의되기 전에 함수 호출

안녕하세요 :)먼저 해당 질문은 수업과 연관이 없는 부분이고 굳이 왜 그렇게 구현을 해야하는지 의문이 드네요^^;이 문제를 해결하려면 먼저 animation 속성의 특징을 살펴보고 직접 테스트를 진행해 봐야 할 것 같습니다.(섹션 12는 animation 을 활용해 인터렉션을 구현했기 때문이죠?)&nbsp;** 굳이 억지로 구현해야 한다면 아래와 같이 구현할 수 있을것 같지만 이 코드는 브라우저마다 호환성이 떨어질 수 있습니다. 이유는 브라우저마다 animation을 처리하는 부분이 다를 수 있기 때문입니다.&nbsp;css수정 (코드 추가).fix_box .txt.active {opacity: 1 !important;}&nbsp;html수정 (첫번째 엘리먼트에 클래스 추가)안녕하세요스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬)&nbsp;스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬)arr.classList.remove('active');&nbsp;<code>** 다시한번 말하지만 위 코드는 여러 브라우저에서 다르게 동작할 수 있습니다(크롬에서 테스트 진행). 억지로 구현해야 한다면 css animation에 대해 살펴보고 조건문 등을 활용해 직접 테스트를 진행해 보길 추천드립니다. :)</code>&nbsp;** 만약 해당 문제를 꼭 해결해야 한다면 fake엘리먼트를 사용해 보는 것도 방법이 될 수 있겠습니다. :)그럼 또 다른 궁금증이 생기면 문의주세요 :D&nbsp;

섹션12 보너스 챕터에 관한 질문입니다!

안녕하세요! :) 영상에 보면 모두 나와 있는 내용인데 다시 한번 설명드릴게요 :) 그리고 섹션5가 조금 난이도가 있는 편이고 수업의 수식 코드는 계속 반복되기에 조금 어렵다면 처음부터 끝까지 한번 학습하고 다시 한번 학습해 보는걸 추천드립니다. ^^&nbsp;[질문] parallaxSpeed를 1200로 초기화 하셨는데, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요 ? 숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다. 혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.답변 : start, end값을 생각하시는 걸 보니 패럴럭스 오픈소스 라이브러리 개념으로 접근하셔서 혼동스러워 하는 것 같네요~! 물론 코드를 조금 응용하면 start, end값으로 작동하도록 변경할 수 있습니다. 수업에서는 섹션 .sec_parallax 엘리먼트를 기준으로해 백분율(패럴럭스 시간)을 구하는데요. 이 엘리먼트의 위치값을 계산해 parallaxThisTop에 담았고 이 값이 패럴럭스 시작 기준이 되는 겁니다. ^^ 그리고 parallaxSpeed 값으로 백분율 시간을 조절해 패럴럭스 요소들이 조금 더 빨리 이동하고 느려지도록 조절하고 있는데요. 이 부분이 end값(거리)이라고 생각하면 될 것 같습니다. 어떻게 보면 start, end 값과 비슷하지만 이 예제에선 스피드 개념에 더 가깝다고 생각하면 될 것 같아요.&nbsp;parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음[질문] 여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요답변 : 이 부분은 위 답변에서 설명한 부분입니다. parallaxPercent 백분율을 구하는 부분이예요 :) 수업에서 여러 차례 나오는데 이 백분율 값을 조정해 패럴럭스 시간을 구하고 이동할 거리를 백분율 값에 곱해 인터렉션을 구현하는 겁니다. :)&nbsp;var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.[질문] 패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다답변 : 네 요소는 이미지가 맞습니다. :) css 코드를 보면 이미지는 position: absolute로 위치를 잡아 두었고 js코드를 보면 translate로 위치값을 조정하는데요. 이때 parallaxStartValue를 이용해 parallaxMoveDistance 값을 구했고 이 값이 이미지 요소에 translate 로 적용되어 이미지 위치를 조정하는 겁니다. (개발자 도구로 확인해 보면 스크롤 전에 parallaxStartValue 값이 이미지에 적용되어 있는 것을 확인할 수 있을 거예요.) 다시 한번 말씀드리는데 영상에 모두 나와있는 내용입니다. parallaxThisTop은 위에서 충분히 설명드렸네요 ^^;&nbsp;[질문] 첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함답변 : 이 부분은 위에서 모두 설명한 내용입니다. :) 제 생각엔 의미 부여로 접근하기보다 로그를 찍어보며 수식, 작동 원리에 대한 이해로 접근하는 게 좋을 것 같네요 ^^&nbsp;[질문] parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.답변 : 모든 변수명에 para~를 붙인 이유는 스코프 개념이 없는 초보자 분들을 위함입니다. :) 이 수업은 기초적인 부분보다는 수식과 스크롤 인터렉션에 대한 이해에 중점을 두고 있습니다 :) parallaxPercent 역시 위에서 충분히 설명했다고 생각이 드네요 ^^&nbsp;그럼 또 다른 궁금증이 생기면 문의주세요 :D&nbsp;

ggangcoding162118

Posts