Эффекты прокрутки элементара: 16 анимаций прокрутки изображения

Ключевые выводы

• Эффекты прокрутки элементара в стандартном редакторе представляют собой шесть элементов управления в разделе "Дополнительно" > "Эффекты движения" > "Эффекты прокрутки" (вертикальная прокрутка, горизонтальная прокрутка, прозрачность, размытие, вращение и масштабирование), и каждый из них перемещает один элемент.
• Элементы управления эффектами прокрутки являются функцией Elementor Pro, и свободный плагин Elementor 4.3.2 их не содержит.
• 16 эффектов прокрутки изображений на этой странице - это виджеты Master Addons Widget Builder, которые закрепляют полноэкранный этап и анимируют целый набор изображений в зависимости от положения прокрутки, включая трехмерный куб, книгу, переворачивающую страницы, и колоду карт для штабелирования.
• Каждый из 16 виджетов прокрутки имеет собственную загрузку zip, содержащую один файл JSON и README, а JSON импортируется через главные дополнения > Widget Builder > Import Widget, который принимает только файлы.json.
• Каждый из 16 виджетов включает правило "предпочитает уменьшенное движение", поэтому посетители, выключающие движение в своей операционной системе, получают неподвижный макет вместо анимации.

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

В этом посте показаны 16 анимаций прокрутки изображений, которые работают в этом большем масштабе. каждый из них представляет собой готовый виджет для Master Addons Widget Builder с живой демонстрацией, которую вы можете открыть перед установкой чего-либо. Ниже вы найдете, что делает каждый эффект, какой сайт ему подходит, как импортировать набор и что проверить на скорость и доступность.

Что эффекты прокрутки Элементора могут сделать сами по себе

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

Эти элементы управления принадлежат Elementor Pro. Мы проверили свободный плагин Elementor 4.3.2, и элементы управления прокруткой в нем отсутствуют.

Эффект прокрутки знает только о своем собственном элементе и видопорте У него нет возможности удерживать раздел на месте, пока контент внутри него меняется, и он не может координировать десять изображений, чтобы они пришли в порядке Параллакс на образе героя легко настроить таким образом Фотография, которая разбивается на части головоломки и собирается заново по мере чтения, нуждается в пользовательском виджете, который и охватывает остальная часть этого поста.

Если простой параллакс - это все, что вам нужно, Расширение RELLAX в Master Addons справляется с этим и нашим обзор анимации охватывает входные и плавающие эффекты.

Что нужно для запуска этих виджетов

Вам нужны Elementor, Master Addons и Widget Builder Бесплатного плагина Elementor достаточно на стороне Elementor, потому что ни в одном из этих дизайнов не используются виджеты Elementor Pro или его панель "Эффекты движения".

Виджеты импортируются и редактируются в Виджет Строитель, который является особенностью Master Addons Pro. планы на страница ценообразования. Каждый дизайн ниже имеет свою собственную ссылку для загрузки рядом с живой демо-версией, и нет шлюза электронной почты.

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

Живые демо-версии не нуждаются в установке. Откройте один и прокрутите его в нескольких размерах окон, что является самым быстрым способом определить, соответствует ли стиль движения вашему контенту.

16 эффектов прокрутки изображения для Элементора

16 эффектов прокрутки изображения делятся на пять групп: закрепленные раскрытия, 3D-объекты, колоды карт, бесконечные галереи, а также макеты индексов или магазинов. Большинство из них используют один и тот же фундамент. виджет дает себе высокую взлетно-посадочную полосу, закрепляет внутри нее сцену с одним экраном с липким позиционированием и читает, как далеко вы прокрутили по взлетно-посадочной полосе, чтобы привести анимацию в движение. Прокрутите назад вверх, и все будет воспроизводиться задним ходом.

Закрепленное изображение показывает

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

1. Индекс апертуры

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

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

2. Облицовочная рама

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

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

3. Главы голубятни

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

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

4. Уточная сетка

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

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

Эффекты 3D прокрутки

Эти четверо используют CSS 3D преобразования и перспективу, и положение прокрутки приводит их в движение Если вы хотите 3D, который играет на таймер или реагирует на стрелки, наш путеводитель по Элементор 3D карусель закрывает ту сторону.

5. Фасетный куб

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

Шесть - это жесткий предел, так как куб имеет шесть сторон, Это делает его аккуратно подходит для короткого набора портфолио или шести продуктов диапазон.

6. Орбитальная трубка

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

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

7. Лепешка для мольбы

Стойка Easel - это галерея свитков, которая стоит в глубине. Каждая картина - это пластина, отвернутая от вас, пока свиток не выровняет ее с серединой экрана, где она поворачивается к вам лицом. подписи сидят рядом с пластинами, а предметы зигзагообразно перемещаются влево и вправо.

Демо-версия проходит шесть этапов гончарной студии, и это естественное применение: этапы процесса или нумерованный список услуг.

8. Книга Квайра

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

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

Карточные колоды

9. Риффл-дек

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

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

10. Разрушительная палуба

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

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

Бесконечные галереи прокрутки

Эти три цикла. нет первого или последнего изображения, которое подходит для просмотра больше, чем чтение.

11. Салонная висадина

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

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

12. Нить накаливания

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

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

13. Катушечные портреты

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

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

Индексы и макеты магазинов

14. Индекс сильфона

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

Лучше всего читается с четырьмя-восемью записями Попробуйте на выставку или набор представленных проектов.

15. Индекс прилива

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

Этот возглавляется по типу, с изображением в роли второго плана. он подходит для кредитных списков и длинных индексов проектов.

16. Магазин суatch

Swatch Shop - это коридор фотографий продуктов, по которому вы идете, прокручивая. Пока продукт находится впереди, вся комната приобретает свой цвет, а на карточке рядом с ним отображается название, краткое описание, цена, размер и кнопка. Столбец цветных точек справа отмечает ваше место.

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

Все 16 эффектов прокрутки с первого взгляда

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

Загрузите 16 виджетов с эффектом прокрутки

Каждый виджет представляет собой отдельный zip, поэтому вы загружаете только те, которые планируете использовать. каждый zip содержит два файла: JSON виджета и README, в котором перечислены элементы управления.

Распечатайте файл перед его импортом Импортер Widget Builder читает файлы.json и не примет сам zip.

Как импортировать виджет прокрутки в Elementor

Вы импортируете каждый виджет через Мастер Аддоны Виджет Строитель, затем перетащите его на страницу, как любой другой виджет Элементор. все это занимает около двух минут на дизайн.

1. Загрузите желаемый виджет и расстегните его. Внутри файл с именем like widget-facet-cube.json, плюс README.
2. На панели управления WordPress перейдите по адресу Мастер-аддоны > Виджет-строитель и нажмите Импортировать виджет.
3. Перетащите один файл.json в область загрузки или нажмите Просмотр файлов и выберите его. импортер берет по одному файлу за раз, поэтому повторяйте это для каждого дизайна, который вы хотите.
4. Откройте любую страницу в Elementor и найдите на панели виджетов имя дизайна, например “Facet Cube”. перетащите его в контейнер во всю ширину.
5. Замените демо-изображения и текст на вкладке Содержимое, затем установите цвета и типографику на вкладке Стиль.

Эти файлы не проходят через собственные у Элементора Шаблоны > Импорт экран. Этот импортер предназначен для шаблонов страниц и разделов, которые мы рассматриваем как импортировать шаблон Elementor. Закрепленные виджеты также нуждаются в месте. Положите их в контейнер, установленный на всю ширину без подкладки, иначе сцена сядет внутри узкой колонны и будет выглядеть тесно.

Также читайте: Как добавить GSAP Animation в Elementor, если вы хотите написать собственную анимацию, запускаемую с помощью прокрутки, с нуля.

Виджет прокрутки изображения против эффекта прокрутки изображения

Виджет прокрутки изображения и эффект прокрутки изображения - это две разные вещи, и имена вызывают путаницу В большинстве дополнений Elementor “Image Scroll” означает высокий скриншот внутри фиксированного кадра, который скользит вверх, когда вы навеваетесь на него Тематические магазины используют его для предварительного просмотра длинной страницы в маленькой коробке.

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

Скроллителлинг в Элементоре

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

Три из этих виджетов созданы для него. Shingle Frame объединяет каждый абзац с изображением, которое заменяет последний, Dovetail Chapters собирает по одному изображению в каждой главе во время чтения, а Quire Book переворачивает страницу для каждого раздела. для более длинного рассказа сложите два из них на одну страницу с обычными текстовыми разделами между ними, чтобы читатель мог отдохнуть от движения.

Замедляют ли эффекты прокрутки ваш сайт?

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

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

При доступности все 16 виджетов имеют a prefers-reduced-motion правило. посетитель, который попросил свое устройство о меньшем движении, получает неподвижный макет: Weft Grid показывает свою готовую сетку с текстом поверх нее, а Shatter Deck перекрестно затухает. Shatter Deck также является настоящей остановкой вкладки, поэтому клавиши со стрелками работают, как только у нее есть фокус, и не захватывайте страницу иначе.

Для телефонов несколько дизайнов включают в себя их собственную узкоэкранную компоновку.Facet Cube перемещает свой миниатюрный рельс в ряд у подножия сцены, а Reel Portraits превращает свой индекс в ряд цифр.Все же, проверьте виджет, который вы выбрали на реальном телефоне, прежде чем опубликовать.Высокие закрепленные секции чувствуют себя под большим пальцем дольше, чем под колесом мыши. если ваш сайт использует нестандартные точки останова, наш путеводитель по Точки останова Элементора объясняет, как их корректировать.

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

Часто задаваемые вопросы

Заключительные мысли

Встроенные эффекты прокрутки Elementor дают вам шесть способов перемещения одного элемента, и они живут в Elementor Pro. 16 виджетов здесь покрывают землю за пределами этого: четыре закрепленных раскрытия, четыре 3D-фрагмента, две карточные колоды, три бесконечные галереи и три макета указателей или магазинов, каждый с живой демонстрацией и резервным копированием уменьшенного движения.

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

Связанное чтение

• Elementor Image Box: 16 дизайнов с живыми демонстрациями и загрузкой
• 20 шаблонов ползунков элементаров: покровный поток, временная шкала, отзывы и многое другое
• 3D-карусель Elementor: Покровный поток, переворот, дуга и орбита
• 4 расширения эффектов анимации элементаров без кода
• Elementor Marquee: текст, логотипы и наклейки с бесконечной прокруткой