Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
I HAVE SOCIAL SKILLS
[email protected]
davidleininger
dleininger
heyyou
dleinin
David Leininger
Find me, I’ talk nerdy t you...
Slide 3
Slide 3 text
THIS IS ME
Slide 4
Slide 4 text
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.)
Slide 5
Slide 5 text
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.
Slide 6
Slide 6 text
Most Amazing Site
http://themostamazingwebsiteontheinternet.com/
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
BACON?!?
Just because you can doesn’t mean you should.
Slide 10
Slide 10 text
RON SWANSON
Just because you can...
Slide 11
Slide 11 text
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)
Slide 12
Slide 12 text
Parallax Effect
It’s freaking macgic...
Parallax Effect (par•al•lax ef•fect)
1. We fake that crap... (noun)
Slide 13
Slide 13 text
HOT “NEW” TREND
Oh snap, your site has a para!ax header
http://codepen.io/davidleininger/pen/dqabm
Slide 14
Slide 14 text
$(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
Slide 15
Slide 15 text
RON SWANSON
I kno what I’m about son.
Slide 16
Slide 16 text
False Interactivity?
It’ para ax on crack
Slide 17
Slide 17 text
THE DILEMMA
I n d @davatron5000’ soundboard right no ...
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
HOW THE HELL...
I’m not even sure where t begin...L k fo othe wh have done it?
https://squareup.com/careers/creative
Slide 20
Slide 20 text
SKROLLR
I’m not sure ho I would have done thi without skro
https://github.com/Prinzhorn/skrollr
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
AFTER MANY HOURS
...and building thi thr time .
Slide 23
Slide 23 text
BUT BOOKS OPEN
Thi wa the fun part... Ente CodePen and hove cat
http://codepen.io/davidleininger/pen/pshBF
Slide 24
Slide 24 text
ALL TOGETHER NOW
I felt like a cham afte thi .
Slide 25
Slide 25 text
A TASTE
Slide 26
Slide 26 text
Slide 27
Slide 27 text
RON SWANSON
It’ the code that’ scared of me.
Slide 28
Slide 28 text
QUESTIONS?
Find me online and ask away...
Slide 29
Slide 29 text
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...
Slide 30
Slide 30 text
I’M #TOTES SOCIAL
[email protected]
davidleininger
dleininger
heyyou
dleinin
David Leininger
Find me, I’ talk nerdy t you...
Slide 31
Slide 31 text
No content