Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
5 reasons why
“Parallax Websites”
are awesome
and
how to create them?
Parallax Scroling Website
www.graphicnovel-hybrid4.peugeot.com
My name is
Jimba Tamang
&
I am a,
programmatic Designer.
WP theme Developer.
Table of Contents
Chapter : 1
What is Parallax Web Design.
5 reasons why
“Parallax Scrolling Websites” are awesome.

Chapt...
4

5

3

1
2
Why “Parallax Websites” are
awesome?

#1
Product Demonstration
www.eone-time.com

#1 – Product Demonstration
Why “Parallax Websites” are
awesome?

#2
Engagement
krystalrae.com

#2 – Engagement!
Why “Parallax Websites” are
awesome?

#3
Tell your Story
In Less then a minute.
everylastdrop.co.uk

#3 – Tell your Story
Why Parallax Web Design?
BUY NOW

CONTACT US

#4
Call To Action
READ MORE

CLICK ME
www.zensorium.com/tinke/

#3 – CTA
Why “Parallax Websites” are
awesome?

#5
Make your website
FUN & SPECIAL!
Chapter 2
Parallax Techniques
Parallax Library
Skrollr.js
Steallar.js
Parallax.js
+
Many more…
Download Skrollrplugin from github

https://github.com/Prinzhorn/skrollr
While using Skrollr.js

HTML
CSS
JS (jQuery)
While using Skrollr.js
<div id=“box-1”
data-abc=“background-color :rgb(255,0,0);”
data-xyz=“background-color :rgb(0,255,0)...
Methods

Absolute
Relative
Absolute
data-200

-200px

data-0
1000px

Box ‘A’

800px
Code Snap of Absolute Method
<div id=“box-1”
data-0=“background-color :rgb(0,255,0)” data200=“background-color :rgb(0,0,25...
Relative
Box ‘A’

data-top

Box ‘A’

data-center

Box ‘A’

data-bottom

data-bottom=“background : rgb(255,0,0);”
data-cent...
Code Snap of Relative Method
<div id=“box-1”
data-bottom=“background-color : rgb(255,0,0);”
data-center=“background-color ...
Things to Remember
Weight of the site
(Performance of website)
Does it hurt SEO?
Thanks!
Twitter: @jimbatamang
www.jimba.com.np
Credits:
http://graphicnovel-hybrid4.peugeot.com
http://www.eone-time.com/
...
Questions?
I will answer you.
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Jimba Tamang: 5 reasons why “Parallax Websites” are awesome and how to create them
Prochain SlideShare
Chargement dans…5
×

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

1 357 vues

Publié le

Publié dans : Design, Technologie
  • Soyez le premier à commenter

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

  1. 1. 5 reasons why “Parallax Websites” are awesome and how to create them?
  2. 2. Parallax Scroling Website
  3. 3. www.graphicnovel-hybrid4.peugeot.com
  4. 4. My name is Jimba Tamang & I am a, programmatic Designer. WP theme Developer.
  5. 5. Table of Contents Chapter : 1 What is Parallax Web Design. 5 reasons why “Parallax Scrolling Websites” are awesome. Chapter : 2 Techniques behind the scene. Things to Remember. ~ Your questions ~
  6. 6. 4 5 3 1 2
  7. 7. Why “Parallax Websites” are awesome? #1 Product Demonstration
  8. 8. www.eone-time.com #1 – Product Demonstration
  9. 9. Why “Parallax Websites” are awesome? #2 Engagement
  10. 10. krystalrae.com #2 – Engagement!
  11. 11. Why “Parallax Websites” are awesome? #3 Tell your Story In Less then a minute.
  12. 12. everylastdrop.co.uk #3 – Tell your Story
  13. 13. Why Parallax Web Design? BUY NOW CONTACT US #4 Call To Action READ MORE CLICK ME
  14. 14. www.zensorium.com/tinke/ #3 – CTA
  15. 15. Why “Parallax Websites” are awesome? #5 Make your website FUN & SPECIAL!
  16. 16. Chapter 2
  17. 17. Parallax Techniques Parallax Library Skrollr.js Steallar.js Parallax.js + Many more…
  18. 18. Download Skrollrplugin from github https://github.com/Prinzhorn/skrollr
  19. 19. While using Skrollr.js HTML CSS JS (jQuery)
  20. 20. While using Skrollr.js <div id=“box-1” data-abc=“background-color :rgb(255,0,0);” data-xyz=“background-color :rgb(0,255,0)”> </div>
  21. 21. Methods Absolute Relative
  22. 22. Absolute data-200 -200px data-0 1000px Box ‘A’ 800px
  23. 23. Code Snap of Absolute Method <div id=“box-1” data-0=“background-color :rgb(0,255,0)” data200=“background-color :rgb(0,0,255)”> Box ‘A’ </div>
  24. 24. Relative Box ‘A’ data-top Box ‘A’ data-center Box ‘A’ data-bottom data-bottom=“background : rgb(255,0,0);” data-center=“background : rgb(0,255,0);” data-top=“background rgb(0,0,255);”
  25. 25. 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>
  26. 26. Things to Remember Weight of the site (Performance of website) Does it hurt SEO?
  27. 27. Thanks! Twitter: @jimbatamang www.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/
  28. 28. Questions? I will answer you.

×