The B2B SaaS Marketing Blog

A Simple Parallax Scrolling Tutorial for Everyone

by 

Julie Jancen

Last updated: August 29th, 2014

Are you interested in coding a parallax scrolling website?

I guarantee you’ll be able to code simple parallax scrolling website after you watch this step-by-step tutorial.

I have decided to create this tutorial for junior developers who are still learning front-end development with limited HTML and CSS Knowledge. The goal of this tutorial is to provide step by step instructions for a beginner to code a parallax scrolling website.

In this simple tutorial, you will learn how to:

• Setup your html document file
• Code <div> tags for parallax scrolling
• Apply basic CSS styling on your <div> tags

Pro Tip:

I source out inspiration from the web on a daily basis to to help me grow as a Designer and Developer. I use tools like Treehouse and codrops for tutorials and learning and Design Fridge for fresh inspiration that keep my web design and coding skills at the pro-level. Be insipired by the work of others in our industry, take a walk outdoors, observe human nature and flow. Find your own niche and let it blossom into a signature style. Next time you’re starting a new project, browse the web for a tutorial and force yourself to learn something new!

Not enough parallax awesomeness?

Let me know your feedback in the comments below or hit me up at julie@poweredbysearch.com. If you want to learn more, have a Free 25 minute marketing assessment with us.

Video Transcription

Hi everybody. My name is Julie Jancen and I am the front end developer and designer at Powered By Search. Thanks for tuning into this video. I’m really excited to show you a quick tutorial on how to make your very own one page website. So here’s an example of what we’re going to be building today.

All right. I already have open my Sublime to text editor. I’m going to open a new document and double check, make sure it is HTML. Let’s go ahead and open a doc file and I’m going to title my document watch the cat run.

Now, the first thing we need to do is to create all this different divs. You’ll notice in my example here that I’ve created nine different cats. Nine different cats means that there’s nine different positions of this cat that are behind each div tag, or attached to each div tag, that allow us to show that the cat is in fact running.

I’m going to quickly just type my div tags here. I’m going to put nine. There we go, and then I’m going to copy and paste that one, two, three, four, five times. Nine times five is 45. We have 45 div tags. One, two, three, four, five. All right, so that is the basis of our site.

Now, we need to style our div. Let’s go ahead and open our style tags. So the first thing I need to do is tell my HTML and body that I want you to be 100% the hunt with zero margins. Next thing I need to do is I need to tell the cat, I need to put the image in the cat. Okay. I’m going to get an image that I found online at andrev.com. There is actually nine of these. Each one is Cat 1, Cat, 2, Cat 3 etc.

So the first I want to do is I want to say that there’s a background image here. I’m going to go ahead and paste the first one right there. I want to tell it that it’s going to be 50% of the screen height and I need to say where I want the attachment placed, so I’m going to position it in the center.

I’m going to say I want it fixed in the center, so we call it back by background attachment fixed. The last thing I want to do is say I only want it to repeat itself once. I’m actually going to turn off the background repeat. No repeat. I’d like to go ahead and add each different background element for each cat. So cat 1 isn’t going to have it because it’s going to be attached to cat. But, we do need to tell cat 1 what background color we want.

I’m going to tell this one to be 0066. Now we need to start adding each one of our different cat’s backgrounds. So cat 2, I’ll scroll up here for you, cat 2 is going to be a background image. You know what, I’m going to cheap, I’m going to copy and paste this and I’m going to call it cat 2. Now I’m going to copy the color and I’m going to change the color to something a little different VF00FF. Now you can feel free to make these colors any choice that you’d like.

So I’m going to copy and paste that and call this one number three, and I’m going to change this color to something different. I’m going to go ahead and continue to do that up until we have all nine cats. That’s four, five, six, seven. What we’re mostly doing here is I’m changing two elements on the page at one time, so if your’e also on a Sublime Text To Editor, all you’re going to do is click with your mouse and hold the connect key at the same time.

There we go, one, two, three, four, five, six, seven, eight, nine. So the last thing I need to do is just jump in and change these colors. Then we’re gonna preview our work. Paste. I’m going save that. I’m going to save it to my desktop and I’m going to call it running cat.

Since I’m working with the style tags in line in my HTML file, I’m not going to have an external CSS. Let’s go ahead and open that in our web browser. All right, so here is our new site. I’m going continue to scroll and you can see that everything worked perfectly. We have our running cat. So I hope this is a fun little exercise for you.

I hope you learned a little something about how to build your own one page website. Now, of course you can make these div tags as deep as you want and you can get as creative as you want. As web developers, we are always pushing the creative envelope in our designs.

I just want to summarize and say thank you for taking the time to learn Sublime Text Two as your editor to create your own one page website in less than five minutes, really. So I encourage you all to try this exercise. If you have any questions, please leave them in the comment section below and I’d be happy to answer them or provide any other of the source files if necessary.

Again, this is Julie Jancen, front end developer and designer at Powered By Search. It was great talking to you guys today and have a good one.

Video transcription by Speechpad.com.