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.

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