Parallax scrolling technique

In this website project, I’d like to use parallax scrolling technique, which gives users a 3-D like experience when navigating the site.

Here’s an example:

It does not merely use CSS, but javascript as well. We need to connect to jQuery, which is “a multi-browser (cf. cross-browser) JavaScript library designed to simplify the client-side scripting of HTML” according to Wikipedia.

For instance, in a simple two-photo site (source), the html file will be written in this way:

<!doctype html>
<html class=”no-js” lang=”en”>
<meta charset=”utf-8″>
<!– CSS Code –>
<link rel=”stylesheet” href=”css/style.css”>
<link rel=”stylesheet” href=”css/reset.css”>
<!– JS Code –>
<script src=””></script&gt;
<script src=”js/script.js”></script>

Additionally, we need to have <section id=”home” data-speed=”10″ data-type=”background”> in <body> part.

And then, in the reset.css file, we need to set lots of stuff “block” in order to create the feeling of 3-D.

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;

Javascript allows auto position adjusting, and to be honest, I’m still learning, and IT IS HARD!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s