В этом уроке мы создадим эффект параллакса. Чтобы соответствовать последним тенденциям и стандартам качества, мы намеренно избегаем библиотеки jQuery при реализации и выборе метода достижения намеченной анимации. Избегание jQuery позволит вам создать быстрый и эффективный веб-сайт и легко адаптировать эффект к существующим страницам.
Что такое эффект параллакса?
Эффект параллакса (называемый. Parallax) — это видимое движение объектов относительно друг друга при изменении точки обзора, которые расположены на разном расстоянии от наблюдателя.
Как всегда, лучше всего показать на примере, смотрите видео в конце статьи. ? Нам понадобится этот эффект. То есть более медленное движение фона элемента (изображения или видео), чем сам элемент с его содержимым.
Как работает эффект параллакса CSS / JS?
Эффект параллакса, несмотря на некоторую эффектность, легко реализовать. В одной из первых введенных в эксплуатацию реализаций я без особого труда добился такого эффекта.
Я еще был на той стадии, когда все элементы делал с нуля, потому что думал, что так лучше и проще, а про фреймворки или готовые библиотеки даже слушать не хотелось :).
Эго начинающего программиста не соглашалось с тем, что можно использовать чей-то гораздо лучший (потому что усовершенствованный) код.
Поскольку для параллакса требуется событие прокрутки, вам нужно знать событие прокрутки в JavaScript:
document.addEventListener (‘scroll’, function (e) {
/ * Какой-то код * /
}
Параллакс — наиболее распространенное движение на светлом фоне. Это делается путем изменения значения CSS background-position. Если таких элементов несколько, достаточно воспользоваться удобным методом querySelectorAll:
var parallax = document.querySelectorAll (‘. parallax’);
Оператор, который динамически стилизует фон элементов класса параллакса, просто нужно добавить в цикл foreach:
Array.prototype.forEach.call (параллакс, функция (el, i) {
el.style.backgroundPosition = ‘center’ + (window.scrollY / 3) + ‘px’;
}
Такой параллакс как-то подействует. Необходимо решить оптимизацию, потому что мы обновляем значения даже для тех элементов, которые не видны на экране.
Параметры конфигурации также оставляют желать лучшего. Изменение числа 3, которое замедляет анимацию, является единственной настройкой, которую мы можем сделать на данный момент. Давайте лучше воспользуемся готовой библиотекой …
Jarallax — библиотека параллакса без зависимостей jQuery
Готовые Jarallax библиотека по: нк приходит на помощь, потому что, хотя кодирование эффекта параллакса интересно и не очень сложно, использование плагина, что кто — то работал в течение длительного времени и выпустила несколько версий этого будет однозначно будет выгоднее и избавит нас от решения задач, которые давно решены и протестированы на различных устройствах.
Использование Jarallax — это добавление стилей CSS и JS — аналогично другим подобным библиотекам. В разделе CSS мы добавляем:
.jarallax { положение: относительное; z-индекс: 0; } .jarallax> .jarallax-img { позиция: абсолютная; объект подходит: крышка; верх: 0; слева: 0; ширина: 100%; высота: 100%; z-индекс: -1; } .jarallax { высота: 100вх; / * По желанию * / }
Не обойдется без добавления скачанного скрипта
<script src = «js / jarallax.min.js»> </script>
Инициализация может быть выполнена двумя способами или в самом элементе, фон которого должен иметь эффект параллакса:
<section class = «jarallax» data-jarallax data-speed = «0.5»>
<img class = «jarallax-img» src = «obrazek.jpg»>
</section>
или в коде JavaScript мы вызываем метод jarallax:
jarallax (document.querySelectorAll (‘. jarallax’), {
скорость: 0,4
});
Как нетрудно догадаться, параметр скорости определяет скорость прокрутки. Я рекомендую вам провести собственные эксперименты и использовать такое значение, которое соответствует желаемому эффекту.
Эффект параллакса — фоновое видео
Библиотека Jarallax также позволяет использовать видеоматериалы в фоновом режиме, то есть фильмы и другую анимацию. Чтобы использовать видео, вам нужно добавить еще один файл JavaScript:
<script src = «js / jarallax-video.min.js»> </script>
Теперь вам просто нужно инициализировать фильм следующим образом:
<div class = «jarallax» data-jarallax-video = «mp4: ./ video / film.mp4, webm: ./ video / film.webm, ogv: ./ video / film.ogv»> Какая-то надпись … </div>
Почему мы используем несколько файлов, читайте в статье: Оптимизация фильмов / видео для сайта.
Вы также можете использовать видео с YouTube:
<div class = «jarallax» data-jarallax-video = «https://www.youtube.com/watch?v=-c8__m245-w» data-speed = «0.2»> Некоторое содержание … </div>
Это работает только тогда, когда веб-сайт размещен на сервере.
Jarallax позволяет использовать дополнительные параметры, с которыми можно ознакомиться в документации: https://github.com/nk-o/jarallax
Конечный результат
Преимущества Jarallax
- Прежде всего легкость (файл весит около 15 КБ),
- локальное видео, поддержка YouTube и Vimeo
- возможность инициализации в коде HTML и JavaScript,
- возможность регулировать темп параллакса и другие параметры,
- эффективность и SEO-дружественность (плагин не генерирует избыточный код),
- img images позволяют использовать механизм отзывчивых фотографий (srcset), встроенную отложенную загрузку и тег изображения, что позволит вам обслуживать графические форматы следующего поколения.
Резюме
Jarallax — это очень удобный плагин на сайте для создания эффективного параллакса. Эта легкая библиотека позволит вам легко добавить эффект параллакса на любую веб — страницу. Библиотека решит большинство сложностей, с которыми нам пришлось бы столкнуться, если бы мы захотели создать такой эффект самостоятельно.
