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.

David Leininger

August 28, 2013
Tweet

More Decks by David Leininger

Other Decks in Design

Transcript

  1. 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...
  2. 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.
  3. 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)
  4. 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?
  5. On the interwebs Come on... Everybody’ doing it Parallax Effect

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

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

    only http://codepen.io/davidleininger/pen/HblqB
  8. .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
  9. Lazy Load Parallax Sti para ax, but not a “fun”

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

    ax heade http://codepen.io/davidleininger/pen/dqabm
  11. $(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
  12. 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
  13. 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 .
  14. 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)
  15. 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
  16. HOW THE HELL... I’m not even sure where t begin...L

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

    skro skrollr https://github.com/Prinzhorn/skrollr
  18. 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
  19. But the book has to open Thi wa the fun

    part...Ente Codepen and hovercat http://codepen.io/davidleininger/pen/pshBF
  20. <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>
  21. 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/)