Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them

5 reasons why“Parallax Websites”

are awesomeand

how to create them?

Parallax Scroling Website

www.graphicnovel-hybrid4.peugeot.com

My name isJimba Tamang

&I am a,

programmatic Designer.WP theme Developer.

Table of Contents

Chapter : 1What is Parallax Web Design.

5 reasons why“Parallax Scrolling Websites” are awesome.

Chapter : 2Techniques behind the scene.

Things to Remember.

~ Your questions ~

54

3

2

1

Why “Parallax Websites” are awesome?

#1Product Demonstration

www.eone-time.com #1 – Product Demonstration

#2Engagement


krystalrae.com #2 – Engagement!

#3Tell your Story

In Less then a minute.


everylastdrop.co.uk #3 – Tell your Story

Why Parallax Web Design?

#4Call To Action

BUY NOW CONTACT US

READ MORE CLICK ME

www.zensorium.com/tinke/ #3 – CTA

#5Make your website

FUN & SPECIAL!


Chapter 2

Parallax Techniques

Parallax Library

Skrollr.jsSteallar.jsParallax.js

+Many more…

https://github.com/Prinzhorn/skrollr

Download Skrollr plugin from github

While using Skrollr.js

HTMLCSS

JS (jQuery)

<div id=“box-1”data-abc=“background-color : rgb(255,0,0);”data-xyz=“background-color : rgb(0,255,0)”>

</div>

While using Skrollr.js

Methods

AbsoluteRelative

Absolute

800px1000px Box ‘A’

-200pxdata-0

data-200

Code Snap of Absolute Method

<div id=“box-1”data-0=“background-color : rgb(0,255,0)” data-200=“background-color : rgb(0,0,255) ”>

Box ‘A’

</div>

Relative

Box ‘A’

Box ‘A’

Box ‘A’

data-bottom

data-bottom=“background : rgb(255,0,0);”

data-center

data-center=“background : rgb(0,255,0);”

data-top

data-top=“background : rgb(0,0,255);”

Code Snap of Relative Method

<div id=“box-1” data-bottom=“background-color : rgb(255,0,0);”data-center=“background-color : rgb(0,255,0);”data-top=“background-color : rgb(0,0,255);” >

Box ‘A’

</div>

Things to Remember

Weight of the site(Performance of website)

Does it hurt SEO?

Thanks!

Twitter: @jimbatamangwww.jimba.com.np

Credits:http://graphicnovel-hybrid4.peugeot.com

http://www.eone-time.com/http://flashvhtml.com/

http://www.zensorium.com/tinke/http://krystalrae.com/

Questions?

I will answer you.