Как сделать параллакс эффект CSS
Чтобы сделать параллакс эффект, можно использовать свойство background-attachment со значением fixed и добавить дополнительный div для того, чтобы добавить затемнение.
Пример
Lorem Ipsum
HTML
Lorem Ipsum
CSS
.bg-ex-parallax < background: url(image.jpg); /* Путь к картинке */ background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; position: relative; >.bg-ex-parallax .parallax-overlay < position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6); /* Прозрачность */ z-index: 2; >.bg-ex-parallax span
Как сделать — Параллакс
Узнать, как создать эффект «параллакса» прокрутки с помощью CSS.
Параллакс
Параллакс прокрутки — это тенденция веб-сайта, где фоновое содержимое (т.е. изображение) перемещается с другой скоростью, чем содержимое переднего плана при прокрутке. Нажмите на ссылки ниже, чтобы увидеть разницу между веб-сайтом с параллаксной прокруткой и без нее.
Примечание: Параллакс прокрутка не всегда работает на мобильных устройствах/смартфонах. Однако вы можете использовать медиа запросы для отключения эффекта на мобильных устройствах (см. Последний пример на этой странице).
Создать параллакс
Используйте элемент контейнера и добавьте фоновое изображение в контейнер с определенной высотой. Затем используйте background-attachment: fixed для создания фактического эффекта параллакса. Другие свойства фона используются для идеального центрирования и масштабирования изображения:
Пример с пикселями
/* Установите определенную высоту */
height: 500px;
/* Создайте эффект параллакса прокрутки */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
В приведенном выше примере используются пиксели для установки высоты изображения. Если вы хотите использовать процент, например 100%, чтобы изображение соответствовало всему экрану, установите высоту контейнера параллакса на 100%. Примечание: Вы также должны подать заявку height: 100% как в и :
Пример with percent
.parallax /* Используемое изображение */
background-image: url(«img_parallax.jpg»);
/* Полный рост */
height: 100%;
/* Создайте эффект параллакса прокрутки */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
Некоторые мобильные устройства имеют проблемы с background-attachment: fixed . Однако вы можете использовать медиа запросы, чтобы отключить эффект параллакса для мобильных устройств:
Пример
/* Выключите параллакс прокрутки для всех планшетов и телефонов. Увеличение уменьшение пикселей при необходимости */
@media only screen and (max-device-width: 1366px) .parallax background-attachment: scroll;
>
>
Компонент Параллакс Parallax
Анимируйте свойства CSS и измените видимое положение объекта относительно удалённого фона в зависимости от положения прокрутки документа.
Применение
Руководство по использованию
Чтобы применить компонент Параллакс , добавьте атрибут uk-parallax к любому элементу. Добавьте параметр с желаемым конечным значением анимации для каждого свойства CSS, которое вы хотите анимировать.
SVG
SVG изображения
Компонент Параллакс можно применять к элементам встроенных изображений SVG таким как rect , circle и path .
Отзывчивость
Рекомендуется использовать vw или vh в качестве единиц длины вместо пикселей. Параллакс будет адаптироваться в зависимости от области просмотра.
Параллакс также может применяться только к определенным областям просмотра.
Добавьте опцию media с одним из возможных значений. Например, можно добавить число в пикселях, указав значение в виде 640 или точку останова, такую как @s , @m , @l или @xl . Параллакс будет срабатывать для указанной ширины области просмотра и более.
Sticky Parallax
Вместе с компонентом Sticky вы можете добиться сложных эффектов липкого параллакса. Посмотрите несколько примеров в тестах для Sticky Parallax.
Параметры для атрибута
При использовании компонента Parallax к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
| easing | Number | 1 | Плавность анимации при прокрутке |
| target | CSS Selector | false | Ссылка-цель для продолжительности анимации. |
| start | Length | 0 | Начальное смещение (Start offset). Значение может быть в vh, % и px. Поддерживает базовые математические операнды + и -. Значение по умолчанию 0 означает, что верхняя граница цели и нижняя граница области просмотра пересекаются. |
| end | Length | 0 | Конечное смещение (End offset). Значение может быть в vh, % и px. Поддерживает базовые математические операнды + и -. Значение по умолчанию 0 означает, что нижняя граница цели и верхняя граница области просмотра пересекаются. |
| media | Number, String | false | Условие для активного состояния — ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)). |
| viewport | Number | 1 | Устарело. Подробности см. Миграция 3.10 — 3.11 |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.parallax(element, options); 8 приемов работы с CSS: параллакс, «липкий» футер и другие
Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.
CSS — специфическая технология. На первый взгляд она кажется очень простой. Но некоторые эффекты, которые в теории кажутся простыми, не являются таковыми на практике.
Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
1. «Липкий» футер
Несмотря на простоту реализации, он может стать камнем преткновения для начинающих разработчиков.
В большинстве проектов вы захотите, чтобы футер оставался в нижней части экрана вне зависимости от объема контента и адаптировался под различные условия просмотра.
До появления CSS3 этого эффекта было сложно добиться, не зная точную высоту футера. Но сейчас это не проблема, для создания «липкого» футера лучше всего использовать Flexbox. А именно — взять свойство flex-shrink, так вы будете уверены в том, что нижний колонтитул сохранит свои размеры.
При размере 0 он не будет сжиматься вообще.
2. Увеличение при наведении
Такой эффект — отличный способ привлечь внимание пользователя к кликабельному изображению. Когда тот наводит курсор на картинку, она слегка «приподнимается» с сохранением прежних размеров.
Для того, чтобы сделать такой эффект, нам понадобится враппер div, им нужно обернуть тэг image в HTML.
Кроме того, чтобы эффект заработал, нужно установить width и height элемента, а также убедиться, что его overflow установлен как hidden. После этого вы сможете применять любые типы трансформаций.
3. Постоянный режим Night Mode
Если вам необходим быстрый способ установить ночной режим для вашего сайта, то используйте фильтры invert и hue-rotate.
filter: invert() может принимать значения от 0 до 1. 1 — это инверсия, белое становится черным.
filter: hue-rotate () изменяет цветовое содержимое ваших элементов таким образом, что они сохраняют более-менее одинаковый уровень отделения друг от друга. Значения варьируются от 0 до 360 градусов.
Если объединить эти эффекты внутри тега body, вы можете быстро добиться получения ночного скина для сайта (фону в этом случае нужно задать цвет).
body
Используя эти настройки можно превратить стартовую страницу Google вот в это.
4. Кастомные буллиты
Для создания кастомных буллитов для списка можно использовать content вместе с псевдоэлементом ::before
В CSS, указанном ниже, я использую два класса .comlete и .incomplete, чтобы отличить два типа буллитов.
Бонус: хлебные крошки в навигации
Есть много способов получать интересные эффекты с помощью свойства content, но я не удержался и добавил еще один.
Поскольку слеши и другие символы, используемые для разделения хлебных крошек, это стилистика, имеет смысл определить их в CSS. Как и во многих других примерах в этой статье, эффект основан на псевдоклассе — last-child. Он доступен только в CSS3:
.breadcrumb a:first-child::before < content: " » "; >.breadcrumb a::after < content: " /"; >.breadcrumb a:last-child::after
5. Параллакс-изображения
Этот популярный эффект привлекает внимание пользователей. Его стоит использовать, если вы хотите оживить страницу во время скроллинга.
В то время, как обычные изображения изменяют местоположение при прокручивании, параллакс-изображения остаются на месте.
CSS-пример (только CSS)
Здесь неотъемлемым элементом является background-attachment: fixed, он привязывает положение фонового изображения к определенной позиции. Картинка остается на месте, в то время, как окно, из которого она видна, прокручивается. Создается впечатление, что картинка находится позади всего сайта. Для того, чтобы заменить этот эффект на противоположный, указываем background-attachment: scroll.
CSS + JavaScript