Как использовать компонент Vuetify Parallax

Параллаксная прокрутка — это визуальный эффект, используемый на веб-страницах, где фоновое содержимое перемещается медленнее, чем содержимое переднего плана. В этой статье мы узнаем, как использовать компонент параллакса от Vuetify для создания эффекта прокрутки параллакса с фоновыми изображениями.

Компонент Vuetify Parallax (v-parallax)

Мы используем v-parallax для создания компонента параллакса. У него есть реквизит src для указания URL-адреса изображения, которое будет использоваться в качестве фона.

<template>
  <v-app>
    <div style="height: 1200px">
      <v-parallax
        src="https://picsum.photos/1920/1080?random"
      >
      </v-parallax>
    </div>
  </v-app>
</template>

Параллакс-контент

Мы можем включить контент в параллакс, сделав его дочерним элементом v-parallax. Это полезно для создания образа героя. Например:

<template>
  <v-app>
    <div style="height: 1200px">
      <v-parallax
        src="https://picsum.photos/1920/1080?random"
      >
        <div class="white black--text pa-4">
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quasi repellendus optio doloremque illo
          fugiat iure possimus dolorem aspernatur, officiis
          laudantium iste debitis officia asperiores
          voluptas, architecto molestias minima velit
          nesciunt?
        </div>
      </v-parallax>
    </div>
  </v-app>
</template>

Высота параллакса

Мы можем настроить высоту компонента параллакса с помощью реквизита height. Например:

<template>
  <v-app>
    <div style="height: 1200px">
      <v-parallax
        src="https://picsum.photos/1920/1080?random"
        height="400"
      >
        <div class="white black--text pa-4">
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quasi repellendus optio doloremque illo
          fugiat iure possimus dolorem aspernatur, officiis
          laudantium iste debitis officia asperiores
          voluptas, architecto molestias minima velit
          nesciunt?
        </div>
      </v-parallax>
    </div>
  </v-app>
</template>

Обновлено на: codingbeautydev.com

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Получите бесплатную копию здесь.