Рекомендуем, 2024

Выбор редакции

10 лучших плагинов Parallax Scrolling

Длинная прокрутка сайтов стала действительно распространенной тенденцией в веб-дизайне. Один из самых крутых подтипов этого - сайты прокрутки параллакса, где изображения перемещаются, чтобы испускать эффект параллакса. По мере того, как пользователь прокручивает страницу вниз, анимация запускается, и в целом она дает свежий вид и ощущение любому веб-сайту при правильной реализации.

Создание сайта с прокруткой параллакса часто утомительно, потому что для этого требуется глубокое знание 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 лучших генераторов статических сайтов

Top