Parallax

Basic usage

Rabbit
<CParallax src="/rabbit.jpg">
<div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
    Rabbit
  </div>

</CParallax>
<CParallax src="/rabbit.jpg">
<div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
    Rabbit
  </div>

</CParallax>
svelte
Click fold/expand code

Custom height & speed

Sunset
<CParallax src="/sunset.png" speed={0.5} height="300px">
   <div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
    Sunset
  </div>
</CParallax>
<CParallax src="/sunset.png" speed={0.5} height="300px">
   <div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
    Sunset
  </div>
</CParallax>
svelte
Click fold/expand code

Using video with slots

Cats playing
<CParallax src="/rabbit.jpg" speed={0.2} height="300px">
  <div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
    Cats playing
  </div>
  <video slot="bg" width="100%" height="800" autoplay loop muted>
    <source type="video/mp4" src="/cat.mp4">
  </video>
</CParallax>
<CParallax src="/rabbit.jpg" speed={0.2} height="300px">
  <div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
    Cats playing
  </div>
  <video slot="bg" width="100%" height="800" autoplay loop muted>
    <source type="video/mp4" src="/cat.mp4">
  </video>
</CParallax>
svelte
Click fold/expand code

CParallax Props

  • src
    string
    default: undefined

    The background image

  • height
    string
    default: 400px

    The height of container.

  • speed
    number
    default: 1

    The background scroll speed. Value between 0 and 1

CParallax Events

No data

CParallax Slots

  • bg

    Customize the bg content

  • default

    The normally scrolling content

CParallax Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55