Creates a depth of illusion where the background moves at a - - PowerPoint PPT Presentation

 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