Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:26Length:3.5 hours

Next lesson playing in 5 seconds

Cancel

Free Preview: Scroll Events Made Easy

Introduction

00:42
  • Overview
  • Transcript

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.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.

1.2 Frameworks for the Win

Hello, and welcome back to Scroll Effects Made Easy. One very important thing that a lot of new designers and new developers don't realize is that you don't have to write all of your own code. Sure you get a sense of pride when you're able to code something yourself and make it work, but you don't always have time to code something for yourself. And one of the most liberating moments for me as a designer and a developer was when I finally decided to allow myself to use other people's code in my work. Another reason it can be helpful to use other people's code is, yeah, I can save time, but it can also help you to create really amazing things that you might not have the skill level yet to produce on your own. And in this course, we're gonna be talking specifically about different scroll effects, such as parallax scrolling and a few other neat scrolling tricks that we're gonna see as we move forward. And, the great thing about this course, is you don't really have to know any JavaScript at all in order to achieve these effects that we're gonna be talking about. Now, we're gonna be using JavaScript libraries to create or achieve these effects, but we're not gonna be doing much JavaScript coding ourselves. We're gonna allow these external libraries to do the work for us. And specifically, we're gonna be taking a look at three different libraries in this course and I wanna walk you through them very quickly. The first one is called parallax JS. Now, be careful if you go on Google and search for Parallax JS because there are a couple of different libraries out there that have been created, that are called Parallax JS. So, make sure you go to the website that we're showing here, pixelcog.github.io/parallax.js. Also, include these URLs in the course notes. But this particular parallax effect or this parallax in JavaScript file allows us to very easily create a parallax background without creating any of our JavaScript whatsoever. So, we can see as we scroll down, we can see this demo site. And, what a parallax effect is is simply one thing moving at a different speed than another thing. So we see our foreground here, or all of our content as we scroll, we see it's moving at a different speed than the background image. And, that just gives it a nice effect, it's just a nice little extra touch on the site. And as we scroll down, we'll see a couple more images down here. And, you get the basic idea. So, we can actually achieve this effect without creating any of our own JavaScript. All we have to do is pull in the JavaScript file and then include it in our page, and we'll see as we move forward in this course, that it really just involves a few tweaks to your HTML in order to get this to work right. Another library we're going to be looking at is called wow.js, as you can see this isn't a very pretty website at all, but it is the homepage for wow.js, which allows us to do some really cool animations whenever we scroll. This particular library is designed to create animations that are triggered whenever you scroll a certain item onto the stage or into the browser window. So,as we scroll down, you'll see that right as the browser window, or right as our scrolling reaches a certain point, certain things animate onto the stage. And we can keep scrolling down to see this happening. And, it's a really cool effect. Now, obviously, this is not the most beautiful website in the world, but hopefully you can see the potential with a simple effect like this, and this library will allow us to very, very easily achieve these effects. Again, we won't have to write any JavaScript to do this, the wow.js library takes care of that for us. So, that's the second library we're gonna be using, and the third one is called skrollr. Now, the skrollr library gives us a little bit more flexibility. And, we can actually use a bunch of our own JavaScript within the skrollr library if we want to. But again, we're gonna keep this one really, really simple. We're gonna do everything in HTML and CSS. And, you're gonna see that we can create some really cool effects again without using our own JavaScript. So, if we grab our scroll bar here and start scrolling down, we can see all kinds of crazy effects happening as we scroll. So, not only do we see some parallax scrolling with the dots in the background that are all moving at different speeds, but we're also seeing some items spin onto the stage and animate up. And, as we keep scrolling, we see things animating in from the right. We see the background changing. We see all of these items bouncing up and down using different easing equations, and it's a really cool library, it allows us to do some things very, very easily. So, that's the third library we're going to be using. But again, I just want to encourage you, not just for the sake of this particular course, but also whenever you're creating a website and you need to achieve a certain effect but you don't know how to do it. Remember that it's okay to use other people's code as long as you have the rights to use it. Now, all of these libraries that we're gonna be talking about in this course are free to use. They're open-source. You can use them however you want to. But keep in mind that there are libraries out there that you might have to pay for in order to use them. But again, it's okay to use other people's code. It doesn't mean you're a bad developer or a bad designer. It means that you're efficient. It means that you don't have to do everything yourself and that should be very liberating for you. So again, as we move forward, we're gonna be talking about these three JavaScript libraries that allow us to create some really nice effects without doing any coding of our own, or at least very, very little coding of our own. As we get towards the end of the course, we are gonna do a little bit of our own JavaScript coding. But for the most part, this is gonna be a really, really easy to follow series and these effects are going to be very easy to accomplish. So, thank you for watching, and let's get started.