From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Animating with Scrollspy - Bootstrap Tutorial
From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Animating with Scrollspy
- [Instructor] It's time to finish up our project and the last thing I wanna do is show you how you can control some animations based on a scroll, so we have this section here called Media and what I wanna do is hide these items or hide these little animations right here and then slide them into view but only when I scroll into this Media section because most of the time what would happen is if we just simply animate that and we load up the page, it's going to animate in the background and we're not gonna be able to see it, so we need to do it only when we scroll past a certain element and we wanna do that of course when we get to this Media section now. In our script.js file, we already have a way of doing that by tracking the scrolling based on a specific target, so we've used this code right here to detect when we are not in the page-hero section and then we can add and remove a class, so we can do something similar there and let's go ahead and add that. We'll do it inside this…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.