Thumbnail
BEST 개발 · 프로그래밍 웹 개발
초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
(4.5)
19개의 수강평 ∙ 342명의 수강생
121,000원

월 24,200원

5개월 할부 시
지식공유자 : 깡코딩
총 49개 수업˙총 6시간 43분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 682 공유
깡코딩 프로필
안녕하세요 :D 예제코드가 업데이트 되었습니다.
깡코딩 4달 전

안녕하세요 :)

수강생 여러분 모두 건강하게 잘 지내고 계신지요?

다름이 아니라 금일 스크롤인터렉션 예제코드가 업데이트 되어 연락드리게 되었습니다.

업데이트 내용은 아래와 같습니다.

1.섹션 10 완성 코드 추가

2.섹션 11 완성 코드 추가

혼자서 코드 분석이 가능하신 분들은 완성코드를 참조하시면 될 것 같고

공부가 목적인 분들은 섹션 10, 섹션11에 있는 미션을 처리해 보시길 바라겠습니다.

섹션10과 섹션11은 앞서 배운 내용들을 가지고 만든 수업이기에 혼자서 해결해보시는걸 추천드립니다 :)

감사합니다 :D

다른 댓글 보기(1)
깡코딩 프로필
10월28일 강의 업데이트 내용
깡코딩 7달 전

10월28일 강의 업데이트 내용

안녕하세요 깡코딩입니다:)

섹션11이 추가되었습니다 :D

본 수업은 앞서 배운 스크롤 수식과 SVG, 영상을 활용해 만드는 인터렉션입니다 :D

수업 예제 코드를 다시 다운로드하고 수업을 진행해 주세요 :D

코로나 19로 인해 사람들을 만나기도 망설여지는데요. 힘든 시기일수록 함께 이겨내며 따뜻한 말 한마디 건네는 하루가 됐으면 좋겠습니다.

좋은하루 보내세요 :D

감사합니다 :D

깡코딩 프로필
안녕하세요 섹션11이 추가됩니다 :D
깡코딩 7달 전

Section 11 추가 예정

안녕하세요! 날씨가 점점 쌀쌀해지고 있습니다. 모두 잘 지내고 계시겠지요?

다름이 아니라 섹션 11이 곧 추가되어 연락드리게 됐습니다.

수강평을 남겨주시는 분들 덕분에 정말 힘이되서 더 유익한 수업으로 보답하고자 다시 보충 강의를 추가하게 되었습니다. 감사합니다 :D

섹션11은 SVG 와 영상으로 만드는 인터렉션입니다 (지식 공유자와 함께 만드는 수업)

앞서 배운 스크롤 수식을 활용해서 SVG,영상 인터렉션을 아주 쉽게 만들어봅니다^^

- 10월 말 추가예정 -

▲ SVG와 영상활용 인터렉션

깡코딩 프로필
섹션10에 도전과제가 추가되었습니다 :)
깡코딩 8달 전

10월14일 강의 업데이트 내용

안녕하세요 깡코딩입니다:)

섹션10에 도전과제가 추가되어 메일을 드리게 되었습니다 :D

본 수업은 앞서만든 섹션10예제를 커스텀하는 도전과제 수업입니다.

섹션에 진입시 한번 실행 되어야 할 함수

계속 실행되어야할 함수를 분리시켜 보세요

빠른 길을 찾는다면 3줄이면 처리 가능하지만

빠른 길을 못찾아도 과정에서 얻는게 많을거라 생각됩니다 :D

스스로 도전해 만들어보고

도움이 필요 할 경우 수업 영상을 참고하세요!

깡코딩 프로필
10월 9일 강의가 업데이트 되었습니다!
깡코딩 8달 전

10월09일 강의 업데이트 내용

안녕하세요 수강생 여러분. 추석은 잘 보내셨나요??

다름이 아니라 보충 수업이 추가되어 메일을 드리게 됐습니다 :D

1. 섹션5-3-2 추가 

섹션5-3 다중 패럴럭스 수식 부분을 디테일하게 설명하는 보충 수업이 추가되었습니다 :D

다중 패럴럭스에서 수식 부분이 어려웠던 분들은 추가된 보충 수업을 참고하시면 이해가 더 빠를거라 생각됩니다 :)

코로나 19로 인해 사람들을 만나기도 망설여지는데요. 힘든 시기일수록 함께 이겨내며 따뜻한 말 한마디 건네는 하루가 됐으면 좋겠습니다.

좋은하루 보내세요 :D

깡코딩 프로필
강의가 업데이트 되었습니다 :D
깡코딩 9달 전

9월17일 강의 업데이트 내용

1. 섹션10추가 

그동안 배운 인터렉션을 토대로 따라 만들며 배우는(코드 작성하며 강좌 진행) 스크롤UI와 3D모델

2. 코드 줌인기능추가

모든 강의에 코드 줌인 기능이 추가 되었습니다. 조금더 강의를 편안하게 볼 수 있습니다.

3. 보너스UI 오픈소스 모덜덜컹 싫어요 버그수정

스크롤바가 없을때 덜컹 거리던 버그 수정

업데이트된 섹션10 미리보기

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 강의에 나오는 인터렉션은 클론이 아닌 지식공유자의 아이디어로 만들어진 인터렉션입니다.

깡코딩 프로필
스크롤인터렉션 1편에 섹션10이 추가됩니다
깡코딩 9달 전

안녕하세요 :D

깡코딩입니다. 즐프 하고 계신가요?? 

오늘은 수강생 분들께 기쁜소식을 전하로 왔습니다. 

1.다음 주 중 초보자를 위한 스크롤인터렉션 1편에 섹션10이 추가됩니다.

섹션10에서는 앞서 배운 스크롤 인터렉션으로 구현하는 UI만들기 강의가 추가되고

추가되는 스크롤UI와 함께 구현되는 간단한 이펙트 만들기 강의도 추가됩니다

아마도 섹션1~9까지 반복 시청하여 이해도를 높이셨다면 수강생님들도 충분히 구현 가능한 UI라고 생각됩니다.

2.섹션10을 추가하는 이유는??

여러분이 강의를 응용해 창의적인 결과물을 만들었으면 좋겠습니다.

앞으로 추가될 섹션10은 예제만 봤을때 어떻게 만들지? 하고 고민에 빠질수 있는 UI와 이펙트입니다

하지만 막상 강의를 보고 난다면 그동안 배운 것들로 아주 쉽게구현할 수 있다는걸 알게 되실 겁니다

강의에서 정답을 알려드리는것 같지만 정답이 아니라

"오랜시간 노하우에서 나온 구현원리와 핵심을 긴 설명을 통해서 알려드리는 겁니다"

여러분이 제가 알려드린 노하우 (구현원리, 핵심)를  활용, 응용해 본인만의 독창적이고 창의적인 웹사이트를 구현하며

크리에이티브한 웹 만들기의 재미를 아셨으면 좋겠습니다. :D

그럼 항상 건강 조심하시고 하시는 일에 행운만 가득하길 바라겠습니다 :)

ps.( 혹시 섹션11도 기대하는 분들이 계실지 몰라 말씀드립니다. 더이상 추가되는 강의는 없습니다)

깡코딩 프로필
실무에서 활용 가능한 보너스UI 예제코드가 추가되었습니다 :D
깡코딩 9달 전

깡코딩 오픈소스 BONUS UI

PS. 실무에서 활용 가능한 보너스UI는

강의가 없고 예제 코드만 있습니다

▲ 캔버스 원 그리기

▲ 이미지 파노라마

▲ 이미지 탭

▲ 모달 덜컹 싫어요:(

대단한건 아니지만 예전에 취준생 분들,신입 분들, 자바스크립트가 약한 분들을 위해 오픈 소스를 만들어 커뮤니티에 공유 했었습니다 :D (신나는 마음으로 만들었었네요) 배포했던 UI는

1. 캔버스 원 그리기(도넛차트 그리기)소스였습니다. 다양하게 원을 그릴수 있어요 :D

2. 이미지 파노라마 이미지가 슬라이드되면 무한루프되는 파노라마입니다 :D

3. 이미지탭 

4. 모달덜컹 싫어요(모달을 열면서 스크롤바를 없앨때 덜컹 거리는 문제를 해결) 

위 코드 역시  인프런 수강생님들께 도움이 됐으면 하는 바램으로 강의 예제 파일에 보너스 UI로 첨부하였습니다 :D 예제 파일에 보시면 bonus_ui폴더에 있으니 잘 활용해 주시길 바라겠습니다 :)

보너스UI같은 경우 강의는 없지만 스스로 로그도 찍어보고 코드도 변경해 보면서 공부해보며 사용해보시길 바라겠습니다. 나중에 시간이 되면 유튜브를 통해 무료 강의로 올릴 예정이니 코드 분석이 어려운 분들은 나중에 유튜브를 참고해 주세요 :D

코로나 조심하시고 건강 잘 챙기시길 바라겠습니다 :)

깡코딩 프로필
강좌를 응용하여 본인이 원하는 스크롤 인터렉션을 만들기 위해서는? 효율적인 학습 방법!
깡코딩 10달 전

안녕하세요 깡코딩입니다 :)

스크롤 인터렉션1편을 효율적으로 학습하는 방법에 대해 알려드리겠습니다:)

첫번째!

섹션2부터 차분히 시청하며 스크롤 인터렉션 원리에 대해 꼭 이해하기! 강좌를 중간부터 보시는 분들이 계신듯 한데 스크롤 인터렉션 강좌1편의 수업내용은 섹션2부터 섹션9까지 계속 응용되어 반복되고,   반복학습을 통해  자연스레 원리에 대해 이해하도록 제작하였습니다.

두번째!

 코드를 테스트 하는 부분은 완성되어 있는 예제 코드를 직접  수정해 보고 수식과 관련된 변수들은 로그를 찍어보며 개인적인 시간 투자를 통해 꼭 복습해 보는 것을 추천드립니다.

세번째! 알아두면 좋은점!

강좌에서 코드 작성 시간을 줄이고 작성해둔 코드를 상세하게 설명하는데 초점을 맞추는 이유는 프로그램을 제작할때 프로그램 실행 순서와 프로그램 전체 구조를 파악하는게 가장 중요하기 때문입니다.

전체 구조를 파악하고 실행순서를 이해하게 되면 프로그램을 커스텀하거나 오류가 생길때 어느 부분을 먼저 수정하고 개선해야할지 정확하게  머릿속에 그려지게 됩니다! 프로그램의 전체 구조를 머릿속에 그리는 습관을 기르신다면 나도 모르는 사이에 프로그램 구조를 만드는데 있어서 노하우가 생기기 시작할겁니다:)

저도 처음 시작할때 무작정 코드를 타이핑 하는 코딩방법으로 배웠었지만 이해도 안가고 배우기도 힘들어서 무의미한 시간을 보내는 듯 하여 너무 지루했던 기억이 있습니다. 무작정  코드를 따라치며 배우는 프로그래밍 교육 방법은 학습 능률이 떨어진다고 생각되어 과감히 배제하였습니다. 

121,000원

월 24,200원

5개월 할부 시
내 목록 추가 682 공유
지식공유자 : 깡코딩
총 49개 수업˙총 6시간 43분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스