data-ix-parallax
Parallax
Summary
This component allows you to create seamless sections with parallax effects where the section will be covered or uncovered, or move at a different rate from the rest of the page.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The parallax component utilizes three elements to make the interaction work. One wrap with section and trigger element (the section can just hold the actual section element if you want to set this up as a seperate component with a slot.
For convenience its easiest to just copy the structure below and paste it into your project.
Attribute Name
Value
Default
Description
data-ix-parallax=wrap
wrap
boolean
The main element that holds the parallax section.
data-ix-parallax=trigger
wrap
boolean
An element inside the wrap used to help define the start and end points of the gsap timeline.
data-ix-parallax=section
wrap
boolean
The section or div the holds the section which is going to be moved.
03
Options
All options are applied to the data-ix-parallax=wrap element.
Attribute Name
Value
Default
Description
{prefix}-type
uncover / cover / parallax
uncover
This decides what type of parallax interaction to use for this instance.
Uncover: The section will be uncovered by the previous section then scroll normally.
Cover: The section will scroll until it locks in and is covered by the next section.
Parallax: The section will move at a different rate than the rest of the page.
{prefix}-amount
number
50
Used only when the type=parallax. This define how many vh the section will animate from into its normal position.
