Using False Interactivity to Make Your Website Fun

Using False Interactivity to Make Your Website Fun

Presentation for Day 2 of The Front End Design Conference on using Parallax in websites to help drive more results.

E48404164e2c8ea941be28b048ec2865?s=128

David Leininger

June 22, 2013
Tweet

Transcript

  1. None
  2. I HAVE SOCIAL SKILLS dl@knowclassic.com davidleininger dleininger heyyou dleinin David

    Leininger Find me, I’ talk nerdy t you...
  3. THIS IS ME

  4. TODAY’S AGENDA AKA... What I’m going t talk at you...

    1. The Hot New Trend 2. What is False Interactivity? 3. Show and Tell 4. Ron Swanson 5. Lots of Examples (If there i time.)
  5. 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.
  6. Most Amazing Site http://themostamazingwebsiteontheinternet.com/

  7. None
  8. None
  9. BACON?!? Just because you can doesn’t mean you should.

  10. RON SWANSON Just because you can...

  11. HOT “NEW” TREND Oh snap , you site ha a

    para ax heade Parallax (par•al•lax) 1. The effect whereby the position or direction of an object appears to differ when viewed from different positions (noun)
  12. Parallax Effect It’s freaking macgic... Parallax Effect (par•al•lax ef•fect) 1.

    We fake that crap... (noun)
  13. HOT “NEW” TREND Oh snap, your site has a para!ax

    header http://codepen.io/davidleininger/pen/dqabm
  14. $(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/5)) + '%'; // Move the background $parallax.css({"background-position": coords}); }); }); }); http://codepen.io/davidleininger/pen/dqabm
  15. RON SWANSON I kno what I’m about son.

  16. False Interactivity? It’ para ax on crack

  17. THE DILEMMA I n d @davatron5000’ soundboard right no ...

  18. THE DILEMMA I n d @davatron5000’ soundboard right no ...

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

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

    without skro https://github.com/Prinzhorn/skrollr
  21. 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
  22. AFTER MANY HOURS ...and building thi thr time .

  23. BUT BOOKS OPEN Thi wa the fun part... Ente CodePen

    and hove cat http://codepen.io/davidleininger/pen/pshBF
  24. ALL TOGETHER NOW I felt like a cham afte thi

    .
  25. A TASTE

  26. <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>
  27. RON SWANSON It’ the code that’ scared of me.

  28. QUESTIONS? Find me online and ask away...

  29. OH YEAH. EXAMPLES Some of these are great and some

    are not s great. • https://squareup.com/careers/creative • http://www.activatedrinks.com/#/activate • http://www.zensorium.com/tinke/ • http://strumapp.com/ • http://www.apple.com/iphone/features/ • http://journey.lifeofpimovie.com/#!/ • http://www.glpcreative.com/ Might be t much...
  30. I’M #TOTES SOCIAL dl@knowclassic.com davidleininger dleininger heyyou dleinin David Leininger

    Find me, I’ talk nerdy t you...
  31. None