본문 바로가기
반응형

스크롤2

패럴랙스 이펙트(Parallax Effect) : 가로 효과, 세로/가로 효과 패럴랙스 이펙트(Parallax Effect) : 가로 효과, 세로/가로 효과 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 가로 효과 코드 보기: HTML, JAVASCRIPT / CSS1 / CSS2 / 완성화면 코드 블럭 Javascript parallax Effect09 패럴랙스 이펙트 : 가로/세로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px 구성 header 태그를 사용해서 제목과 목록을 태그를 사용해 각각 만들어줍니다. nav 태그를 사용해서 메뉴 목록을 태그를 사용해서 만들어줍니다. main 태그를 사용해서 구역 안에 section 태그를 사용해서 각각 알맞는 구성의 태그와 텍스트를 입력해줍니다... 2023. 5. 31.
패럴랙스 이팩트(Parallax Effect) 예시 패럴랙스 이팩트(Parallax Effect) 예시 완성화면 코드 블럭 https://github.com/dongjin6539/web2023/blob/main/javascript/parallax/parallaxEffectExam.html webs 2023 hello 모두 다함께 시작한 코딩!! 힘들겠지만 끝까지 화이팅입니다!! FIGHTING!!! 구성 각 구역에 알맞은 태그를 사용해서 텍스트를 입력해줍니다. style 태그로 가서 알맞는 스타일을 입력해서 속성을 입혀줍니다. 스크롤마다 효과를 입혀주기 위해 cdn skrollr의 링크를 가져옵니다.(https://cdnjs.com/libraries/skrollr) 사용 방법을 입력하고 사용해줍니다. 스크롤마다 스타일을 입력하는 방법은 data-숫자(sc.. 2023. 4. 20.
반응형