Статьи

10 jQuery Демонстрации горизонтальной прокрутки и плагины

В сегодняшнем посте мы представляем вам 10 демонстраций и плагинов jQuery для горизонтальной прокрутки, которые будут полезны тем, кто смотрит на вещи горизонтально. Я думаю, мы должны принять прокрутку некоторых людей в обе стороны! 🙂

Обновлено: март 2016 г. Обновлены все плагины и демоверсии с последними версиями и добавлены некоторые новые. Также удалены плагины, которые больше не находятся в разработке.

1. ScrollMagic

Изображение цилиндра

ScrollMagic помогает вам легко реагировать на текущую позицию прокрутки пользователя. Его легкий вес (6 КБ в сжатом состоянии) и мобильность. Он поддерживает оба направления прокрутки.

Посмотреть демо

2. jInvertScroll

Снимок экрана домашней страницы jInvertScroll

jInvertScroll — это легкий плагин для jQuery, который позволяет перемещаться по горизонтали с эффектом параллакса при прокрутке вниз.

Посмотреть демо

3. Горизонтальная временная шкала

Макет экрана временной шкалы

Из этого туториала вы узнаете, как создать простую в настройке горизонтальную временную шкалу на основе CSS и jQuery.

Посмотреть демо

4. Плавная горизонтальная прокрутка с помощью jQuery

Скриншот демо

Из этого туториала вы узнаете, как создать простой эффект плавной прокрутки, используя плагин jQuery Easing и всего несколько строк jQuery.

Посмотреть демо

5. просто прокрутка

Снимок экрана демонстрации simplyScroll

simplyScroll — это гибкий jQuery-скроллер контента с поддержкой касания. Он автоматически поддерживает элементы неравного размера в режиме цикла.

Посмотреть демо

6. Горизонтальная прокрутка с fullPage.js

Скриншот домашней страницы для fullPage.js

fullPage.js — это плагин на основе jQuery, который позволяет нам создавать одностраничные веб-сайты с прокруткой. Он работает не только во всех современных браузерах, но и в некоторых старых, таких как IE 8 и Opera 12.

Посмотреть демо

7. jQuery.kinetic

Изображение баннера для jQuery.kinetic

jQuery.kinetic — простой плагин, который добавляет плавную прокрутку перетаскиванием с постепенным замедлением для контейнеров.

Посмотреть демо

8. Хитрый

Скриншот домашней страницы Sly

Sly — это библиотека JavaScript для однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену полосы прокрутки, как расширенный инструмент навигации на основе элементов или как отличный интерфейс навигации и анимации для веб-сайтов параллакса.

Посмотреть демо

9. pagePiling.js

Снимок экрана домашней страницы pagePiling.js

pagePiling.js — это плагин jQuery, который помогает накапливать ваши разделы друг над другом и получать к ним доступ с помощью прокрутки или по URL. Он полностью совместим со старыми браузерами, такими как IE8 и Safari 12, а также отлично работает на мобильных устройствах.

Посмотреть демо

10. Горизонтальная прокрутка Учебник

Этот урок научит вас прокручивать ваш веб-контент по вертикали, горизонтали и даже по диагонали! Не волнуйтесь, он не будет слишком сильно полагаться на JavaScript. Он использует CSS / HTML для макета и JavaScript только для прокрутки.

Посмотреть демо

Вывод

В этой статье был рассмотрен список 10 наиболее часто используемых демоверсий и плагинов jQuery для горизонтальной прокрутки. Я надеюсь, что вы найдете их полезными для ваших проектов. Вы знаете другие плагины, которые могут помочь? Что ты используешь? Не стесняйтесь делиться своими мнениями и предложениями в комментариях ниже.