Эффект слайдов на сайте. Версия вторая, дополненная и исправленная / Хабр
Некоторое время назад я публиковал статью «Эффект слайдов на сайте. Через грабли на собственном велосипеде».
Статья справедливо набрала множество замечаний, в основном, касающихся отсутствия практической части и примеров кода.
Предлагаю вашему вниманию переработанную статью, снабженную живыми примерами.
Работая над одним из сайтов, мы столкнулись с необходимостью реализовать эффект слайдов.
А именно — при вертикальном скроллинге страницы она должна перемещаться не как единое целое, а как складываемая пачка отдельных листов.
Первая мысль была использовать библиотеку для добавления parallax эффекта на страницу, коих уже достаточно много можно найти в интернете. Однако нам не нужно было мощное универсальное решение, и время затраченное на обзор, выбор и настройку стороннего решения наверняка превысило бы решение задачи в лоб своими силами.
Да и жажда собрать собственные шишки и узнать основы окончательно перевесила чашу весов в пользу собственного велосипеда.
Разработку мы традиционно ведем в Firefox+firebug.
Задача по сути сводилась к изменению координат блоков сайта при скроллинге документа внутри окна браузера.
С помощью jQuery просто привязываемся к событию onscroll документа и прописываем там изменение положения блоков в зависимости от положения документа внутри окна.
Грабли №1: Если в процессе скроллинга произвести манипуляции с DOM, влияющие на высоту всего документа, то мы получим тормоза из-за перестройки и перерисовки контента, а самое неприятное, так это скачки при скроллинге из-за изменения размеров области прокрутки и реинициализации скроллбара.
Чтобы избежать этого мы приняли решение не двигать элементы находящиеся на первом уровне иерархии документа.
Каждый слайд в итоге стал представлять собой неизменный по размерам и положению на странице div (.slide_wrapper), внутри которого располагается блок-обертка (.
slide), который и содержит контент слайда.
Для реализации данного механизма нами был создан класс (в его javascript понимании) aldparallax.
При создании объекта в конструктор передаются параметры, определяющие набор элементов, участвующих в движении (.slide_wrapper) и массив со ссылками на функции обратного вызова.
При наступлении события для каждого слайда готовится массив данных (координаты текущая видимой области документа, позиция слайда в документе, координаты видимой области слайда) и вызывается коллбэк, в котором и заложен алгоритм перемещения элементов в слайде.
Внутри функции мы смещаем положение слайда внутри контейнера навстречу скроллингу (путем изменения свойства top при position: relative), что и дает требуемый эффект.
Пример 1: jsfiddle.net/88WvX
В данном примере скрипт работает с любым количеством слайдов (достаточно внести их в html), начинает перекрытие только при достижении слайдом верха окна и в то же время корректно отрабатывает ситуации, когда слайд больше размера окна и его «залистывание» может привести к тому, что низ скроется за следующим слайдом раньше, чем появится в окне.
Казалось бы проблема решена, однако Грабли №2 — прогон этого решения в Chrome дает неприятные ощущения. Слайды, которые должны просто задерживаться у верха окна, начинают неприятно подергиваться.
Дело в том, что в отличие от Firefox Chrome при скроллинге страницы сначала отрисовывает ее новое положение, а затем вызывает onScroll, где мы меняем координаты блока и страница отрисовывается повторно.
При написании статьи оказалось, что в последних обновлениях Chrome ситуация исправлена, но приведу решение, так как оно будет полезно с точки демонстрации подхода к решению подобных проблем и преимущества использования callback-функций.
Исправить ситуацию позволило задание нужным элентам .slide фиксированного позиционирования (position: fixed;). Такие элементы не меняют своего экранного положения при скроллинге.
Осталось только рассчитать смещение .wrapper относительно окна, а не родительского элемента и рывки исчезают. Корректируем нашу функцию onParallaxEvent.
Пример 2. jsfiddle.net/PWm7v
Грабли №3: в некоторых мобильных браузерах событие onScroll не генерируется до полной остановки скроллинга, что приводит к чудовищным задержкам “анимации”.
Решением может стать вызов пересчета координат по таймеру, а еще лучше через requestAnimationFrame. Данную корректировку оставляю на самостоятельную работу читателям.
Полученное решение обладает несколькими важным достоинствами, при отключении скриптов страница выглядит совершенно корректно — отключется лишь эффект слайдовости.
При использовании разных callback-функций для разных слайдов можно добиться разных эффектов и хорошо разнообразить даже отдельные блоки внутри контента сайта.
В следующем примере упрощенный пример одного из наших рабочих проектов.
Для предотвращения хабраэффекта код был немного упрощен и выложен на jsfiddle:
Пример 3: jsfiddle.net/2Lhvb
Добавьте красивые слайды на свой сайт с помощью MotoPress Slider для WordPress
Настройка нового слайдера MotoPress
Добавление слайдов в ваш новый слайдер MotoPress
Слайдер MotoPress
Ценообразование
Последние мысли
MotoPress хорошо известен в сообществе WordPress своим плагином WordPress для редактирования контента.
В феврале этого года они выпустили слайдер MotoPress ; их второй основной плагин WordPress. Плагин адаптивен, поэтому слайды, которые он помогает, отлично смотрятся на любом устройстве. Давайте подробнее рассмотрим, что умеет MotoPress Slider.
Настройка нового слайдера MotoPress
MotoPress Slider невероятно прост в настройке. Когда вы решите создать новый слайдер, вам будут представлены три короткие страницы настроек. Есть вкладка для настроек, элементов управления и внешнего вида слайдера.
На вкладке настроек слайдера вы можете назвать свой слайдер и псевдоним, который используется для шорткода слайдера. Ползунок можно сделать полной шириной или вы можете определить размер сетки по умолчанию. В этой области также можно установить задержку слайд-шоу. Если хотите, слайд-шоу можно отключить.
На следующей вкладке можно включить или отключить девять ползунков.
Вы можете настроить такие элементы управления, как стрелки, кнопки воспроизведения, счетчики и многое другое.
На вкладке внешнего вида вы можете определить размер пикселей по умолчанию для дисплеев телефона, планшета и рабочего стола. Исходными настройками являются любые значения размером до 767 пикселей, отображаемые с использованием макета телефона, любые значения от 768 до 991 пикселей используют макет планшета, и все, что превышает 992 пикселей, использует дисплей рабочего стола.
К вашему слайдеру можно применить собственный класс CSS. Также есть поле, в котором вы можете добавить собственный код CSS.
В административном меню MotoPress Slider находится отдельная страница настроек, которая позволяет отключить слайдер для определенных групп пользователей.
Не беспокойтесь о настройках слайдера. Значения по умолчанию должны подойти большинству из вас, и в нижней части области создания ползунка есть кнопка, которая позволяет вам возвращать и изменять настройки в любое время.
Добавление слайдов в ваш новый слайдер MotoPress
В следующей области вы можете добавить слайды в свой слайдер. Вы можете увидеть скриншот этой области ниже. На первый взгляд это может показаться немного пугающим, однако это очень легко понять, если вы знаете, где все находится.
Вверху находятся семь вкладок: Общие, цвет, изображение, видео, ссылка, видимость и прочее. Предварительный просмотр вашего слайдера занимает центральное место на странице, а под ним вы найдете варианты добавления текста, изображений, кнопок и видео. Каждый тип контента известен как слой, и эти слои отображаются в правой части страницы.
Вы можете изменить порядок слоев с помощью перетаскивания. Размещение слоев работает так же, как и в графических приложениях, таких как Photoshop, с приоритетом верхнего слоя. В моем примере выше у меня есть два слоя: изображение и текст. Если бы мне пришлось разместить слой HTML после изображения, текст не был бы виден.
Интерфейс работает очень хорошо.
Когда вы выбираете слой в основной области холста, настройки этого слоя будут отображаться под ним. Нажатие на кнопку «Удалить» на клавиатуре удалит слой со слайда. Также доступны две кнопки удаления: одна удаляет выбранный вами слой, другая удаляет все слои.
Слои можно перетаскивать в области холста. Когда вы это сделаете, вы увидите изменение координат X и Y. Это полезно, так как означает, что вы можете размещать слои на нескольких слайдах в одном и том же положении (что очень полезно для размещения контента, такого как текст). Сетка из девяти ящиков также может использоваться для размещения слоев, например, верхнего левого, центрального, нижнего правого и т.д.
Десятки анимаций можно использовать для постепенного появления и исчезновения слоев. Сюда входят затухания, масштабирование, переворачивание и отскоки. Слои можно отображать и / или скрывать в определенный момент времени (в миллисекундах). По моему скромному мнению, это одна из лучших функций плагина, поскольку он позволяет отображать слои именно тогда, когда вы хотите, чтобы они отображались.
Также доступны предопределенные стили, но при желании вы можете определить собственные классы CSS для определенного слоя.
На общей вкладке вы можете назвать свой слайд и выбрать, будет ли он опубликован или сохранен как черновик. Таким образом, вы можете проявить творческий подход и сохранить слайды, прежде чем использовать их.
Вкладка цвета позволяет выбрать цвет или градиент для фона слайда. Одна вещь, которая меня раздражала, заключалась в том, что не было цветового круга для выбора цветов. Вы должны ввести шестнадцатеричный код вручную. Надеюсь, они исправят это в будущей версии плагина. Параметр градиента позволяет определить два цвета и угол, под которым применяется градиент.
Если вам не нужен однотонный или градиентный фон, вы можете использовать изображение. Вы можете выбрать изображение из своей медиа-библиотеки WordPress или определить внешний URL-адрес изображения. Все атрибуты размера, повторения и положения могут быть определены.
MotoPress Slider также поддерживает видео фон.
Если хотите, видео можно вставлять в слайды с помощью слоев. Вы можете отображать видео с YouTube, Vimeo, вашей медиатеки или с внешнего URL.
Слайды можно связать. Вы можете установить атрибуты ID ссылки, class, rel и title. Когда посетитель нажимает на рассматриваемый слайд, он будет перенаправлен на указанный вами URL. Поскольку ссылки настраиваются для каждого слайда, вы можете сделать так, чтобы некоторые слайды ссылались на внешние веб-сайты, а не на другие.
Слайды могут быть доступны только зарегистрированным пользователям. Это можно использовать для отображения слайдов только зарегистрированным пользователям. Вы также можете сделать слайды активными в течение определенного периода времени. Это может быть использовано для различных целей. Например, вы можете создать слайды для продвижения конкурса в первую неделю декабря.
На последней вкладке вы можете определить имя класса CSS и идентификатор для своего слайда. Как я отмечал ранее, вы также можете стилизовать отдельные слои в своем слайде с помощью пользовательских классов CSS.
Создав слайд, вы можете сохранить слайд, нажав кнопку «Сохранить» внизу страницы. Нажав кнопку закрытия, вы перейдете к списку слайдов, то есть ко всем слайдам, которые вы создали для этого конкретного слайдера.
Вы можете редактировать, дублировать или удалять существующие слайды. Дублирование слайда – удобный вариант, если вы хотите создать похожий слайд. Если нет, вы можете создать новый слайд с нуля.
Наконец, вы можете вставить готовый слайдер на свой веб-сайт, используя псевдоним шорткода, который вы определили для своего слайдера.
Слайдер MotoPress
Говорят, красота в глазах смотрящего, однако я был очень впечатлен тем, что умеет MotoPress Slider. Вставка пользовательского фона, текста, изображений, кнопок и видео не займет много времени.
Если вы посетите главную информационную страницу MotoPress Slider, вы увидите отличный пример того, чего можно достичь с помощью этого плагина. Он подчеркивает, как слои и задержку загрузки слоев можно использовать для создания профессиональных слайдеров за считанные минуты.
То, как слои отображаются с течением времени во время слайда, создает впечатление, будто вы смотрите видео-презентацию (даже если видео не используются). Это простой эффект, который действительно преображает слайды.
Ценообразование
MotoPress приняла справедливую схему ценообразования для своего плагина слайдера. Их персональная лицензия продается по цене 19 долларов и предлагает один год поддержки и обновлений для одного веб-сайта. Бизнес-лицензия, продаваемая в розницу по цене 49 долларов, увеличивает лимит веб-сайтов с одного до пяти.
Лицензия разработчика стоит 99 долларов. Он предлагает приоритетную поддержку разработчиков и предоставляет один год поддержки и обновления неограниченного количества веб-сайтов. Корпоративное лицензирование также доступно, если вы хотите упаковать MotoPress Slider в собственный продукт.
MotoPress Slider – это 100% GPL. Для получения автоматических обновлений и поддержки плагина требуется лицензия, однако плагин по-прежнему можно полностью использовать, если этот лицензионный ключ не введен.
Последние мысли
Все плагины слайдеров WordPress требуют обучения, и MotoPress Slider не исключение. Вам нужно потратить не менее двадцати или тридцати минут, играя со слайдами, пока вы не начнете понимать, на что способен плагин.
После короткого периода использования плагина у меня было несколько моментов «Ага», когда я начал понимать, как все работает. Во-первых, когда я понял, как получить максимум от слоев. Второй – когда я узнал, как можно использовать анимацию для увеличения и уменьшения текста, кнопок и изображений. Тем не менее, функция, которая действительно заставила меня оценить потенциал слайдера MotoPress, заключалась в возможности задержки появления слоев. Это позволяет использовать множество интересных трюков с презентациями, таких как капельная подача текста посетителям веб-сайта и размещение изображений и кнопок в ключевых точках слайда.
Я уверен, что после того, как вы освоите эти простые методы, вы сможете создавать профессиональные слайды с помощью MotoPress Slider.
Если вам нужно вдохновение, я рекомендую проверить слайдер, который отображается в MotoPress, поскольку он подчеркивает, чего можно достичь с помощью простых слоев текста и изображений.
Надеюсь, вам понравился этот взгляд на слайдер MotoPress. Если это так, я рекомендую вам подписаться на информационный бюллетень WPExplorer, чтобы получать бесплатные обновления наших последних статей и отличных советов, приемов и предложений WordPress.
Спасибо за прочтение.
Кевин
Источник записи: https://www.wpexplorer.com
Лучшие бесплатные шаблоны PPT и темы Google Slides
Бесплатно для любого использования, без регистрации и ограничений на загрузку
Ищи:
Популярные запросы
Последние опубликованные шаблоны
Хронология вехи
Вы справились — теперь пришло время подумать и отпраздновать свои достижения. Поделитесь своим прогрессом на временной шкале вех, легко […]
График роста
Рост происходит как в профессиональном, так и в личном плане, и у нас есть шаблон для обоих.
Поделитесь своим путешествием с друзьями […]
График планирования на 90 дней
Иногда легче достичь наших целей, если мы планируем ближайшее будущее. Разбивайте вещи на кусочки размером с укус […]
Хронология компании
расскажите о путешествии своей компании с помощью временной шкалы компании, которую легко использовать в качестве шаблона Google Slides, темы PowerPoint или Canva […]
Хронология жизни людей
Почтите жизнь члена семьи, дорогого коллеги или вдохновляющего общественного деятеля с хронологией жизни человека, идеальной как […]
Хронология истории
История не только для книг. Оживите прошлое с помощью временной шкалы истории, идеально подходящей для Google Slides […]
Хронология продукта
Будьте организованы с этой хронологией продуктов. Наметьте путь вашего продукта или услуги, начиная с первого […]
Изогнутая временная шкала
Оставайтесь на вершине своей игры с этой изогнутой временной шкалой, готовой к использованию в виде шаблона Google Slides, темы PowerPoint, […]
Хронология проекта
Есть проект, который нужно организовать? Отслеживайте свой прогресс с помощью временной шкалы проекта, которую легко использовать в качестве [.
..]
Зимние каникулы
Время для этой сладкой передышки, называемой зимними каникулами? Будьте готовы планировать и документировать хорошие времена с этими зимними […]
Зимняя страна чудес
Создайте идеальную атмосферу для презентации «Зимняя страна чудес» с помощью этих слайдов «Зимняя страна чудес», идеально подходящих в качестве шаблона Google Slides, […]
Зимняя кампания
Возглавьте свое следующее рекламное мероприятие с помощью этого шаблона зимней кампании, который легко использовать в качестве шаблона Google Slides, шаблона PowerPoint, […]
Посмотреть все шаблоны PPT и темы Google Slides
Популярные шаблоны
Шаблон 30-летия
Шаблон запоздалого дня рождения
Бизнес-геометрический шаблон
Образовательный шаблон презентации Sketchnotes
Шаблон презентации Green Doodles
Цветочные акварельные слайды
Шаблон презентации о вспышке COVID
Шаблон презентации Cool Circles
Найдите бесплатный шаблон, который соответствует вашим коммуникационным потребностям
Шаблоны по темам
Шаблоны по стилю
Шаблоны по цвету
Изучите дизайн презентаций
Научитесь создавать лучшие презентации с помощью углубленных материалов SlidesCarnival.
Советы по дизайну бизнес-презентаций
Советы по презентациям для преподавателей и учащихся
Цветовые принципы дизайна презентаций
Дополнительные советы по дизайну презентаций
Шаблоны для PowerPoint и Google Slides
76 шаблонов
Почему так серьезно? Оживите свои презентации и привлеките внимание аудитории с помощью этих забавных тем Google Slides и шаблонов PowerPoint
Вы справились — теперь пришло время подумать и отметить свои достижения. Поделитесь своим прогрессом на временной шкале вех, легко […]
Почтите жизнь члена семьи, дорогого коллеги или вдохновляющего общественного деятеля с хронологией жизни человека, идеальной как […]
История не только для книг. Оживите прошлое с помощью временной шкалы истории, идеальной как Google Slides […]
Время для сладкой передышки, называемой зимними каникулами? Будьте готовы планировать и документировать хорошие времена с этими зимними […]
Создайте идеальную атмосферу для презентации зимней страны чудес с помощью этих слайдов зимней страны чудес, идеально подходящих в качестве шаблона Google Slides, […]
Возглавьте свое следующее рекламное мероприятие с помощью этого шаблона зимней кампании, который легко использовать в качестве Google Шаблон слайдов, шаблон PowerPoint, […]
Вы знаете, куда хотите отправиться? Зафиксируйте свои цели в камне, чтобы вы могли действовать с уверенностью.
Будь то […]
Держите своих учеников в напряжении с помощью исторической инфографики, простой в использовании в качестве шаблона Google Slides, шаблона PowerPoint, […]
Преподаете ли вы онлайн-курс или создаете контент для образовательной компании, вы можете адаптировать эту образовательную инфографику к […] Тема PowerPoint или шаблон Canva. Уже […]
Этот зелено-черный шаблон «Добро пожаловать в математический класс» очарователен, прост и весел. Добавить класс […]
Этот шаблон онлайн-класса по математике в розовых забавных каракулях полностью настраиваемый и готов к воплощению ваших творческих идей. Вы найдете слайды […]
Этот шаблон имитирует записную книжку, и содержимое вашей презентации можно разместить на разлинованных страницах. Используйте эту тему, чтобы говорить об образовании, писать или представлять упражнения своим ученикам в оригинальной и забавной форме.
Проведите следующий урок и заинтересуйте своих учеников с первой минуты с помощью этого забавного шаблона.