- 프로젝트 기간 : 2022-11-16 ~ 2022-11-21
- 위, 아래 스크롤 시 일정 값 이상 보다 커지면 요소를 화면에서 사라지도록 하기
- window : 브라우저에 나타나나는 하나의 탭을 의미한다.
- window 객체는 브라우저가 가지고 있는 여러가지 명령들을 가지고 있다.
addEventListener(scoroll, 함수)addEventListener라는 메소드는 첫번째 이벤트 scroll이 되면 두번째 익명의 함수를 실행하라는 뜻이다.
lodash.js활용하기lodash가 지원하는 메소드 중_.throttle메소드를 활용하여 스크롤시 일정 시간에 한번씩만 실행되도록 제한을 걸어두기 위해 사용한다._.throttle는 특히 스크롤 작업을 할 때 굉장히 많이 사용되는 기능 중에 하나이다._.throttle(우리가 사용하고자 하는 함수, 그 함수가 몇초로 실행하면 되는지 시간을 적어준다(밀리세컨드 단위로!)
- 스크롤시 부드럽게 사라지고 나타날 수 있도록
GSAP를 활용했다. gsap이라는 자바스크립트 애니메이션을 처리해주는 라이브러리에서 to 라는 메소드를 통해 요소와 지속시간, 여러가지 옵션을 명시합니다. 그 옵션 중에는 css 속성과 값을 입력할 수 있다.
- 하나씩 시간차에 나타날 수 있도록 하기
- document 객체에
querySelectorAll이라는 메소드 실행 fadeELs.forEach: HTML 부분에서 찾은 fade-in 요소들의 갯수만큼forEach메소드에 인수로 적은 함수를 실행할 수 있도록 한다.GSAP활용하여 지속시간을 설정했다.- 순차적으로 나타나기 delay : 지연시간을 활용 > (index + 1) * .7 : 곱해주기
벤치마킹하면서 분석한 것들
해당 SHARE 할 수 있는 소셜을 아이콘으로 배치를 해왔다면, 쉽게 할 수 있는 방법으로 이번 프로젝트때 활용 할 수 있었습니다. 사이트를 통해 모양과 소셜 종류를 직접 선택할 수 있습니다.
