From the course: CSS: Scrolling and Parallax

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Configuring your scenes

Configuring your scenes - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Start my 1-month free trial Buy for my team

Configuring your scenes

“

- [Instructor] Let's dig into how you can configure how your scenes work. Now we already use the triggerElement in the last video, it lets you identify the DOM element that triggers the animation. If you don't specify one, the animation will be set to start at the beginning of the page. You may have also noticed that triggers are position by default on the center of the viewport, you can change that with something called triggerHook. Now this can be a number between zero and one, zero meaning at the top of the page and one meaning at the end. The default is the center which is 0.5 and you can use the keywords onEnter, onCenter which would be the middle one or onLeave, which would be the same as one. Now you can also use something called offset if you want to add a little bit of spacing around the triggerHooks. So if you wanted at the top of the screen you can set the triggerHook to zero but then if you want 30 pixels…

Contents