Как сделать эффект прокрутки страницы

Обновлено: 02.07.2024

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

Эффекты открывания можно использовать для создания интересных взаимодействий с пользовательскими компонентами, такими как слайд-шоу. Этот слайд создан с помощью схожей wipe-анимации:

Рассмотрим создание этого эффекта с использованием CSS и Animate on Scroll (AOS) (библиотека JavaScript для анимации элементов при прокрутке в момент входа пользователя в viewport).

Начало

Начнем с добавления библиотеки Animate on Scroll в проект. Добавьте aos.css в тег :

И aos.js перед закрытием тега :

Затем инициализируйте AOS:

Создание открывающегося блока

Класс .reveal-holder представляет собой контейнер для элемента сплошного цветного блока и текста. Дизайн классов выглядит следующим образом:

Благодаря этому, блок открывает и закрывает элемент должным образом. Высота класса .reveal-block должна достигать 101%:

Установка высоты на 100% приводит к тому, что открывающийся блок не полностью покрывает изображения после изменения размера окна.

Установка свойства CSS overflow в скрытое значение для класса .reveal-holder помогает предотвратить отсечения вне содержимого элемента.

Использование CSS переходов

Анимации установлены с помощью атрибута data-aos. Например, чтобы открыть элемент справа, добавьте атрибут в класс .reveal-block в HTML:

Свойство CSS transform использует функцию scaleX() в элементе .reveal-block для изменения размеров блока при анимации. Свойство transform-origin устанавливает точку изменения, которая в данном случае находится на 100% 0% или вправо-влево. Благодаря этому, блок начинает двигаться, уменьшаясь в размерах. transition-property устанавливает эффект перехода для применения, а transition-delay устанавливает переход на ожидание, основанное на установленном значении.

Добавьте эти параметры в функцию AOS.init() для воспроизведения анимации один раз:

Теперь анимации прокрутятся один раз! Это выглядит следующим образом:

Аналогичным образом можно добавить этот эффект для изображений. Замените текст с изображением в HTML:

Чтобы слайд открывался слева направо отредактируйте transform-origin на 0% 100%:

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

Таким эффектом достаточно легко манипулировать и варьировать между видео-сопровождением. Применив такой эффект у себя на сайте вы получите достаточно мощный инструмент для привлечения посетителей.

Шаг 1. HTML

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

Плагин jQuery, который помогает прокручивать блоки страниц и привязывать скрол к разделам. Оптимизирован для сенсорных устройств.

Демонстрация

Больше примеров

Базовая настройка

Для Scrollify требуется jQuery 1.7+.

Самая базовая настройка выглядит следующим образом:

Для того что бы у нас была возможность красиво отображать блоки страницы созданной в Elementor при скроле, необходимо указывать несколько важных моментов при создании элементов страницы. А именно пункты указанные ниже.

Указываем каждой секции свой идентификатор, а лучше класс

Для каждой секции созданной в elementor указываем класс, в моем примере это будет:

Класс указываем здесь:

Размер секции для нормальной прокрутки Scrillify

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

Подключение скрипта Scrollify

Для подключения скрипта загрузите в удобное для Вас место темы данный скрипт:

Естественно что скрипт нужно подключить через function.php в футер сайта.

Далее добавьте в самом конце скрипта jquery.scrollify.js, сразу за данными строками:

Данный код:

Как сделать вертикальное меню навигации между блоками в Elementor?

Для того что бы получить вертикальное меню вот такого вида:

Нам понадобиться компонент Scroll Navigationкоторый есть только в дополнительном плагине к Elementor, имя данного плагина JET ELEMENTS.

После приобретения плагина Вам нужно будет найти данный виджет в панели виджетов Elementor:

Далее присвойте настройки и id секциям как мной указано ниже:

Здесь мы указываем ID секции для вертикального меню, следовательно после установки ID в Scroll Navigation виджите следует установить ID и в самой секции:

Касаемо настроек Вы разберетесь и без меня, настроек в виджите имеется совсем не много. Ниже я приведу те настройки которые использую я:

Переключатель “Переключение секций полностью” настоятельно не рекомендую трогать, так как в случае если контент блока будет фактически больше чем экран устройства на котором был открыт сайт, вы часть контента данного блока не увидите.

Как заменить круги в меню Scroll Navigation плагина JET ELEMENTS

Здесь нам на помощь прийдет CSS, просто воспользуйтесь моим примером ниже только заменив мои SVG изображения на свои.

Эффекты анимации при скроле блоков

На странице примера автор плагина пишет данный пример:

И если его применить к своему решению Вы увидите приятный эффект при скроле от блока к блоку. На самом деле этот эффект не один. Посмотреть на другие варианты анимации при скроле можно здесь:

Для того что бы scrollify мог владеть любым из данных эффектов необходимо подключить данную библиотеку:

В даном разделе находится информация которая призвана помогать в решении возникших проблем при использовании Scrollify на сайте WordPress.

Почему Scrollify упорно отображает первую секцию с отступом снизу (около 20 пикселей)

Данная проблема связана с тем что на самом деле в области где находится отступ, а это напомню низ страницы. Находится горизонтальный скрол, который скорее всего на Вашем ресурсе скрыт при помощи правил CSS:

Вот и получается что Scrollify отсчитал высоту правильно, и во время расчетов учел и высоту горизонтального скрола.

Добавьте CSS стиль для секции:

После применения Scrollify во время прокрутки страницы вроде все работает как нужно, но скрол просто дико трясет

Здесь все в первую очередь зависит от обилия плагинов и скриптов (в основном написанных на jQuery) на Вашем сайте.

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

Консоль разработчика упорно пишет ошибку – Scrollify warning: ID matches hash value – this will cause the page to anchor

Скорее всего у Вас работает какой-то плагин который вставляет анкор в область ссылки. И Вы получаете в поле ввода url что-то на подобие этого:

Допустим при применении темы Zita попап окна созданные при помощи плагина PopUps не срабатывали если добавить анкор попапа в меню сайта, а при написании скрипта для срабатывания попап окна, Scrollify начал выдавать выше указанную ошибку. Решением было “обезвреживание” анкора в jQuery скрипте при помощи строки:

То есть у меня получился вот такой скрипт:

Как заставить выполнять Scrollify только на главной странице сайта, и только для ПК?

Все просто, оберните основной скрипт выполняющий подключенеи Scrollify с проверкой класса в элементе body. Например так:

Какая тема для WordPress лучше всего подходит для применения Scrollify?

Мой опыт показал что лучше темы чем Zita для Scrollify просто нет. Она обладает мощным функционалом позволяющим реализовать прокрутку блоков правильно.

Сейчас большую популярность набирают сайты с необычным скроллом. Сегодня я вам покажу как сделать слайдер-скролл для сайта. Для данного эффекта есть готовое решение – плагин onepage-scroll .

Для того чтобы плагин начал работать необходимо подключить сам плагин и библиотеку jquery.

Блок с классом main основной блок, внутри которого должны располагаться блоки сладов. Сами слайды размещаются внутри элементов section .

В самом низу нужно разместить jquery код

Вот так просто добавляется данный эффект. Теперь давайте рассмотрим дополнительные параметры.

Дополнительные параметры

Все дополнительные параметры задаются внутри функции onepage_scroll .

sectionContainer

Задает блок для слайдов. Обычно для этого используют тег section .

easing

Задает тип смягчения скролла. Вы можете выбрать один из 3 вариантов:

ease – легкий скролл. Простой скролл, который используется по стандарту.
linear – линейное смягчение.
ease-in – ускоренное смягчение.

animationTime

AnimationTime позволяет определить, сколько времени занимает каждая секция для анимации.

pagination

Вы можете либо показать, либо скрыть пагинацию. Переключатель true – чтобы активировать пагинацию, false – чтобы скрыть.

updateURL

Укажите значение true , если вы хотите, чтобы URL-адрес автоматически обновлялся при прокрутке каждой страницы. В окончание адреса страницы будет стоять номер блока на котором находится пользователь. Смена URL происходит без перезагрузки страницы.

beforeMove и afterMove

beforeMove – эта опция принимает функцию обратного вызова. Функция будет вызвана перед перемещением страницы.

afterMove– эта опция принимает функцию обратного вызова. Функция будет вызвана после перемещением страницы.

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

Включает циклическое перемещение по слайдам. Нажимая вниз на последнем слайде вы перемещаетесь на первый, и на оборот перемещаясь на первом вверх – оказываетесь на последнем.

keyboard

Вы можете активировать элементы управления клавиатуры.

responsiveFallback

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

direction

Теперь можно определить направление анимации прокрутки одной страницы. Имеющиеся варианты “vertical “и ” horizontal”. По умолчанию используется значение “ vertical “.

Вам также будет интересно

Готовая форма с отправкой информации через ajax в Telegram

Готовая форма с отправкой файла drag & drop. Поле для передачи файла с помощью перетаскивания его в область

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