Parallax

Background that scrolls slower

A background image that moves slower than the page as you scroll, behind a heading or a quote. It is decoration: nothing may depend on it, and it holds still under reduced motion.

Basic

scroll

<script setup lang="ts">
import { BlessParallax, BlessText } from "blessing-ui";
import { shots } from "./_data";
</script>

<template>
  <BlessParallax :src="shots[5].src" height="240px" :speed="0.4">
    <BlessText size="xl" weight="thin" style="text-shadow: 0 2px 12px rgb(0 0 0 / 0.5)"
      >scroll</BlessText
    >
  </BlessParallax>
</template>

• speed (0 fixed – 1 with the page); height of the band. alt stays empty unless the image says something the text doesn't.

Usage

import { BlessParallax } from "blessing-ui";

API

Props

Name	Type	Default	Description
src	string	—
height	string	"320px"
speed	number	0.5	0 = fixed, 1 = scrolls with page
alt	string	""

Slots

Name	Scope	Description
media	—
default	—