월 24,200원
5개월 할부 시
안녕하세요. :)
섹션 12에서 사용한 수식 보충수업 이 추가되었습니다. ^^..
그리고 섹션12 보너스 예제도 추가되었으니 참고하면 좋을 것 같습니다.
감사합니다. :)
안녕하세요~! 요즘.. 물가도 너무 오르고 다들 여러모로 힘들 것 같네요 ㅠㅠ..
조금이나마 도움이 되고자 보너스 예제 를 추가하였습니다!
PS. 잘 모르겠는건 물어보시면 알려드립니다.
감사합니다 :D
안녕하세요 :)
바닐라 JS 완성 코드를 첨부하여 올려두었습니다.
영상 수업은 모두 업로드된 상태고
바닐라 수업은 섹션2부터 섹션6까지만 진행합니다 :)
이유는
섹션7부터 섹션11에 나오는 jquery패턴은
섹션2~6에서 모두 나오기 때문에 중복되는 수업이라 특별하게 필요하지 않기 때문이구요!
만약 어려운 부분이 있다면 질문에 올려주시면 추가로 만들어 올리도록 하겠습니다 :)
감사합니다.
안녕하세요!!
오늘도 공지드립니다.
1. 맥 크롬 버그 패치
섹션5-2 맥 크롬버그는 개발 단계의 크롬 브라우저에서 발생하지 않습니다.(직접 확인 2022.1.30일)
개발 단계의 크롬 브라우저는 아직 공식 배포되지 않았기 때문에 버그가 발생하지만 후에 공식 버전이 배포되면
사파리 크롬 버그는 발생하지 않을 것으로 예상됩니다. 역시 구글은 재빠르네요 :)
2. edge 브라우저 스무스 스크롤링
어제 edge 브라우저 네이티브 기능인 스무스 스크롤링을 사용하면 섹션5-2에서 버그가 생긴다고 공지드렸었는데요!
오늘 버그 수정 영상을 만들어 올리고
제가 예전에 만들었던 auto slide도 문제가 생기나 확인해 봤습니다.
SJ AUTO SLIDE에도 비슷한 로직을 사용했거든요!
하지만 auto slide에서는 버그가 생기지 않았어요.
그래서 이유를 살펴보니
제가 UI FR을 만들때 자체적으로 개발한 스무스 스크롤 기능이 있습니다.
이기능 때문에 버그가 생기지 않더군요.
하지만 이 기능을 빼면 버그가 생겼습니다.
즉 현재 edge브라우저에 구현된 스크롤링 기술에 문제가 있는건 명확한 사실입니다
제가 생각할 때 edge 브라우저는 버전업을 하며 분명 이 문제를 패치할 거라 생각하는데요
패치가 된다면 굳이 버그 처리를 하지 않아도 되니 참고하면 좋을 것 같습니다.
스무스 스크롤링 기능 같은 경우 다양한 수식을 만들어야 되고
FR이다보니 이곳 저곳 다 얽혀 있기 때문에
수업으로 만드는건 사실상 힘들 것 같아요.
그래도 다양한 버그 처리 패턴을 통해 뭔가 조금이나마 도움이 됐으면 좋겠습니다.
감사합니다 :)
설 연휴 잘보내세요 :D
안녕하세요 :)
업데이트 안내드립니다 :)
1. jquery를 사용해 스크롤 인터렉션을 제작하는 부분의 실습과 설명을 보탠 수업이 모두 추가되었습니다.
만약 수업이 어려운 분이 있다면 코드를 작성하며 설명하는 실습편 수업을 먼저 참고하고 그다음 설명편을 통해 다시 한번 이해하는 패턴을 사용하면 좋을 것 같습니다.
2. 섹션 5-2 섹션이동 인터렉션에 버그를 발견했습니다. 해당 버그는 MAC환경 크롬 브라우저에서 트랙패드 사용시 발생했는데요(아이맥 매직 마우스는 괜찮음)
버그 내용은
한칸씩 이동할 섹션이 브라우저 맨 위에 배치되어 있을 때 트랙패드 등을 이용해 빠른 스크롤을 한다면
맨 처음 섹션이동 애니메이션이 실행되지 않고 그 후부터 애니메이션이 실행되는 경우입니다. (간헐적으로 발생)
해당 버그를 분석한 결과 맥같은 경우 이동할 섹션에 진입할 때 문제가 생겨
섹션에 진입할 때 스크롤 이벤트가 동작하지 않도록 지정했습니다.
즉 wheel이벤트를 추가해 섹션에 진입할 때 wheel을 막고 분기처리해 이벤트에 대한 기본 동작을 하지 않도록 지정해 해결했습니다.
그러나 wheel이벤트만 사용할 경우 윈도우 환경에서 버그가 발생했는데요.
윈도우 환경에서 wheel이벤트만 사용할 경우 버그가 생기는 이유는
윈도우에선 마우스 휠 이벤트가 발생하는 빈도가 맥에 반해 상당히 낮기 때문에 스크롤 값을 제대로 가지고 오지 못하는 버그가 생겼습니다.
쉽게 말해 스크롤 이벤트와 wheel 이벤트가 호출되는 수가 다르다는 말입니다.
그래서 윈도우에선 기존에 작성되어 있던 코드를 그대로 사용하도록 처리합니다.
즉 맥에선 wheel이벤트를 사용하고 윈도우에선 scroll 이벤트를 사용하도록 분기 처리하는 수업이 추가될 예정입니다.
해당 버그는 맥에서도 크롬에서만 발생하는 버그라 구글에서 패치를할 수 있기 때문에 기존 수업을 변경하지 않고 버그 수정 영상을 올리도록 하겠습니다.
(UI구현시 스크롤 이벤트로 스크롤의 위치를 변경할 때 모션을 넣으면 작업이 조금 까다롭습니다.)
3. 바닐라js 변경 작업이 모두 완료되었습니다.
기존에 제이쿼리로 작성되어 있던 부분을 바닐라 js로 변경하는 수업이 추가될 예정입니다.(제이쿼리 함수를 만드는 수업 아님.)
해당 코드는 ie및 오래된 브라우저를 고려하지 않고 작성되었습니다.
바닐라js 코드 변경이 너무 간단하기 때문에 섹션5, 6을 제외한 나머지는 초보자분들도 스스로 변경할 수 있을 거라 생각됩니다.
바닐라 js로 변경한 완성 코드는 섹션별 마지막 step파일에 작성되어 먼저 업로드할 예정입니다.(1월말~2월초)
그리고 바닐라 js로 변경하는 과정의 수업은 2월중 틈틈히 업로드할 예정입니다.(너무 쉬워서 대부분 안볼듯 하지만요^.^;) :D
업데이트된 수업이 어려움을 겪는 분들께 많은 도움이 됐으면 좋겠습니다.
그럼 새해 복 많이 받으시고 행복한 설 연휴 보내시길 바라겠습니다.
감사합니다 :D
안녕하세요 :)
업데이트 상황 알려드려고 메일드립니다 :)
스크롤 인터렉션에서 가장 기본적이며 중요한 부분이 섹션2~5인데요!
일단 이부분은 새롭게 만들어 올려두었고 전보다 더 이해하기 쉬울거라 생각합니다!
- 업데이트 일정 안내 -
사실 제가 목이 상당히 안좋아요. 피곤하면 염증이 잘생겨서 목이 잘 잠깁니다.
그래서 이전에 녹음할때도 상당히 고생했었고
볼륨을 좋게 녹음하려고 목소리를 크게 내다보니 어색한 부분도 생겼었는데요
이번에도 무리해서 업데이트를 진행하다가 목에 염증이 생겼습니다. 그리고 설날도 있고해서
이전에 제이쿼리로 작성된 부분의 실습편 수업은 1월 말 쯤 업데이트가 완료 될 것 같습니다. :(
그리고 바닐라 js로 변경하는 수업은 2월중 업데이트가 될 예정입니다.
급하게 기다리시는 분도 계실것 같아 메일드리며
최대한 빠르게 알찬 수업을 만들어 올리도록 하겠습니다.
감사합니다 :)
안녕하세요 :) 깡코딩입니다.
먼저 스크롤 인터렉션을 수강해준 수강생 여러분께 진심으로 감사의 말씀을 전합니다. ^_^
제가 스크롤 인터렉션을 처음 만들 당시 원리 이해에 중점을 두고 수업을 제작하였는데요.
시간이 흐르다 보니 수강생 여러분 모두를 만족시켜 드릴 수 없는걸 알게 됐습니다.
그래서 기존 수업은 이론편으로 남겨두고
입문자분들까지 모두가 이해할 수 있도록 따라만들며 배우는 실습편 수업을(jquery사용) 추가하고
전체 섹션은 아닐수도 있지만 jquery를 뺀 바닐라 SCRIPT로 스크롤 인터렉션을 구현하는 수업을 추가하려 합니다. (분량이 너무 많지 않다면 모든 섹션 바닐라 수업 추가예정)
총 2개의 수업이 무료로 추가될 것이구요.
저는 제가 만든 수업에 책임감을 느끼고 여러분 모두 만족할 수 있는 수업을 만들겠습니다.
업데이트는 1월 안에 완료할 예정이고 특별한 사항이 있을 경우 2월중에 마무리 될 예정입니다.
다시한번 감사드리며 2022 좋은일만 가득하시길 바라겠습니다.
감사합니다 :)
안녕하세요 :)
수강생 여러분 모두 건강하게 잘 지내고 계신지요?
다름이 아니라 금일 스크롤인터렉션 예제코드가 업데이트 되어 연락드리게 되었습니다.
업데이트 내용은 아래와 같습니다.
1.섹션 10 완성 코드 추가
2.섹션 11 완성 코드 추가
혼자서 코드 분석이 가능하신 분들은 완성코드를 참조하시면 될 것 같고
공부가 목적인 분들은 섹션 10, 섹션11에 있는 미션을 처리해 보시길 바라겠습니다.
섹션10과 섹션11은 앞서 배운 내용들을 가지고 만든 수업이기에 혼자서 해결해보시는걸 추천드립니다 :)
감사합니다 :D
10월28일 강의 업데이트 내용
안녕하세요 깡코딩입니다:)
섹션11이 추가되었습니다 :D
본 수업은 앞서 배운 스크롤 수식과 SVG, 영상을 활용해 만드는 인터렉션입니다 :D
수업 예제 코드를 다시 다운로드하고 수업을 진행해 주세요 :D
코로나 19로 인해 사람들을 만나기도 망설여지는데요. 힘든 시기일수록 함께 이겨내며 따뜻한 말 한마디 건네는 하루가 됐으면 좋겠습니다.
좋은하루 보내세요 :D
감사합니다 :D
Section 11 추가 예정
안녕하세요! 날씨가 점점 쌀쌀해지고 있습니다. 모두 잘 지내고 계시겠지요?
다름이 아니라 섹션 11이 곧 추가되어 연락드리게 됐습니다.
수강평을 남겨주시는 분들 덕분에 정말 힘이되서 더 유익한 수업으로 보답하고자 다시 보충 강의를 추가하게 되었습니다. 감사합니다 :D
섹션11은 SVG 와 영상으로 만드는 인터렉션입니다 (지식 공유자와 함께 만드는 수업)
앞서 배운 스크롤 수식을 활용해서 SVG,영상 인터렉션을 아주 쉽게 만들어봅니다^^
- 10월 말 추가예정 -
▲ SVG와 영상활용 인터렉션
10월14일 강의 업데이트 내용
안녕하세요 깡코딩입니다:)
섹션10에 도전과제가 추가되어 메일을 드리게 되었습니다 :D
본 수업은 앞서만든 섹션10예제를 커스텀하는 도전과제 수업입니다.
섹션에 진입시 한번 실행 되어야 할 함수와
계속 실행되어야할 함수를 분리시켜 보세요
빠른 길을 찾는다면 3줄이면 처리 가능하지만
빠른 길을 못찾아도 과정에서 얻는게 많을거라 생각됩니다 :D
스스로 도전해 만들어보고
도움이 필요 할 경우 수업 영상을 참고하세요!
10월09일 강의 업데이트 내용
안녕하세요 수강생 여러분. 추석은 잘 보내셨나요??
다름이 아니라 보충 수업이 추가되어 메일을 드리게 됐습니다 :D
1. 섹션5-3-2 추가
섹션5-3 다중 패럴럭스 수식 부분을 디테일하게 설명하는 보충 수업이 추가되었습니다 :D
다중 패럴럭스에서 수식 부분이 어려웠던 분들은 추가된 보충 수업을 참고하시면 이해가 더 빠를거라 생각됩니다 :)
코로나 19로 인해 사람들을 만나기도 망설여지는데요. 힘든 시기일수록 함께 이겨내며 따뜻한 말 한마디 건네는 하루가 됐으면 좋겠습니다.
좋은하루 보내세요 :D
9월17일 강의 업데이트 내용
1. 섹션10추가
그동안 배운 인터렉션을 토대로 따라 만들며 배우는(코드 작성하며 강좌 진행) 스크롤UI와 3D모델
2. 코드 줌인기능추가
모든 강의에 코드 줌인 기능이 추가 되었습니다. 조금더 강의를 편안하게 볼 수 있습니다.
3. 보너스UI 오픈소스 모덜덜컹 싫어요 버그수정
스크롤바가 없을때 덜컹 거리던 버그 수정
Section 10-1
섹션10이 추가되었습니다 섹션10 UI는 그동안 배웠던 기본기를 토대로 만들어졌고 지식 공유자와 함께 만드는 강의 입니다:D
▲ 스크롤을 할때 섹션 위치에 반응하는 네비게이션 활성화, 섹션의 제목과 매치되어 변경되는 타이틀 텍스트, 섹션마다 변경되는 텍스트 컬러 앞서 배운 강좌를 응용해 다음 3가지 기능을 가지고 있는 UI를 구현해봅니다.
Section 10-2
css를 활용해 3D모델을 만들고 스크롤을 할때 변형 되도록 구현해봅니다마치 한편의 CF같지 않나요??
▲ css를 활용해 3D 모델 만들어보기
Section 10-3
간단하게 따라해보는 응용편 앞서 배운 3d모델에 이미지를 적용해 사물을 만들어 보고 스크롤을 할때 조금더 입체감 있게 움직이도록 구현해봅니다.
▲ 비디오나 대량의 이미지를 사용하지 않아도 기본적인 3d효과를 구현
Section 10-4
앞서 배운 3d모델에 각각의 섹션 이미지를 적용해 섹션에 맞는 이미지로 변경되도록 처리합니다
▲ 섹션 이미지와 3D모델 이미지 매치
값 하나를 수정해 4차원공간 느낌의 효과와 이런 라인효과도 만들 수 있어요!
▲ 값 하나 수정해서 이런것도 가능하다니?? :D
PS. 섹션10 강의에 나오는 인터렉션은 클론이 아닌 지식공유자의 아이디어로 만들어진 인터렉션입니다.
안녕하세요 :D
깡코딩입니다. 즐프 하고 계신가요??
오늘은 수강생 분들께 기쁜소식을 전하로 왔습니다.
1.다음 주 중 초보자를 위한 스크롤인터렉션 1편에 섹션10이 추가됩니다.
섹션10에서는 앞서 배운 스크롤 인터렉션으로 구현하는 UI만들기 강의가 추가되고
추가되는 스크롤UI와 함께 구현되는 간단한 이펙트 만들기 강의도 추가됩니다
아마도 섹션1~9까지 반복 시청하여 이해도를 높이셨다면 수강생님들도 충분히 구현 가능한 UI라고 생각됩니다.
2.섹션10을 추가하는 이유는??
여러분이 강의를 응용해 창의적인 결과물을 만들었으면 좋겠습니다.
앞으로 추가될 섹션10은 예제만 봤을때 어떻게 만들지? 하고 고민에 빠질수 있는 UI와 이펙트입니다
하지만 막상 강의를 보고 난다면 그동안 배운 것들로 아주 쉽게구현할 수 있다는걸 알게 되실 겁니다
강의에서 정답을 알려드리는것 같지만 정답이 아니라
"오랜시간 노하우에서 나온 구현원리와 핵심을 긴 설명을 통해서 알려드리는 겁니다"
여러분이 제가 알려드린 노하우 (구현원리, 핵심)를 활용, 응용해 본인만의 독창적이고 창의적인 웹사이트를 구현하며
크리에이티브한 웹 만들기의 재미를 아셨으면 좋겠습니다. :D
그럼 항상 건강 조심하시고 하시는 일에 행운만 가득하길 바라겠습니다 :)
ps.( 혹시 섹션11도 기대하는 분들이 계실지 몰라 말씀드립니다. 더이상 추가되는 강의는 없습니다)
깡코딩 오픈소스 BONUS UI
PS. 실무에서 활용 가능한 보너스UI는
강의가 없고 예제 코드만 있습니다
▲ 캔버스 원 그리기
▲ 이미지 파노라마
▲ 이미지 탭
▲ 모달 덜컹 싫어요:(
대단한건 아니지만 예전에 취준생 분들,신입 분들, 자바스크립트가 약한 분들을 위해 오픈 소스를 만들어 커뮤니티에 공유 했었습니다 :D (신나는 마음으로 만들었었네요) 배포했던 UI는
1. 캔버스 원 그리기(도넛차트 그리기)소스였습니다. 다양하게 원을 그릴수 있어요 :D
2. 이미지 파노라마 이미지가 슬라이드되면 무한루프되는 파노라마입니다 :D
3. 이미지탭
4. 모달덜컹 싫어요(모달을 열면서 스크롤바를 없앨때 덜컹 거리는 문제를 해결)
위 코드 역시 인프런 수강생님들께 도움이 됐으면 하는 바램으로 강의 예제 파일에 보너스 UI로 첨부하였습니다 :D 예제 파일에 보시면 bonus_ui폴더에 있으니 잘 활용해 주시길 바라겠습니다 :)
보너스UI같은 경우 강의는 없지만 스스로 로그도 찍어보고 코드도 변경해 보면서 공부해보며 사용해보시길 바라겠습니다. 나중에 시간이 되면 유튜브를 통해 무료 강의로 올릴 예정이니 코드 분석이 어려운 분들은 나중에 유튜브를 참고해 주세요 :D
코로나 조심하시고 건강 잘 챙기시길 바라겠습니다 :)
