Creates a depth of illusion where the

background moves at a different speed

as the foreground.

jParallax - the layers move at different

pace depending on their dimensions.

Widely used in 2D games 10-20 years

ago.

One of the earliest parallax scrolling

website is introduced by Nike Better

World.

HTML5 / jQuery / Javascripting

HTML5 / CSS

Three js plugins are used:

1. Stellar.js – for the scrolling

2. Waypoints – for the navigation

3. jQuery Easing – for the easing movement

Experiment on:

Easing scrolling movement & navigation.

Minor on the sprite.

<ul class="navigation"> <li data-slide="1">Home</li>

<li data-slide="2">About</li> <li data-slide="3">Gallery</li> <li data-slide="5">Portfolio</li> <li data-slide="4">Contact</li> </ul>

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5"> <div id="content1"> hello & welcome.this is my first time trying to edit a parallax scrolling website by understanding the tutorial and the codes. </div>

</div>

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">

<div class="wrapper"> <img src="images/slide2/blur-ball.png" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt=""> <img src="images/slide2/blur-ball-big.png" data-stellar-ratio="1" data-stellar-vertical-offset="-

102"alt=""> <img src="images/slide2/focus-ball.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">

...

...

...

...

</div> </div>

Using source code to set the value of the

speed of the sprite.

Javascript for the scrolling.

Experiment on:

Sprite

<div class="photograph" data-type="sprite" data-offsetY="2000" data-Xposition="75%" data-speed="2">

</div>

total scroll amount divided by the data speed and then plus the amount of the ideal position.

Using javascript to control the path.

Experiment on:

How to make a path using javascripts.

$.fn.scrollPath("getPath") // Move to 'start' element .moveTo(400, 50, {name: "start"}) // Line to 'description' element .lineTo(400, 800, {name: "description"}) // Arc down and line to 'syntax'

.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true) .lineTo(600, 1600, { callback: function() { highlight($(".settings")); }, name: "syntax" })

// Continue line to 'scrollbar' .lineTo(1750, 1600, { callback: function() { highlight($(".sp-scroll-handle")); }, name: "scrollbar" })

Using CSS to create a path.

Experiment on:

How to make a path using css properties.

<div id="egg"

data-0="top:0%; left:50%;" data-500="top:50%;" data-3000=display:block;" data-4700="left:-30%;"> <img src="images/egg.png" width="205" height="221"> </div>

jQuery navigation ; after you click, an

additional page will scroll in either up

down or left right but the main page

remains fixed.

Experiment on:

Navigation

<div id="frame"> <li> <a href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })"> CLICK HERE

</a> </li> </ul> </div>

Initial Idea

To create a website for an ebook “Jack

and the Beanstalk”.

Parody of Humpty Dumpty

Kak Cang sat on the stall,

Kak Cang had a great fall,

All of its partners,

and all of the garnishing,

Joined Kak Cang to unite as a delicious cuisine.

Storyboard

Landing page

Rough Draft