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: http://boy-coy.com/#contact

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”>
<head>
<meta charset=”utf-8″>
<!– CSS Code –>
<link rel=”stylesheet” href=”css/style.css”>
<link rel=”stylesheet” href=”css/reset.css”>
<!– JS Code –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script&gt;
<script src=”js/script.js”></script>
</head>

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!

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s