코드랩 레퍼런스

Dot Menu Style1 See the Pen Parallax = Dot Menu Style1 by Webstoryboy (@webstoryboy) on CodePen. Dot Menu Style2 See the Pen Parallax = Dot Menu Style2 by Webstoryboy (@webstoryboy) on CodePen. Dot Menu Style3 See the Pen Parallax = Dot Menu Style3 by Webstoryboy (@webstoryboy) on CodePen.

See the Pen Parallax = Dot Menu by Webstoryboy (@webstoryboy) on CodePen. Intro Skill Website Work About Contact Think Different Raise Your Head The Life is only once I must do what I want to do Time is Life itself There is no destiny Share

패럴랙스 사이트(ParallaxScrolling)와 메뉴를 연동하여 각 섹션에 해당하는 메뉴를 표시해주는 예제입니다. Parallax Basic 예제에서 추가되는 작업입니다. See the Pen parallax = menu by Webstoryboy (@webstoryboy) on CodePen. offset값과 scrollTop값이 같으면 화면에 해당 섹션이 보입니다. scroll값이 offset값과 같거나 크면 메뉴에 active라는 클래스가 붙습니다. 이런 원리를 이용하면 패럴랙스의 기본이 완성이 됩니다. Jquery Property .eq() : .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다. .offset() : .offset() 메서드는 선택한 요소의 좌표 값(문서 ..

패럴랙스 사이트(ParallaxScrolling)의 가장 기본이 되는 예제입니다. 각 버튼의 값과 각각의 컨텐츠 값을 ainmate로 연결해주는 작업입니다. 그럴려면 스크롤 값을 구해서 body한테 넣어주면 자연스러운 애니메이션이 형성됩니다. See the Pen Parallax by Webstoryboy (@webstoryboy) on CodePen. Jquery Property .eq() : .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다. .offset() : .offset() 메서드는 선택한 요소의 좌표 값(문서 기준)을 설정하거나 반환합니다. .animate() .scrollTop() : .scrollTop() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다..