The secret Parallax feature of the Slider element
All the slider elements in Breakdance use the SwiperJS library, and the parallax option is enabled.
What does it mean ?
Here is a slider made with the Advanced Slider element :
Put anything you want in a slide.
Put anything you want in a slide.
Put anything you want in a slide.
By using some Attributes, we can add some transition effects.
Here is the same slider, but with some parallax effects applied to the texts and images:
Put anything you want in a slide.
Put anything you want in a slide.
Put anything you want in a slide.
To add this kind of effect, we simply have to select the element inside the Slide, e.g. the heading:
Then in the Advanced panel, we just need to add some Attributes:
The list of attributes available for that feature are :
data-swiper-parallax-x
data-swiper-parallax-y
data-swiper-parallax-scale
data-swiper-parallax-opacity
data-swiper-parallax-duration
You can even combine them, so you can have a scale and opacity effect at the same time.
To learn more about that feature, check the Swiper API documentation : Swiper-api-parallax