Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Oh Snap, All the Parallax

Oh Snap, All the Parallax

Presentation on parallax websites for the Charlotte Front End Dev Meetup. Updated from my Day 2 Presentation at Front End Design from this summer.

E48404164e2c8ea941be28b048ec2865?s=128

David Leininger

August 28, 2013
Tweet

More Decks by David Leininger

Other Decks in Design

Transcript

  1. oh snap! All the Parallax and a little bit of

    ron swanson...
  2. I have social skills dl@knowclassic.com.............. davidleininger................. dleininger.......................... dleinin................................ Find me

    online, I’ talk nerdy t you... My name is David Leininger, but I never really called that.
  3. this is me Ye thi i a ta . Ye

    it’ real.
  4. this is where I work Some rad nerd work here...

  5. TODAY’S AGENDA 1.Disclaimers 2.Just because you can... 3.Parallax: what is

    it? Where does it come form? 4.How the interwebs do Parallax 5.It’s all about value 6.Show and Tell (Stuff I did that make me c l) 7.Examples 8.Live Demo 9.Ron Swanson AKA... What I’m going t talk at you...
  6. DISCLAIMER: I am obnoxious. I am rude. I am a

    little bit sorry about it.
  7. DISCLAIMER: I want to be clear. The statement that I’m

    about to make should be taken with the understanding that above almost everything else in the world: I HATE FLASH.
  8. Ron Swanson I kno what I’m about son.

  9. So what is parallax? Where doe it come from? Parallax

    (par•al•lax) 1. The effect whereby the position or direction of an object appears to differ when viewed from different positions (noun)
  10. So what is parallax? •Old cameras with a viewfinder that

    was straight through and a lens below it causes a Parallax Effect •Cover or close one eye and lose half your vision Where doe it come from?
  11. On the interwebs Come on... Everybody’ doing it Parallax Effect

    (par•al•lax ef•fect) 1. We fake that crap... (noun)
  12. On the interwebs •Fake Parallax •Lazy Load Parallax •Background Parallax

    •Interaction Parallax I made of these name . Deal with it.
  13. Fake parallax The nice part about thi it it’ CSS

    only http://codepen.io/davidleininger/pen/HblqB
  14. .main{ background-color: #ffffff; box-shadow: 0px 0px 60px #000000; -moz-box-shadow: 0px

    0px 60px #000000; -webkit-box-shadow: 0px 0px 60px #000000; -o-box-shadow: 0px 0px 60px #000000; margin-bottom: 300px; padding: 25px 25%; position: relative; z-index: 5; } .hidden-footer{ background: url(http://heyyoulookatthis.com/hosted-images/vans.jpg); background-size: cover; height: 300px; width: 100%; position: fixed; bottom: 0; z-index: 0; } http://codepen.io/davidleininger/pen/HblqB
  15. Lazy Load Parallax Sti para ax, but not a “fun”

    fo the use . http://strumapp.com/
  16. Background Parallax Oh snap , you site ha a para

    ax heade http://codepen.io/davidleininger/pen/dqabm
  17. $(document).ready(function() { /* PARALLAX BG COVER */ $('.banner[data-type="background"]').each(function(){ var $parallax

    = $(this); // assigning the object $(window).scroll(function() { var yPos = -($(window).scrollTop() / $parallax.data('speed')); // Put together our final background position var coords = '50% '+ (50 + yPos) + '%'; // Move the background $parallax.css({"background-position": coords}); }); }); }); http://codepen.io/davidleininger/pen/dqabm
  18. Interaction Parallax The use ha more fun on thi page.

    They f l like they are rea y doing something. https://squareup.com/careers/creative
  19. Parallax on Crack It’ the g d stuff!

  20. Just Because you Can doesn’t mean you should

  21. Most Amazing Site Ever T legit t quit! http://themostamazingwebsiteontheinternet.com/

  22. None
  23. None
  24. Pickles and bacon?!? Just because you can doesn’t mean you

    should
  25. ron swanson Except fo maybe thi guy.

  26. It’s all about Value Value create positive experience .

  27. Keep it within limits •Parallax is cool until it becomes

    distracting •Parallax tells a story unless it’s hard to understand what and where stuff is •Parallax is cool unless it hinders performance C l only get you s fa .
  28. Ron Swanson Can’t be valuable if you don’t give something

    of value
  29. Why does it matter? •Parallax is a fad •Parallax is

    a tool to help engage viewers in the story Para ax get’ remembered. Storie neve die. (Sandlot reference)
  30. Show and tell A fine line betw n bra ing

    and sharing
  31. The Dilemma A kind of #hotdrama going on here.

  32. The Dilemma A kind of #hotdrama going on here. 1.

    Gain More Conversions 2. Showcase Marketing Piece 3. Tell “Our Story” 4. TONS-O-CONTENT 5. Lead to a Call to Action
  33. HOW THE HELL... I’m not even sure where t begin...L

    k fo othe wh have done it? https://squareup.com/careers/creative
  34. I’m not sure ho I would have done thi without

    skro skrollr https://github.com/Prinzhorn/skrollr
  35. Getting started Thi wa a of the documentation GDWDFHQWHU GDWDVWDUW

    GDWDVWDUW GDWDVWDUW $%62/87( GDWDWRS GDWDWRS GDWDHQG GDWDHQG GDWDHQG 5(/$7,9( GDWDERWWRP GDWDWRS GDWDERWWRP GDWDERWWRP GDWDERWWRPWRS GDWDWRSERWWRP GDWDFHQWHUERWWRP GDWDFHQWHUWRS GRFXPHQW YLHZSRUW DQFKRU HOHPHQW
  36. After Many Hours And building it thr time ...

  37. But the book has to open Thi wa the fun

    part...Ente Codepen and hovercat http://codepen.io/davidleininger/pen/pshBF
  38. All together Now I felt like Ron Swanson eating steak.

    A omplished.
  39. Ron Swanson The code i scared of me

  40. Under the hood Ho t code a b k in

    HTML
  41. <div class="book-page printing-page skrollable" data-anchor-target="#commercial-printing" data-325-top="right: 3px; transform:rotate(0deg); z-index: 95;"

    data-175-top="right: 330px;" data-top="transform:rotate(-3deg); z-index: 5;"> <img src="/sites/all/themes/knowclassic_theme/img/printing.png" atl="Printing Portfolio Page" /> </div>
  42. Wonderful Examples •https://squareup.com/careers/creative •http://www.activatedrinks.com/#/activate •http://www.zensorium.com/tinke/ •http://krystalrae.com/ •http://www.spotify.com/us/ •http://journey.lifeofpimovie.com/#!/ •http://strumapp.com/ •http://www.apple.com/iphone/features/

    •http://www.glpcreative.com/ •http://unfold.no/ Some of these are great. Some of these aren’t.
  43. Plugins to Get you going They a d simila thing

    . It’ a preference on which you like best. •Skrollr (http://prinzhorn.github.io/skrollr/) •ParallaxScroller (https://github.com/echoeastcreative/ParallaxScroller) •Scollorama / Super Scrollorama (http://johnpolacek.github.io/superscrollorama/) •Parallax-JS (http://razorfish.github.io/Parallax-JS/#header) •jParallax (http://stephband.info/jparallax/) •Plax (http://cameronmcefee.com/plax/)
  44. Live Demo It’ not a long one, and it’ pre

    y simple.
  45. THANKs! Question? Concern ? Comment ? Pizza?

  46. None