An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
A Simple Parallax Scrolling Technique
Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it.
In this tutorial, I’ll teach you the simplest parallax scrolling technique you’ve ever came across, so let’s dig in!
Step 1: The Markup
This technique revolves around controlling the speed of background image. So let’s begin with the HTML markup, creating two sections along with the required attributes: "data-type"
and "data-speed"
. Don’t worry; I’ll explain these later.
<section id="home" data-type="background" data-speed="10"> </section> <section id="about" data-type="background" data-speed="10"> </section>
I am using the <section>
tag with the attributes data-type
& data-speed
, which were introduced in HTML5. This makes the HTML markup cleaner and easier to read.
According to the specification for Custom Data Attributes, any attribute that starts with data-
will be treated as a storage area for private data. Additionally, this won’t affect the layout or presentation.
Since all we need to do is control the speed of the background images, we’ll use data-type="background"
and data-speed="10"
as key attributes to specify the necessary parameters.
I know what you’re thinking: you’re worried about IE. Never fear; I have a workaround for that too! We’ll discuss it momentarily.
Next, let’s add the content within the <article>
tag inside each <section>
.
<section id="home" data-type="background" data-speed="10" class="pages"> <article>I am absolute positioned</article> </section> <section id="about" data-type="background" data-speed="10" class="pages"> <article>Simple Parallax Scroll</article> </section>
What we’re attempting to do here is making the <section> background scroll slower than its content, i.e <article>. This will help us create a parallax illusion. Before moving on to the jQuery magic, let’s add the background images in our CSS for each <section>.
#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; } #about { background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px; }
Upon adding backgrounds for both sections, it should look like:
Let’s add some more CSS to style and spice up the page!
#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } #home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; } #about { background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8); } #about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; }
Now it should look like this…