Scribd
Upload
56 views5 pages

.Zip: Example1

This document provides instructions for creating a single page parallax effect website using HTML, CSS, and jQuery. It includes downloading example files, explaining the basic structure which uses div layers with different z-index values and positioning to create an illusion of depth. It then describes using jQuery code to trigger a parallax scrolling effect as the user scrolls, by adjusting each layer's position based on scroll distance. The final steps are adding code to handle navigation link clicks to smoothly scroll to sections.

Uploaded by

Claire Asagra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views5 pages

.Zip: Example1

This document provides instructions for creating a single page parallax effect website using HTML, CSS, and jQuery. It includes downloading example files, explaining the basic structure which uses div layers with different z-index values and positioning to create an illusion of depth. It then describes using jQuery code to trigger a parallax scrolling effect as the user scrolls, by adjusting each layer's position based on scroll distance. The final steps are adding code to handle navigation link clicks to smoothly scroll to sections.

Uploaded by

Claire Asagra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

1.

 Download Example1.zip
Unzip the files and then open index.html in any of your preferred browser.

2. Try to scroll down the site or click on the navigation buttons.


As you might have observed, the single page contains four content layers. Each of these layers
moves in different speed to create an illusion of depth.
You will see on the screen shot how its HTML code looks like
3. As mentioned we have four layers, each layer is contained in a DIV element. These layers are
DIV elements with id content, parallax-bg1, parallax-bg2 and parallax-bg3.

Each layer is given a fixed position and an assigned z-index in order for the foreground layer to
appear above the background.
Z-index property as you’ve might already known is the one responsible for specifying the stack
order of elements in an HTML document.
Note: Higher stack order is always in front of an element with lower stack order. Please take note
also that z-index property only works on positioned elements (absolute, relative or fixed)
Elements inside each layer have to be absolutely positioned. Make sure that you position elements
in such a way that they align in a pleasing manner when visitors scroll through the site.
4. Next step is jQuery coding.
To achieve a parallax effect, you need to code using jQuery.
Copy the codes shown on the right inside JavaScript external file.

To explain what these jQuery codes mean...


$(document).ready() method is called when the page has been fully loaded.
Inside the $(document).ready() method, we bind a scroll event on windows object.
Every time the user scrolls,parallaxScroll() is triggered.

Inside the methodparallaxScroll(), variablescrolled gets the current vertical scrollbar position. This
value then is used to set the CSS top property of each later.
The foreground layer (parallax-bg3) is always aligned to the top of the window or document, while
the speed or movement of the background and midground layers are adjusted according to their
depth.
It’s actually up to you to set the movement of the other layers but as much as possible,
layer parallax-bg1 or the layer who has the lowest stack order moves only a little to achieve the
illusion of depth.

5. Type the codes shown on the screenshot inside$(document).ready().


These methods are used to handle click events of the navigation links.
When the user click on the next or arrow down link, the page will scroll to the associated section.

6. Save
your file and check your parallax website.
Now try doing the performance test on your own.

You might also like