안녕하세요~!
오늘은 자바 스크립트-j Query 라이브러리의 접속방법과 사용법 중 2번 JS(=j Query)를 활용해 패러락스(Parallax) 스크롤효과를 구현할 예정입니다!
앞부분 라이브러리를 설치하신 후에 html에 js를 연결하는 방법까지는 아래 글들과 같으니 원활한 진행을 위해 1)번 Attibute를 이용하는 방법을 먼저 보시고 뒤따라가시면 됩니다!
▼ パララックス ライブラリ ダウンロード Installation Download and include parallax . min . js in your document after including jQuery . < script src = ” https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js ” > < / script > < script src = ” / path / to / parallax . js ” > < / script > Usage Via data attributes To easily add a parallax effect behind an elemen … pixelcog.github.io
▼ JS 라이브러리 – (1) Attibute를 이용하는 방법 (js 다운로드 후 접속 방법) 안녕하세요! 오늘은 JavaScript – jQuery 기능의 패러락스(Parallax) 스크롤 효과 라이브러리 접속 방법… blog.naver.com 위의 문장을 따라 스크립트 소스를 포함한 CSS 링크로 연결해 주세요.
연결한 후 현재 코디 화면입니다!위의 사진과 같이 CSS와 스크립트 소스까지 잘 연결했다면 아래를 따라 진행하세요!
오늘은 위 사진 중 두 번째인 Java Script를 이용해서 결부시키는데, 달러 기호$를 사용하는 것으로 봐서 jQuery라고 생각하시면 됩니다.
저는 1번 attribute를 이용하는 것보다 js를 직접 설정하는 이 방법을 더 추천합니다.
att.를 사용하면 class명을 마음대로 바꿀 수 없기 때문에 라이브러리를 사용한 것을 당당하게 드러내지만,
2번 방법을 사용하면 클래스 이름을 지정할 수 있는 등 내가 직접 라이브러리를 만질 수 있다는 뉘앙스를 풍기기 위해서입니다.앞의 문장 1번보다 2번 방법을 추천하는 이유죠~
- 주석 처리 된 것은 1편에서 진행한 att를 이용한 방법으로 무시해 주세요.
< body> 태그 안에 사진이 들어가는 <div>에 class 이름으로 banner를 붙였습니다.
페이지 스크롤을 만들기 위해(높이 지정) 메인 요소이다.banner 위아래로 div.blank를 각각 3개씩 만든 후
중간banner에는 <h2> 태그를 추가한 상태입니다.
잠시 후 Script를 넣을 건데 따로 파일을 만들지 않고 <head>태그 안에 넣어주셨습니다.
function을 활용해 배너의 패러락스를 실행하고 이미지 소스를 불러옵니다.
CSS도 만져줍니다 <div> 안이 비어있어 높이를 주어야 출력이 가능하므로 배너에 높이 값을 매긴 후
스크롤을 만들기 위한 div.blank에도 높이를 주었습니다.타이틀 태그 ‘h2’는 마음대로 꾸며봤습니다
라이브 서버에서 열어봤습니다굉장히 잘 실현되는 모습입니다~
관리자 도구를 보니 js도 잘 작동하네요!JavaScript-jQuery의 Parallax 스크롤효과를 활용한, 파라락스 라이브러리 연결 사용법이었습니다. 생각보다 쉽죠?
추가로 패러렉스 옵션도 두 가지 보여드리고요
상단에 첨부한 홈페이지를 보면 추가적인 옵션도 설정할 수 있는 내용들이 있습니다.
imageSrc 옵션으로 사진을 읽고 speed 옵션으로 배경 요소의 스크롤 속도를 조절할 수 있습니다.
보통 저 두 속성 빼고는 잘 안 쓰니까 이런 것도 있구나 스치기만 하면 되겠네요
속도조절 옵션의 speed 를 지정한 코드입니다.
이때 0.0은 background-attachment 속성인 fixed와 동일합니다.이동속도 0= 즉, 그 자리에 사진이 고정된 상태로 스크롤됩니다.
1 지정 시 스크롤되는 전단 콘텐츠와 동일한 속도로 움직입니다.즉, speed 1 = 기본 웹페이지의 사진이 스크롤 될 때처럼 본문 콘텐츠와 배경이 동시에 같은 속도로 이동합니다.
우리가 조절할 수 있는 수치는 0.1~0.9 맞죠?
직접 손으로 코딩하면서 속도 비교도 하고 사용법도 배워보세요!
자, 이제 JavaScript(j Query)를 활용해 Parallax 스크롤 효과의 패러락스 라이브러리 접속 사용법(2)탄에 대해 배웠습니다, 도움이 된다면 하트를 눌러주세요~!