Параллакс v-parallax

Компонент v-parallax используется для создания эффектов параллакса на веб-страницах, когда фоновое изображение перемещается медленнее относительно переднего плана при прокрутке. Этот приём придаёт интерфейсу глубину и динамичность без использования сложного JavaScript.

<v-parallax
  src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
  height="500"
>
  <v-layout
    column
    align-center
    justify-center
    class="white--text"
  >
    <h1 class="display-2 font-weight-bold">Пример параллакса</h1>
    <h4>Используем Vuetify для создания эффекта глубины</h4>
  </v-layout>
</v-parallax>

Ключевые параметры:

  • src – URL изображения для фона.
  • height – высота параллакса в пикселях.
  • alt – альтернативный текст для изображения (важно для SEO и доступности).
  • lazy-src – облегчённый вариант изображения для предварительной загрузки, что улучшает производительность.
  • disabled – если установлен, параллакс отключается и изображение ведёт себя как обычное фоновое.

Структура и вложенные элементы

v-parallax может содержать любые элементы Vuetify или стандартные HTML-элементы. Для центрирования контента чаще используют v-layout с директивами align-center и justify-center.

Пример с кнопкой и текстом:

<v-parallax
  src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
  height="600"
>
  <v-layout
    column
    align-center
    justify-center
    class="white--text"
  >
    <h2 class="headline mb-3">Добро пожаловать</h2>
    <v-btn color="primary" dark large>Начать</v-btn>
  </v-layout>
</v-parallax>

Вложенный контент остаётся на переднем плане, а изображение сдвигается медленнее при прокрутке, создавая визуальный эффект движения слоёв.

Использование нескольких параллаксов на одной странице

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

<v-parallax src="image1.jpg" height="400"></v-parallax>
<section class="py-12">
  <v-container>
    <h3>Секция с текстом</h3>
    <p>Описание продукта или услуги.</p>
  </v-container>
</section>
<v-parallax src="image2.jpg" height="500"></v-parallax>

Рекомендации по производительности:

  • Ограничивать количество параллаксов на странице.
  • Использовать lazy-src для крупных изображений.
  • Подбирать изображения оптимального разрешения.

Настройка скорости параллакса

Vuetify автоматически задаёт стандартную скорость движения фона. Для более тонкой настройки можно использовать CSS-трансформации через классы или стилевые директивы.

<v-parallax
  src="image.jpg"
  height="500"
  class="custom-parallax"
></v-parallax>

<style>
.custom-parallax .v-parallax__image-container {
  transform: translate3d(0, 0, 0) scale(1.1);
}
</style>

Это позволяет увеличивать или уменьшать эффект движения изображения относительно прокрутки.

Комбинирование с другими компонентами Vuetify

Параллакс отлично сочетается с:

  • v-toolbar – создаёт эффект фиксированной навигации поверх параллакса.
  • v-card – карточки на переднем плане создают контраст с движущимся фоном.
  • v-container и v-layout – управляют позиционированием текста и элементов.

Пример:

<v-parallax src="image3.jpg" height="550">
  <v-container fill-height>
    <v-layout
      align-center
      justify-center
      column
    >
      <v-card class="pa-5" outlined>
        <h3>Текст на карточке</h3>
        <p>Контент поверх параллакса.</p>
      </v-card>
    </v-layout>
  </v-container>
</v-parallax>

Адаптивность и мобильные устройства

На мобильных устройствах эффект параллакса может негативно сказываться на производительности. Vuetify позволяет отключать параллакс через проп disabled или использовать упрощённые версии изображений.

<v-parallax
  src="image.jpg"
  height="400"
  :disabled="$vuetify.breakpoint.smAndDown"
></v-parallax>

Здесь параллакс отключается на маленьких экранах, сохраняя плавность работы приложения.

Заключение по использованию v-parallax

v-parallax — мощный инструмент для визуальных эффектов, который интегрируется с системой сеток и компонентов Vuetify. Основное внимание уделяется:

  • Выбору подходящих изображений и их размерам.
  • Оптимизации через lazy-src.
  • Центрированию контента и позиционированию элементов на переднем плане.
  • Адаптивной настройке для разных устройств.

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

Оглавление