긴 스크롤링 사이트는 정말 일반적인 웹 디자인 트렌드가되었습니다. 가장 시원한 하위 유형 중 하나는 시차 스크롤링 사이트입니다.이 사이트에서는 시차 효과를 내기 위해 이미지가 이동합니다. 사용자가 페이지를 아래로 스크롤하면 애니메이션이 실행되고 전반적으로 제대로 구현되면 모든 웹 사이트에 새로운 모양과 느낌을줍니다.
시각적 스크롤링 사이트를 만드는 것은 CSS, 자바 스크립트 및 좋은 웹 디자인에 대한 심층적 인 지식이 필요하기 때문에 종종 지루합니다. 다음은 시차 스크롤링 사이트를 쉽게 만들 수있을뿐만 아니라 훌륭한 시차 효과 라이브러리가있어 최상의 웹 페이지를보다 쉽고 빠르게 개발할 수있는 최상의 시차 스크롤링 플러그인 목록입니다 .
면책 조항 : 시작하기 전에 이러한 플러그인을 사용하려면 웹 기술 (HTML / CSS / Javascript)에 대한 지식이 필요합니다. 나열된 대부분의 플러그인은 jquery를 사용하므로 Jquery에 대한 지식이 필요할 수도 있습니다.
시차 스크롤링 플러그인
1. ScrollMagic
ScrollMagic은 가장 인기 있고 기능이 풍부한 jquery 플러그인 중 하나입니다. 그것은 자바 스크립트 라이브러리를 사용하면 겉으로보기에는 마법 스크롤 효과를 만들 수 있습니다. ScrollMagic을 사용하면 스크롤 위치에 따라 애니메이션을 적용 할 수 있습니다. 즉, 스크롤하는 동안 HTML 요소를 고치거나 이동하거나 애니메이션을 적용 할 수 있으며 원하는 기간 동안 웹 사이트에 시차 효과를 쉽게 추가 할 수 있습니다. 고도의 사용자 정의가 가능하며 경량입니다 (gzipped시 6kb). 다른 시차 스크롤 플러그인 중에서도 Scroll Magic은 최고의 문서 및 외부 리소스를 보유하고 있습니다. 그것은 모바일과 완벽하게 호환됩니다.
ScrollMagic에는 많은 예제가 나열되어 있습니다. 이 라이브러리 사용에 대한 영감과 지침을 확인하십시오.
약:
홈페이지 : //janpaepke.github.io/ScrollMagic/
만든 사람 : Jan Paepke
설치:
1. CDN :
2. Github에서 다운로드
2. skrollr
skrollr은 jQuery가 전혀 포함되지 않은 경량의 Javascript 및 CSS 라이브러리입니다. 그것은 기본적으로 'CSS 용으로 단순화 된 스크롤 매직 (Scroll Magic for CSS)'입니다. skrollr을 사용하려면 Javascript 또는 jQuery를 알 필요가 없습니다. HTML과 CSS 만 있으면 충분합니다. skrollr은 데이터 속성을 사용하여 원하는 HTML 요소에 애니메이션을 적용합니다. skrollr의 주요 단점 중 하나는 애니메이션이 페이지가 스크롤되는 동안에 만 작동한다는 것입니다. 그렇지 않으면 모든 효과가 보류됩니다. skrollr을 사용하면 HTML 요소의 모든 CSS 속성을 애니메이션으로 만들 수 있습니다.
약:
홈페이지 : //prinzhorn.github.io/skrollr/
만든 사람 : Prinzhorn
설치 : Github에서 다운로드
3. pagePiling.js 
Page Piling은 jQuery 플러그인으로 웹 사이트를 서로 다른 섹션에 쌓아 올려 서로 위에 놓을 수 있습니다. 스크롤하거나 URL에 액세스하면 각 섹션이 깔끔한 슬라이딩 애니메이션으로 표시됩니다. pagePiling.js는 데스크톱, 태블릿 및 모바일과 같은 모든 플랫폼과 호환되며 대부분의 브라우저에서 작동합니다. 그것은 IE 7과 같은 애니메이션을 지원하지 않는 오래된 브라우저에서 정상적으로 성능이 저하됩니다. 플러그인을 사용하려면 HTML 안에 CSS와 자바 스크립트 파일을 포함시켜야합니다. pagePiling.js는 (document) .ready 함수로 초기화됩니다 :
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
더 고급 초기화를하려면 README.md를 참조하십시오.
약:
홈페이지 : //alvarotrigo.com/pagePiling/
만든 사람 : alvarotrigo
설치 : Github에서 다운로드
4. 알톤
Alton은 jQuery의 '스크롤 - 플러그인'입니다. 스크롤 자르기는 브라우저의 기본 스크롤이 대상 스크롤을 사용하지 못하게하는 것을 의미합니다. 마우스 휠이나 터치 패드로 시작할 때 화면의 다음 세로 지점이나 다음 컨테이너의 상단으로 이동합니다.
Alton은 'Hero', 'Bookend'및 'Standard'라는 세 가지 종류의 기능을 허용합니다. 표준을 사용하면 100 % 높이의 각 섹션과 함께 전체 페이지 스크롤을 사용할 수 있습니다. 스크롤은 다음 섹션 또는 이전 섹션을 가져옵니다. Bookend에서는 북 엔드 형 환경을 만들 수 있으며 Hero에서는 'Hero'섹션 만 스크롤 할 수 있으며 나머지 페이지는 다시 활성화 된 네이티브 스크롤링을 사용합니다.
약:
홈페이지 : //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
만든 사람 : 종이 잎
설치 : Github에서 다운로드
5. 스텔라 .js
스텔라는 시차 스크롤 효과를 쉽게 추가 할 수있는 jQuery 플러그인입니다. 실행하려면 먼저 $ .stellar () 함수를 실행해야합니다. 개별 요소의 애니메이션 설정은 해당 요소의 데이터 속성을 사용하여 구성 할 수 있습니다.
스텔라는 심지어 시차 배경을 가질 수 있습니다.이 배경은 스크롤에 재배치되는 배경입니다. Stellar.js의 가장 유용한 기능 중 하나는 오프셋입니다.
오프셋 부모가 화면의 가장자리를 만날 때 모든 요소가 원래 위치로 돌아갑니다 (플러스 또는 마이너스 선택적 오프셋). 이렇게하면 복잡한 시차 패턴을 매우 쉽게 만들 수 있습니다. (스텔라 문서)
약:
홈페이지 : //markdalgleish.com/projects/stellar.js/
만든 사람 : Mark Dalgeish
설치 : Github에서 다운로드
6. multiScroll.js
이 플러그인은 pagePiling.js 플러그인을 만든 개발자 (alvarotrigo)가 만든 것입니다. 기본적으로 멀티 스크롤은 페이지가로드 될 때 각 페이지 섹션이 두 개의 분할 된 부분으로로드되는 효과를 생성합니다. 브라우저에서 홈페이지 모양을 확인하십시오. multiScroll.js를 사용하면 스크롤 속도, 여유, 키보드 스크롤 옵션 및 더 많은 속성을 설정하여 원하는 방식으로 효과를 사용자 정의 할 수 있습니다.
약:
홈페이지 : //alvarotrigo.com/multiScroll/
만든 사람 : alvarotrigo
설치 : Github에서 다운로드
7. ScrollMe
ScrollMe는 페이지에 간단한 시차 스크롤 효과를 추가하는 플러그인입니다. 아래로 스크롤하면 페이지에서 요소의 불투명도를 크기 조절, 회전, 변환 및 변경할 수 있습니다. ScrollMe에는 자바가 필요하지 않으며 CSS 지식 만 있으면 충분합니다. "animateme"클래스와 필수 데이터 속성을 추가하여 모든 HTML 요소에 애니메이션을 적용 할 수 있습니다. ScrollMe는 CSS 효과를 추가하는 데 가장 적합합니다. 가볍고 모든 애니메이션은 적당히 사용하는 한 부드럽습니다.
약:
홈페이지 : //scrollme.nckprsn.com/
만든 사람 : Nick Pearson
설치 : Github에서 다운로드
8. 패럴 랙스 스크롤
Parallax Scroll은 Spotify와 같은 사이트에서 발견 할 수있는 시차 이미지 스크롤 효과를 만들 수있는 jQuery 플러그인을 사용하기 쉽습니다. 이미지 홀더에 필요한 CSS 클래스를 지정하기 만하면됩니다. 사용하기보다는 태그를 사용하려면 배경 이미지가 지정된 요소를 사용해야합니다 (background-image CSS 속성을 사용하여). CSS @media 쿼리를 사용하여 요소를 반응 적으로 만들 수 있습니다.
약:
홈페이지 : //parallax-scroll.aenism.com/
만든 사람 : Aen
설치 : Github에서 다운로드
9. 자랄 락스
Jarallax는 시차 스크롤 효과를 전문으로하는 CSS 및 Javascript 라이브러리입니다. Jarallax는 Javascript (No jQuery, 순수한 바닐라 JS)를 사용하여 구성됩니다. 스무딩 된 스크롤링 기능, 여유 및 시차 애니메이션을 지원합니다. Jarallax는 대부분의 브라우저와 플랫폼에서 지원됩니다. Jarallax 웹 사이트에는 사용자의 요구에 맞게 Jarallax를 사용자 정의하는 방법에 대한 훌륭한 문서가 있습니다. Jarallax에는 웹 사이트 용 Jarallax 설치 방법과 시작 방법을 보여주는 비디오 자습서가 있습니다.
약:
홈페이지 : //www.jarallax.com/
만든 사람 : Jarallax
설치 : Jarallax 웹 사이트에서 다운로드
10. 수퍼 클로 라라 마
Superscrollorama는 스크롤 애니메이션을 지원하는 jQuery 기반 플러그인입니다. 그것은 TweenMax와 Greensock Tweening Engine에 의해 구동되며, 이는 애니메이션 성능과 부드러움을 증가시킵니다. Superscrollorama 애니메이션은 jQuery를 통해 호출되며 대부분의 TweenMax.js 함수도 사용할 수 있습니다. 불행히도 이러한 애니메이션은 모바일 장치에서 완전히 지원되지 않습니다 (터치 스크린 장치가 다른 방식으로 스크롤을 처리하기 때문입니다). 그러나 setScrollContainerOffset 메서드를 사용하면 모바일 장치에서 슈퍼 영웅의 효과에 액세스 할 수 있습니다.
이것을하기위한 코드는 다음과 같습니다.
.setScrollContainerOffset(x, y)
(x : scrollcontainer의 x 오프셋, y : scrollcontainer의 x 오프셋)
약:
홈페이지 : //johnpolacek.github.io/superscrollorama/
만든 사람 : johnpolacek
설치 : Github에서 다운로드
또한보십시오 : 10 개의 제일 Static Site Generators
