FREELessons: 26Length: 3.5 hours
Many beginner web designers shy away from slick effects like parallax scrolling simply because they're afraid of JavaScript. In this lesson, you'll learn how to use three powerful, simple JavaScript frameworks to create your own eye-catching scroll effects without having to type much of your own JavaScript at all.
Do you want to learn the JavaScript you need to be a successful web designer? Check out our course JavaScript for Web Designers.
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
