Параллакс

Анимируйте свойства CSS в зависимости от положения прокрутки документа.

Parallax — популярная техника в веб-дизайне для добавления динамических эффектов на страницу во время прокрутки. Теперь он доступен в UIkit 3. Супергибкий компонент Parallax позволяет анимировать практически каждый атрибут CSS на основе позиции прокрутки на вашем сайте. Он дает вашему веб-сайту тонкий трехмерный эффект, создающий иллюзию глубины и позволяющий выделить необходимые элементы.

Смотреть все примеры работы Параллакса

Использование

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

<div uk-parallax="bgy: -200">...</div>

  • Заголовок

  • <div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>

</div>

Свойства анмиаций

Вы можете использовать явное имя свойства CSS (например, width или scale) и ряд коротких и специальных свойств (например, bgy для background-position-y).

Опция Описание
x Анимировать translateX в пикселях или процентах.
y Анимировать translateY в пикселях или процентах.
bgy Анимировать фоновое изображение по оси Y.
bgx Анимировать фоновое изображение по оси X.
rotate Анимировать вращение по часовой стрелке в градусах.
scale Анимация масштабирования
color Анимация цвета (Содержит начальное и конечное значение).
background-color Анимация фонового цвета (содержит начальное и конечное значение).
border-color Анимировать цвет рамки (содержит начальное и конечное значение).
opacity Анимировать прозрачность.
blur Анимировать фильтр размытие.
hue Анимировать фильтр вращения оттенка.
grayscale Анимировать фильтр в градациях серого.
invert Анимировать фильтр инверсии.
saturate Анимировать фильтр насыщенности.
sepia Анимировать фильтр сепии.

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

Начальное и конечное значения

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

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

<div uk-parallax="opacity: 0,1">...</div>

  • Заголовок

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h1 uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; viewport: 0.5;">Headline</h1>
        <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; viewport: 0.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

Несколько шагов

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

<div uk-parallax="x: 0,50,150">...</div>

  • Заголовок

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h1 uk-parallax="opacity: 0,1,1; y: -100,0,0; x: 100,100,0; scale: 2,1,1; viewport: 0.5;">Headline</h1>
        <p uk-parallax="opacity: 0,1,1; y: 100,0,0; x: -100,-100,0; scale: 0.5,1,1; viewport: 0.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

Позиции области просмотра

Используя опцию viewport, вы можете настроить продолжительность анимации. Значение определяет, как далеко внутри области просмотра прокручивается целевой элемент до завершения анимации. Со значением 1 или false анимация длится до тех пор, пока элемент находится в области просмотра (поведение по умолчанию).Установка его в значения на 0.5, например, анимирует свойство до тех пор, пока позиция прокрутки не достигнет середины целевого элемента

<div uk-parallax="viewport: 0.5">...</div>

  • Заголовок

  • <div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.5">Headline</h1>

</div>

Вложенность

Различные анимации параллакса могут быть легко вложены.

<div uk-parallax="bgx: -50">
    <div uk-parallax="x: -100, 100">...</div>
</div>

  • Заголовок

  • <div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="y: 100,0">Headline</h1>

</div>

Направление

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

<div id="target">
    <div uk-parallax="target: #target">...</div>
</div>

  • Заголовок

  • <div id="test-target" class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; y: 100,0">Headline</h1>

</div>

Смягчение

Чтобы настроить замедление анимации, добавьте опцию easing. Более низкие значения вызовут более быстрый переход в начале, более высокие значения вызовут более быстрый переход в конце анимации..

  • 0
    0.5
    0.6
    0.8
    1
    2
    4
  • <div id="test-easing" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');">
     <div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0">0</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.5">0.5</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.6">0.6</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.8">0.8</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 1">1</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 2">2</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 4;">4</div></div>
    </div>
</div>

Цвета

Вы также можете переходить с одного цвета на другой, например, для границ, фона или цвета текста. Определите цвета, используя модель rgb(), css-цвета или HEX.

<div uk-parallax="border-color: #00f,#f00">...</div>

  • Headline

  • <div id="test-color" class="test-color uk-height-large uk-overflow-hidden uk-flex uk-flex-top" uk-parallax="background-color: yellow,white; border-color: #00f,#f00; viewport: 0.5" style="border: 10px solid #000;">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; color: #0f0; viewport: 0.5">Headline</h1>

</div>

SVG штрихи

Компонент Parallax можно использовать для анимации SVG. Эффект выглядит так, словно штрихи SVG рисуют на ваших глазах. Изображение SVG должно быть введено в разметку как инлайновый SVG. Этого можно добиться вручную или с помощью компонента SVG. Поскольку компонент SVG внедряет SVG после элемента изображения, атрибут uk-parallax должен быть добавлен к родительскому элементу.

<div uk-parallax="stroke: 45">
    <img src="" alt="" uk-svg>
</div>
  • <div class="uk-text-center" uk-parallax="stroke: 100%; viewport: 0.7">
    <img src="/images/strokes.svg" alt="" uk-svg>
    </div>

Внимание Рекомендуется использовать %, так как в этом случае вам не нужно знать точную длину штрихов.

SVG изображения

Компонент Parallax можно применять к элементам встроенных изображений SVG, таким как прямоугольник, круг и контур.

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="10" height="10" uk-parallax="rotate: 360"/>
</svg>

Фильтры

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

<div uk-parallax="blur: 10; sepia: 100;">...</div>

  • Заголовок

  • <div id="test-filter" class="uk-height-large uk-background-cover uk-overflow-hidden uk-flex uk-flex-top" uk-parallax="sepia: 100;" style="background-image: url('images/light.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-filter; blur: 0,10;">Headline</h1>

</div>

Адаптивность

Можно отключить параллакс для устройств различной ширины, применяя опцию media к атрибуту и добавив соответствующую ширину области просмотра. Добавьте число в пикселях, например, media: 640 или брекпоинт, например, media: @m. Параллакс будет работать с указанной ширины области просмотра и выше, но не ниже.

<div uk-parallax="media: @m"></div>

Опции компонента

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

Опция Значение По умолчанию Описание
easing Number 1 Ослабление анимации при прокрутке
target String false Ссылка элемент и указание продолжительности анимации.
viewport Number 1 Диапазон анимации в зависимости от области просмотра.
media Integer, String false Условие для активности компонента - ширина как целое число (например, 640) или контрольная точка (например, @s, @m, @l, @xl), а также любой валидный медиа-запрос (например, (min-width: 900px)).

JavaScript

Компоненты JavaScript.

Инициализация

UIkit.parallax(element, options);

Смотреть все примеры работы Параллакса