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.

Transcript

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/
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...