3D-карусель - это карусель, ползуны которой движутся по глубине, а не по плоской плоскости: вращаясь, масштабируясь или вращаясь по орбите, поэтому неактивные ползуны сидят заметно позади активного. В Элементоре вы получаете его либо из Изображение Макет coverflow виджета карусели, или от специально построенная конструкция.
Четыре стиля стоят вашего времени Они выполняют разные работы, и один из них сделает вашу страницу медленнее без всякой пользы, если вы выберете ее не для того контента Живые демо для каждого, плюс настройки, которые отделяют гладкую 3D карусель от заикающейся.
Покровный поток: тот, который имеет в виду большинство людей
Центральное скольжение обращено к вам квадратом. Слайды с обеих сторон поворачиваются на оси Y, слегка сжимаются и тускнеют. Вашему глазу некуда идти, кроме середины.
В этом вся хитрость, и именно поэтому coverflow пережил смерть iTunes Периферийные слайды видны достаточно, чтобы доказать, что их больше, размыто настолько, что их не прочесть Люди щелкают стрелкой, чтобы разрешить напряжение.
Три настройки выполняют большую часть работы:
- Вращать: насколько сильно поворачиваются боковые слайды. Все, что превышает 50°, и соседи становятся нечитаемыми слайберами. От 30 до 40° - это диапазон, который читается как глубина, а не как искажение.
- Глубина: как далеко они сидят назад. перетолкните его слишком далеко, и боковые слайды сжимаются до миниатюр, и композиция теряет равновесие.
- Слайды на вид: coverflow нужно как минимум три видимых или нет “flow.” Установите его на 3 на рабочем столе, 1 на мобильном и пропустите неудобный 2.
Для этого не нужен Про.The виджет бесплатного изображения карусели имеет встроенную компоновку coverflow.
Хорошо для: тематические исследования, портфолио, коллекции в стиле альбомов.
Плохо для: все, что нужно людям для сравнения.Coverflow построен, чтобы вы смотрели на одну вещь.
Флип: двусторонние карты
Карта поворачивается на 180° по своей вертикальной оси. Передняя сторона наружу, задняя сторона внутрь. обе стороны содержат реальный контент.
Большинство 3D эффектов украшение Этот не. Он удваивает содержание на слайд, поэтому он зарабатывает свое место на странице команды Фото и имя на лицевой стороне, роль, био и ссылки на оборотной стороне. один и тот же след, в два раза больше информации.
Настройка, в которой люди ошибаются, такова видимость заднего лица. Оставьте его включенным, и вы увидите зеркальный призрак лицевой стороны, истекающий кровью в середине вращения. Это достаточно тонко, чтобы пропустить в редакторе и очевидно на экране сетчатки. Выключите его.
Второе: держите переворот ниже 600 мс. Флип - это раскрытие, и раскрытие, которое занимает целую секунду, перестает чувствовать себя отзывчивым и начинает ощущаться как состояние загрузки.
Хорошо для: сетки команд до/после, специальные карты, цены с обратной информацией.
Плохо для: все, где задняя грань была бы пуста.Обратный ход, за которым ничего нет, - это напрасный щелчок.
Хотите такое же двустороннее раскрытие, как стоячая карта, а не карусельная горка? Вот Виджет флипбокса Elementor'с работа.
Дуга: скольжения по кривой
Слайды едут по краю круга, центр которого находится ниже складки. Каждый из них поднимается вертикально в верхней части дуги и отскакивает, когда он уходит.
Арк - наименее распространенный 3D-стиль на сайтах WordPress, что в большей степени его ценность Посетитель видел coverflow сто раз Они этого не видели.
Это стоит вам что-то взамен: опрокидывающее движение означает, что слайды полностью читаются только в верхней части дуги. Контент, который должен быть разборчивым на периферии (цены, даты, характеристики) будет бороться с дизайном. Изображения и короткие заголовки не будут.
Хорошо для: каталоги, списки образцов, меню, коллекции аналогичных предметов.
Плохо для: данные. если людям нужно прочитать сразу три слайда, используйте сетку.
Орбита: круговое движение вокруг центра
Предметы проходят полный круг вокруг фиксированного центра. Предмет вверху активен и полноразмерен; остальные уменьшаются, проходя позади.
Орбита говорит что-то структурное, что ни один другой макет не говорит: это циклы. четырехэтапный процесс, который действительно возвращается к своему началу, читается идеально. пятишаговый поток адаптации, который заканчивается, не. Круг обещает возврат, и если ваш контент не возвращается, люди ждут того, что никогда не приходит.
Используйте орбиту, когда содержимое представляет собой цикл. Используйте coverflow, когда это список.
Хорошо для: колеса процессов, диаграммы экосистем, карты возможностей, циклы обслуживания.
Плохо для: последовательности с началом и концом.
Как сделать 3D-карусель, которая не заикается
3D-трансформации дешевы на графическом процессоре и дороги, если вы ошиблись. четыре вещи отделяют гладкую карусель от долговязой, в том порядке, в котором они вас укусят:
- Только оживить трансформацию и непрозрачность. Анимация ширины, высоты, верха или левого заставляет раскладку пересчитать на каждом кадре.Преобразование и непрозрачность идут прямо к композитору. каждый дизайн здесь придерживается этих двух.
- Закройте размер изображения. 3D-карусель удерживает в памяти сразу несколько слайдов, потому что все они видны Шесть слайдов на 400 Кб каждый по 2,4 Мб, прежде чем что-либо сдвинется. достаньте их меньше 200 Кб и подавайте WebP.
- Не складывайте 3D внутри 3D. Флип-карта внутри трека coverflow создает вложенные трехмерные контексты, и браузеры обрабатывают это непоследовательно.Safari, в частности, выравнивает внутреннее преобразование в непредсказуемые моменты.Выберите один.
- Уважайте уменьшенное движение. У некоторых людей есть вестибулярные расстройства, и анимация глубины является распространенным триггером. Каждый дизайн здесь падает до простого затухания, когда
prefers-reduced-motionустановлено. если вы строите свой собственный, делайте то же самое.
Тест на Android-телефоне среднего класса, а не в эмуляторе устройства браузера Эмулятор изменяет размер видопорта, но сохраняет графический процессор вашего рабочего стола. вот откуда взялся “на моей машине все было хорошо”.
Трехмерная карусель вредит скорости страницы?
Не сама по себе. анимация на основе преобразования работает на потоке композитора и не блокирует основной поток, поэтому не будет сильно перемещать ваше взаимодействие с Next Paint.
Что болит: изображения. карусель над складкой с шестью полноразмерными слайдами - это шесть запросов на изображение, блокирующих рендер, конкурирующих с вашей самой большой содержательной краской. лениво загружайте все мимо первого слайда, устанавливайте явную ширину и высоту, чтобы ничего не смещалось, и держите изображение первого слайда ниже 150 КБ.
3D не ваша проблема. полезная нагрузка есть.
Если карусель вообще не анимирует, а не плохо анимирует, то обычно Swiper не может инициализировать вместо задачи преобразования. Руководство по устранению неполадок Swiper покрывает то, что останавливает его загрузку.
Часто задаваемые вопросы
Есть ли у Элементора 3D-карусель?
Не нативно. медиакарусель (Pro) Elementor имеет обшивку coverflow, дающую мягкий 3D-эффект, но нет опции flip, arc или orbit. для тех, кому нужен аддон.Master Addons' free Изображение Карусель включает макет обложки, а четыре дизайна Pro на этой странице охватывают все остальное.
Как сделать карусель с покровным потоком в Элементоре?
Бросьте Изображение Виджет Карусель на странице добавьте изображения, затем под Настройка карусели переключите Раскладку со Стандартного на Покровный поток. Установите слайды на вид на 3, поверните примерно на 35° и включите центрированные слайды, чтобы активное изображение располагалось посередине, а не заподлицо влево.
Чем отличается покровный поток от 3D-карусели?
Покровный поток - это один из видов 3D-каруселей: та, где боковые скольжения вращаются на оси Y и отступают. перевернуть, дуга и орбита - это также 3D-карусели; они просто используют разные оси и пути. все четверо перемещаются скольжения по глубине, а не по плоской плоскости.
Работают ли 3D-карусели на мобильном?
Да, с регулировками. Покровный поток должен упасть до одного слайда на вид ниже 768px или боковые панели станут непригодными для использования слайберами. флип работает без изменений. дуге и орбите нужно более широкое окно просмотра, чтобы правильно читать, поэтому оба падают обратно к стандартному горизонтальному слайду на телефонах.
Почему моя 3D-карусель мерцает в Safari?
Почти всегда видимость бэкфейса.Safari отображает обратную сторону повернутого элемента, если вы явно не скрываете его, который отображается как мерцание или призрачное зеркальное отражение в середине вращения.Установить backface-visibility: hidden на поворотном элементе и он останавливаетс.
Какой выбрать
Покрытие, если вы не уверены. Это стиль, который люди уже понимают, и бесплатный виджет Image Carousel дает его вам без лицензии. Переверните, если ваш контент действительно имеет две стороны. Arc, если вы хотите чего-то, чего нет ни у кого на первой странице вашей ниши. Орбита только в том случае, если то, что вы показываете, действительно зацикливается. Если раздел может вообще не хотеть карусели, карусель против слайдера решает, что прежде чем стиль движения будет иметь значение.
Если вы хотите повернуть последние сообщения, макет Marquee в нашем Шаблоны блогов Elementor помещает избранную карусель для сообщений вверху страницы блога.
Восемь из двадцати рисунков в наборе импорт на бесплатном плагине. Ни один из свободных восьми не является 3D, хотя Keystone Feature Slider подходит близко: продвижение элемента запускает анимацию положения FLIP, а не преобразование глубины.
Все двадцать проектов построены с использованием Виджет Строитель, который также является инструментом, который вы бы использовали для создания собственного. Если вы взвешиваете лицензию, страница ценообразования перечисляет, что разблокирует каждый уровень.
У всех четверых есть живые демо Виджеты карусели Элементор страница, рядом с другими шестнадцатью дизайнами. если вы предпочитаете сначала увидеть полный набор рядом, все двадцать шаблонов слайдеров собираются в одном месте с одинаковой обработкой.
Каждый из двадцати - это а Виджет или расширение Master Addget, поэтому они устанавливают так же, как виджеты стока. Для а миниатюрная полоса-галерея вместо 3D-трека Виджет слайдер галереи является готовым вариантом.
