코드랩 레퍼런스

See the Pen Hover Effect - Left by Webstoryboy (@webstoryboy) on CodePen. left를 이용한 마우스 오버 효과입니다. 마우스 오버하면 왼쪽에서 나오는 이펙트 효과입니다. 타이틀 이미지 설명 부분입니다. Share

See the Pen Hover Effect - opacity by Webstoryboy (@webstoryboy) on CodePen. Opacity를 이용한 마우스 오버 효과입니다. 가장 기본적인 오버 효과입니다. 타이틀 이미지 설명 부분입니다. Share

레이어 팝업 스타일1 See the Pen layer Popup Style1 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일2 See the Pen layer Popup Style2 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일3 See the Pen layer Popup Style3 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일4 See the Pen layer Popup Style4 by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen layer Popup by Webstoryboy (@webstoryboy) on CodePen. 버튼을 클릭하면 숨겨져 있던 레이어 팝업이 보이는 가장 기본적인 레이어 팝업입니다. Popup1 Layer Popup We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated..

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() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다..