이펙트 만들기/패럴랙스 이펙트 만들기6 패럴랙스 이펙트 06 패럴랙스 이펙트 자바스크립트를 이용해 스크롤 시 다양한 효과가 발생하는 이펙트 만들기 입니다. 패럴랙스 이펙트 06 - 텍스트 효과 스크롤을 내릴 때 텍스트의 각 문자가 시간차를 두고 등장하는 효과입니다. 코드 보기 스크롤 위치에 따라 문자를 나타내는건 쉽지만 각각의 문자를 따로 나타내게 하려면 split( )과 join( )메서드를 사용해야 합니다. 소스보기 -HTML파트- 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛.. 2022. 9. 30. 패럴랙스 이펙트 04 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 04 - 나타나기 스크롤 바를 내릴 때 마다 컨텐츠에 애니메이션이 발동하는 효과합니다. 1. HTML 및 CSS 파트 HTML은 이전과 같지만 CSS에 텍스트와 이미지가 움직이는 효과가 추가됩니다. 소스보기 -HTML 파트- 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. 06 section6 폼은 일시적이지만, 클래스는 영원하다.. 2022. 9. 26. 패럴랙스 이펙트 03 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 03 - 숨김 메뉴 스크롤 위치에 따라 메뉴 바 등 숨겨진 창이 등장하는 효과입니다. 1. 메뉴 바 및 탑 버튼 만들기 스크롤에 따라 나오게 될 메뉴 바와 탑 버튼 제작입니다. 기본적인 구성은 이전 패럴랙스 이펙트 효과와 같고 탑 버튼이 추가되었습니다. 소스보기 -HTML 파트- 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 .. 2022. 9. 24. 패럴랙스 이펙트 05 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 05 - 이질감 효과 스크롤바 위치에 따라 텍스트와 이미지 등이 서로 다르게 움직여 이질감이 느껴지게 하는 효과입니다. ▶ 코드 이질감 효과는 스크롤 좌표값에 오프셋 좌표값을 뺀 값에 약간의 조정을 한 값을 각 컨텐츠에 적용합니다. 스크롤 좌표값과 오프셋 좌표값은 화면에 보이는 좌표값이기 때문에 거의 같아 빼면 0에 가깝게 되지만 오차가 항상 발생해 0이 되진 않습니다. //CSS 코드 #parallax__nav { position: fixed; right: 20px; top: 20px; z-index: 2000; background-color: rgba(0,0,0,0.4); padding: 20px 30px; borde.. 2022. 9. 21. 페럴렉스 이팩트 02 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 02 - 사이드 메뉴 패럴랙스 01과 동일한 효과이지만 매뉴를 사이드에 적용하는 방법입니다. ▶ 화면 구성 형태 이번 효과는 패럴랙스 이펙트 01의 메뉴바를 사이드로 만들고 CSS를 이용해 지정된 부분을 강조하는 원을 그려야 합니다. (사이드 이미지) //HTML 파트 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 사이드 메뉴는 패럴랙스 이펙트 01의 메뉴와 만드는 방법이 동일합니다. 하지만 텍스트를 가려야 하기 때문에 일단 안에 텍스를 넣었습니다. //CSS 파트 CSS로 와 태그에 동일한 크기의 원을 그리고 태그에 position: absolute를 적용해 겹치게 합니다. 이 때 모습은 원이 겹쳐있어.. 2022. 9. 14. 패럴랙스 이펙트 만들기 01 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 01 - 메뉴 이동 따라다니기 스크롤의 위치에 따라 메뉴에 효과를 주거나 메뉴 클릭시 해당 위치로 자연스럽게 이동하는 효과입니다. ▶ HTML 및 CSS 파트 //CSS //HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. 06 section6 폼은 일시적이지.. 2022. 9. 6. 이전 1 다음
