초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

안녕하세요. :)

 

섹션 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