Scroll Events Made Easy

by Craig Campbell23 Feb 2016

Lessons:26Length:3.5 hours

Web Design Scroll Events JavaScript Animation

Turn Autoplay Off

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

1.1 Introduction

Welcome to Scroll Events Made Easy. In this course you will learn how to use wow.js, parallax.js, and skrollr.js to create your own browser scrolling effects, without having to get your hands dirty with complicated JavaScript.

1.Introduction
2 lessons, 06:47

Free Lesson

1.1
Introduction
00:42

Free Lesson

1.2
Frameworks for the Win
06:05

2.Easy Parallax Scrolling With Parallax.js
6 lessons, 52:23

2.1
What Is Parallax Scrolling?
04:56

2.2
Setting Up the Site
06:47

2.3
Bootstrap Basics
08:03

2.4
Structuring the Header
12:49

2.5
Structuring the Body
11:21

2.6
Parallax Backgrounds
08:27

3.Scroll Events With Wow.js
4 lessons, 34:15

3.1
Downloading Wow.js
05:03

3.2
The HTML
09:27

3.3
Simple Animations
06:39

3.4
More Animations
13:06

4.Scrolling With Skrollr
8 lessons, 1:09:54

4.1
Downloading Skrollr
05:31

4.2
Data Attributes
14:07

4.3
Filling Out the Content
11:25

4.4
Styling the Slides
04:38

4.5
Slide and Fade
10:05

4.6
Narrow the Margins
11:04

4.7
Nested Animations
07:26

4.8
Animating the Shuttle
05:38

5.Bonus Content: Creating Scrollable Navigation
5 lessons, 42:49

5.1
jQuery Click Events
05:53

5.2
Animated Scrolling With jQuery
05:52

5.3
Setting Up Your Scroll Positions
13:49

5.4
Detecting the Current Position
11:00

5.5
Manual Scrolling Issues
06:15

6.Conclusion
1 lesson, 01:39

6.1
Conclusion
01:39

1.1 Introduction

Hello, and welcome to Scroll Events Made Easy. My name is Craig Campbell, and I will be your instructor for this course. In this course, we're going to take a look at a few JavaScript frameworks that allow us to create animations and events related to scrolling up and down in the browser. And we're gonna do this without having to type any JavaScript code of our own. And then if you're brave towards the end of the course we are going to jump into a little bit of JavaScript as we create some navigation buttons that will take us back and forth, and automatically animate the scrolling of the webpage. So thank you for watching and in the next lesson we'll get started.

Back to the top