Join Ray Villalobos for an in-depth discussion in this video Controlling scenes by scrolling, part of Building a Responsive Single-Page Design with Sass.
So far we've been able to create some pretty interesting animations in…our project.…So right now, we have the scroll to a certain position in the Dom,…as well as the animation that happens when we click on this last attractions section.…That's a Tween Animation.…There's another type of animation you can set up that can be…controlled by the scrolling of your mouse.…So we're going to do that in this Rooms section to control the animation of…these articles as you scroll through these area.…
So to do that, we are going to need to set up some more variables.…Our script.js file is getting a little bit busy, so…we're going to add some comment here.…And we'll start off by creating a comment here that says, window height,…and then we will make this one Animated Scrolling.…Highlight navigation over here.…
You can never have too many comments.…This is already set up ScrollMagic.…And this is pin the navigation.…And this is the attractions.…All right, so we're going to set something up right on top of this.…We're going to do it by creating a couple of variables because some of…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Intermediate
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.