Длинная прокрутка сайтов стала действительно распространенной тенденцией в веб-дизайне. Один из самых крутых подтипов этого - сайты прокрутки параллакса, где изображения перемещаются, чтобы испускать эффект параллакса. По мере того, как пользователь прокручивает страницу вниз, анимация запускается, и в целом она дает свежий вид и ощущение любому веб-сайту при правильной реализации.
Создание сайта с прокруткой параллакса часто утомительно, потому что для этого требуется глубокое знание CSS, Javascript и хорошего веб-дизайна. Вот список лучших плагинов Parallax Scrolling, которые не только облегчат вам создание сайтов прокрутки параллакса, но также имеют хорошо оснащенную библиотеку эффектов параллакса, чтобы вам было легче и быстрее создавать хорошо выглядящую веб-страницу,
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ : Прежде чем начать, обратите внимание, что для использования этих плагинов требуется некоторое знание веб-технологий (HTML / CSS / Javascript). Большинство перечисленных плагинов используют jquery, поэтому знание Jquery также может быть необходимо.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic - один из самых популярных и многофункциональных плагинов для jquery. Это библиотека javascript, позволяющая создавать магические эффекты прокрутки. С помощью ScrollMagic вы можете анимировать на основе вашей позиции прокрутки. Это означает, что вы можете фиксировать, перемещать или анимировать элементы HTML во время прокрутки в течение любой необходимой вам продолжительности, а также легко добавлять эффекты параллакса на свой веб-сайт. Это очень настраиваемый, а также легкий (6 КБ в сжатом виде). Среди других плагинов для параллакса Scroll Magic обладает лучшей документацией и внешними ресурсами. Он также прекрасно совместим с мобильными устройствами.
ScrollMagic имеет много примеров в списке. Проверьте их для вдохновения и руководства по использованию этой библиотеки.
Около:
Домашняя страница: //janpaepke.github.io/ScrollMagic/
Автор: Ян Паепке
Монтаж:
1. CDN:
2. Скачать с Github
2. скроллр
skrollr - это легкая чистая библиотека Javascript и CSS, без участия jQuery. Это в основном «Магия прокрутки, упрощенная для CSS». Чтобы использовать skrollr, вам не нужно знать Javascript или какой-либо jQuery. Достаточно только HTML и CSS. skrollr использует атрибуты данных для анимации любого элемента HTML, который вы хотите. Одним из основных недостатков скроллера является то, что анимация работает только во время прокрутки страницы. В противном случае все эффекты будут приостановлены. skrollr позволяет вам анимировать все свойства CSS ваших HTML-элементов.
Около:
Домашняя страница: //prinzhorn.github.io/skrollr/
Создатель: Принцхорн
Установка: Скачать с Github
3. pagePiling.js 
Page Piling - это плагин jQuery, который позволяет вам создавать свой сайт в разных разделах, которые накладываются друг на друга. При прокрутке или при обращении к URL каждый раздел отображается в аккуратной скользящей анимации. pagePiling.js совместим со всеми платформами - настольными, планшетными и мобильными - и работает с большинством браузеров. Он изящно ухудшается в старых браузерах, которые не поддерживают его анимацию (например, IE 7). Чтобы использовать плагин, вам нужно включить CSS и файл Javascript в ваш HTML. pagePiling.js инициализируется функцией (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Для более сложных инициализаций, пройдите через README.md.
Около:
Домашняя страница: //alvarotrigo.com/pagePiling/
Создано: alvarotrigo
Установка: Скачать с Github
4. Альтон
Alton - это плагин jQuery «прокрутка к нам». Прокрутка прокрутки означает, что собственная прокрутка вашего браузера отключена в пользу целевой прокрутки, которая при запуске (колесом мыши или сенсорной панелью) приводит вас к следующей вертикальной точке на экране или к вершине следующего контейнера.
Alton поддерживает три отдельных типа функций: «Герой», «Уикенд» и «Стандарт». Стандарт позволяет использовать полную прокрутку страницы, при этом каждый раздел имеет высоту 100%. Свиток выводит следующий раздел или предыдущий раздел. Bookend позволяет вам создавать в стиле «форзац», в то время как Hero позволяет вам прокручивать джек только в разделе «Hero», а на остальной части страницы (включается) встроенная прокрутка.
Около:
Домашняя страница: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Создано: лист бумаги
Установка: Скачать с Github
5. Stellar.js
Stellar - это плагин jQuery, с помощью которого вы можете легко добавлять эффекты прокрутки параллакса. Для запуска сначала необходимо запустить функцию $ .stellar (). Настройки анимации для отдельных элементов можно настроить с помощью атрибутов данных для этого элемента.
Stellar даже позволяет вам иметь фоны параллакса, которые являются фонами, которые перемещаются при прокрутке. Одна из самых полезных функций Stellar.js - это смещения.
Все элементы вернутся в исходное положение, когда их родительский элемент смещения пересекает край экрана - плюс или минус ваше собственное необязательное смещение. Это позволяет очень легко создавать сложные схемы параллакса. (Звездная документация)
Около:
Домашняя страница: //markdalgleish.com/projects/stellar.js/
Создатель: Марк Далгейш
Установка: Скачать с Github
6. multiScroll.js
Этот плагин создан тем же разработчиком (alvarotrigo), который создал плагин pagePiling.js. Что делает в основном мультискролл, так это то, что он позволяет создать эффект, при котором каждый раздел страницы загружается в две разделенные части, которые перемещаются по мере загрузки страницы. Проверьте домашнюю страницу, чтобы увидеть, как это выглядит в вашем браузере. multiScroll.js позволяет вам установить скорость прокрутки, ослабление, опцию прокрутки клавиатуры и многие другие свойства, чтобы вы могли настроить эффект так, как вам нужно.
Около:
Домашняя страница: //alvarotrigo.com/multiScroll/
Создано: alvarotrigo
Установка: Скачать с Github
7. ScrollMe
ScrollMe - это плагин для добавления простых эффектов прокрутки параллакса на вашу страницу. Он может масштабировать, вращать, переводить и изменять непрозрачность элементов на странице при прокрутке вниз. ScrollMe не требует JavaScript, и достаточно только знания CSS. Добавив класс «animateme» и необходимые атрибуты данных, вы можете анимировать любой элемент HTML. ScrollMe лучше всего использовать для добавления эффектов CSS. Это легкий и все анимации гладкие, если вы используете их в умеренных количествах.
Около:
Домашняя страница: //scrollme.nckprsn.com/
Создатель: Ник Пирсон
Установка: Скачать с Github
8. Параллакс-свиток
Parallax Scroll - это простой в использовании плагин jQuery, который позволяет создавать эффект прокрутки изображения параллакса, который можно найти на таких сайтах, как Spotify. Его довольно просто использовать - просто укажите необходимые CSS-классы для держателей изображений. Вместо того, чтобы использовать теги, чтобы использовать этот плагин, вы должны использовать элементы с заданным фоновым изображением (используя CSS-свойство `background-image`. Вы можете сделать элементы отзывчивыми, используя запросы CSS @media.
Около:
Домашняя страница: //parallax-scroll.aenism.com/
Создано: Aen
Установка: Скачать с Github
9. Джараллакс
Jarallax - это библиотека CSS и Javascript, которая специализируется на эффектах прокрутки параллакса. Jarallax настроен с использованием Javascript (нет jQuery, только чистый ванильный JS). Он поддерживает функции сглаженной прокрутки, замедления и параллакс-анимации. Jarallax поддерживается большинством браузеров на разных платформах. На веб-сайте Jarallax есть отличная документация о том, как настроить Jarallax для ваших нужд. Jarallax также имеет видеоуроки, показывающие, как настроить Jarallax для вашего сайта и как начать работу.
Около:
Домашняя страница: //www.jarallax.com/
Создано: Jarallax
Установка: Скачать с сайта Jarallax
10. Суперскроллорама
Superscrollorama - это плагин на основе jQuery, который поддерживает анимацию прокрутки. Он работает на TweenMax и Greensock Tweening Engine, что повышает производительность анимации и плавность. Анимации суперскроллоры вызываются через jQuery, и вы также можете использовать большинство функций TweenMax.js. К сожалению, эти анимации не полностью поддерживаются мобильными устройствами (потому что устройства с сенсорным экраном обрабатывают прокрутку по-другому). Однако, используя метод setScrollContainerOffset, эффекты Superscrollorama могут быть доступны на мобильных устройствах.
Вот код для этого:
.setScrollContainerOffset(x, y)
(x: смещение x контейнера-скроллера, y: смещение контейнера-контейнера scroll)
Около:
Домашняя страница: //johnpolacek.github.io/superscrollorama/
Создано: johnpolacek
Установка: Скачать с Github
СМОТРИТЕ ТАКЖЕ: 10 лучших генераторов статических сайтов
