jimba tamang: 5 reasons why “parallax websites” are awesome and how to create them
TRANSCRIPT
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
Why “Parallax Websites” are awesome?
krystalrae.com #2 – Engagement!
#3Tell your Story
In Less then a minute.
Why “Parallax Websites” are awesome?
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!
Why “Parallax Websites” are awesome?
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.