Join Ray Villalobos for an in-depth discussion in this video Pinning your navigation and smoothing scrolling, part of Building a Responsive Single-Page Design with Sass.
The last video, I showed you how to make the first of your Tweens with Scroll Magic…as well as Tween Max.…Now, that presents a little bit of a problem.…If we scroll this down and then click on this link right here to go all the way to…the events, we know that it takes us all the way to the bottom of the screen.…Now, it's a little bit hard to navigate from here, because our navigation is…way at the very top, so I'd have to scroll all the way past those, all the way to…the very top and then find my navigation to click on one of these elements again.…
That's not very convenient.…So let's go ahead and fix that by using a technique called pinning.…Pinning allows you to take an element and pin it to a position in the screen and…it's actually quite easy to do.…So, I'm going to set it up right after my controller.…We of course always have to set up the controller first and…after we do that, we can do some of the magic.…So right after Scroll Magic, we're going to create another variable called…pin and then, we're going to set up a new scroll screen.…
- 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 Advanced
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.