Вертикальная прокрутка изображений на jQuery RUDEBOXВсе чаще я встречаю сайты где галерея реализована в полномасштабном формате, не в новом окне, а именно на самой странице, без всяких нажатий на картинку и развороте материала. Как Вы уже догадались, сегодня речь пойдет о реализации полноэкранной вертикальной прокрутки изображений при скроллинге страницы. Для реализации мы уберем стандартную полосу прокрутки и заменим ее на более нам подходящую в виде точек. Также у нас будет дюжина изображений, которые будут плавно замещать друг друга при прокрутке страницы вниз.

 

Реализовывая данный эффект мы отталкивались от простоты, нам необходимо было получить красивый эффект при этом не затрачивая множества усилий. Именно это мы покажем Вам ниже.

Шаг 1. HTML

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

Кроме этого мы подключаем изображения, с подписью и установленными максимальными параметрами, обратите внимание, что прокрутку мы скрыли по умолчанию, это позволит использовать большие изображения.

Вертикальная прокрутка изображений на jQuery

Шаг 2. CSS

Со стилями не все так сложно как они выглядят, для начала нам необходимо определить общие параметры контейнера, затем мы устанавливаем параметры для навигации:

Теперь нам необходимо установить параметры для слайдера, мы устанавливаем абсолютное позиционирование и убираем прокрутки со всех сторон брузера:

Также мы добавили несколько параметров анимации при прокрутке и движении страницы. Также обратите внимание, что изображения являются полностью адаптивным.

Шаг 3. JS

Теперь нам необходимо добавить несколько функций, которые будут отвечать за правильную работу нашего слайдера, и максимально упростив его решение.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: