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

I have social skills [email protected].............. davidleininger................. dleininger.......................... dleinin................................ Find me online, I’ talk nerdy t you... My name is David Leininger, but I never really called that. 

this is me Ye thi i a ta . Ye it’ real. 

this is where I work Some rad nerd work here... 

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

DISCLAIMER: I am obnoxious. I am rude. I am a little bit sorry about it. 

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. 

Ron Swanson I kno what I’m about son. 

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) 

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? 

On the interwebs Come on... Everybody’ doing it Parallax Effect (par•al•lax ef•fect) 1. We fake that crap... (noun) 

On the interwebs •Fake Parallax •Lazy Load Parallax •Background Parallax •Interaction Parallax I made of these name . Deal with it. 

Fake parallax The nice part about thi it it’ CSS only http://codepen.io/davidleininger/pen/HblqB 

.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 

Lazy Load Parallax Sti para ax, but not a “fun” fo the use . http://strumapp.com/ 

Background Parallax Oh snap , you site ha a para ax heade http://codepen.io/davidleininger/pen/dqabm 

$(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 

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 

Parallax on Crack It’ the g d stuff! 

Just Because you Can doesn’t mean you should 

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

No content

No content

Pickles and bacon?!? Just because you can doesn’t mean you should 

ron swanson Except fo maybe thi guy. 

It’s all about Value Value create positive experience . 

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 . 

Ron Swanson Can’t be valuable if you don’t give something of value 

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) 

Show and tell A fine line betw n bra ing and sharing 

The Dilemma A kind of #hotdrama going on here. 

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 

HOW THE HELL... I’m not even sure where t begin...L k fo othe wh have done it? https://squareup.com/careers/creative 

I’m not sure ho I would have done thi without skro skrollr https://github.com/Prinzhorn/skrollr 

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 

After Many Hours And building it thr time ... 

But the book has to open Thi wa the fun part...Ente Codepen and hovercat http://codepen.io/davidleininger/pen/pshBF 

All together Now I felt like Ron Swanson eating steak. A omplished. 

Ron Swanson The code i scared of me 

Under the hood Ho t code a b k in HTML 



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. 

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

Live Demo It’ not a long one, and it’ pre y simple. 

THANKs! Question? Concern ? Comment ? Pizza? 

No content