Demos


Fulscreen + Vertically Centered Text

The top offset is 150px.

Fulscreen + Parallax Element

Has Overlay Background

Has class "uix-height--30"

Parallax only works on inline image 1920 x 600

Small Image 1920 x 309

Has Overlay Background

Skew Parallax Effect

Element Parallax

Background without parallax

API


Parallax

import Parallax from '@uixkit.react/components/Parallax/index.tsx';
PropertyTypeDefaultDescription
parallaxElementsbooleanfalsePure parallax scrolling effect without other embedded HTML elements
parallaxElementsTransitionstringall 0.4s cubic-bezier(0, 0, 0.34, 0.96) 0sTransition of parallax when parallaxElements is true
imgstring-Background image URL
heightClassstring | uix-height--100 | uix-height--90 | uix-height--80 | uix-height--70 | uix-height--60 | uix-height--50 | uix-height--40 | uix-height--30 | uix-height--20 | uix-height--10-Class name of default height
fullyVisiblebooleanfalseWhether to display all pictures, including the edges
offsetTopnumber0Offset top of background
overlayboolean | stringfalseBackground overlay. You can set it to the color value, for example rgba(0,0,0,.6)
skewnumber0Skew of background
speednumber0Speed of parallax animation