Lessons: 26Length: 3.5 hours
- Overview
- Transcript
2.6 Parallax Backgrounds
With the parallax.js library, implementing the parallax scrolling effect is a question of adding the correct attributes to your HTML objects. In this lesson, I will demonstrate just how easy it is.
1.Introduction
1.1Introduction00:42
1.1
Introduction
00:42
1.2Frameworks for the Win06:05
1.2
Frameworks for the Win
06:05
2.Easy Parallax Scrolling With Parallax.js
2.1What Is Parallax Scrolling?04:56
2.1
What Is Parallax Scrolling?
04:56
2.2Setting Up the Site06:47
2.2
Setting Up the Site
06:47
2.3Bootstrap Basics08:03
2.3
Bootstrap Basics
08:03
2.4Structuring the Header12:49
2.4
Structuring the Header
12:49
2.5Structuring the Body11:21
2.5
Structuring the Body
11:21
2.6Parallax Backgrounds08:27
2.6
Parallax Backgrounds
08:27
3.Scroll Events With Wow.js
3.1Downloading Wow.js05:03
3.1
Downloading Wow.js
05:03
3.2The HTML09:27
3.2
The HTML
09:27
3.3Simple Animations06:39
3.3
Simple Animations
06:39
3.4More Animations13:06
3.4
More Animations
13:06
4.Scrolling With Skrollr
4.1Downloading Skrollr05:31
4.1
Downloading Skrollr
05:31
4.2Data Attributes14:07
4.2
Data Attributes
14:07
4.3Filling Out the Content11:25
4.3
Filling Out the Content
11:25
4.4Styling the Slides04:38
4.4
Styling the Slides
04:38
4.5Slide and Fade10:05
4.5
Slide and Fade
10:05
4.6Narrow the Margins11:04
4.6
Narrow the Margins
11:04
4.7Nested Animations07:26
4.7
Nested Animations
07:26
4.8Animating the Shuttle05:38
4.8
Animating the Shuttle
05:38
5.Bonus Content: Creating Scrollable Navigation
5.1jQuery Click Events05:53
5.1
jQuery Click Events
05:53
5.2Animated Scrolling With jQuery05:52
5.2
Animated Scrolling With jQuery
05:52
5.3Setting Up Your Scroll Positions13:49
5.3
Setting Up Your Scroll Positions
13:49
5.4Detecting the Current Position11:00
5.4
Detecting the Current Position
11:00
5.5Manual Scrolling Issues06:15
5.5
Manual Scrolling Issues
06:15
6.Conclusion
6.1Conclusion01:39
6.1
Conclusion
01:39
