Films By... Presentation
Films By... Presentation
That
mIndset
Unfocused
Lazy
Focused
Professional
Can I
make it minimal make it cool create an experience experiment use CSS3 over jQuery do what I want
Can I
Yes we can.
desIgn
Fullscreen
Cinematic
animated .gif
Futura
Georgia
Hover
Power
Pa r t s
I didnt do it.
Thanks Internet!
HTML5 Boilerplate
http://html5boilerplate.com/
FitVids
http://fitvidsjs.com/
LocalScroll
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
Vimeo API
http://vimeo.com/api/docs/player-js
CSS Tricks
http://css-tricks.com/perfect-full-page-background-image/
n 16:9
// edit FitVids code - http://j.mp/yIVjuJ // adjust panels and video to window size function setPanelSize(){ var windowHeight = $(window).height(); var windowWidth = $(window).width(); var videoWidth; //calculate whether the video is too tall for the space if ( ((windowWidth-120)*.5625) > (windowHeight-160) ) { videoWidth = (windowHeight-160)*1.777; } //resize video and panel $(.videocontent).css({maxwidth:videoWidth+px}); $(.panel).css({height:windowHeight+ px}); //reset scrollspy $(body).scrollSpy(refresh); }
Oooh
Argh
#main-nav li { height: 40px; } #main-nav a { background-color: #ccc; line-height: 40px; display: inline-block; height: 40px; position: relative; border: none; color: #fff; font-size: 0; padding-left: 40px; overflow: hidden; -webkit-transition: all -moz-transition: all -o-transition: all transition: all } #main-nav a:hover { font-size: 18px; padding-right: 20px; }
How
Complicated
- Stabilize footage - 24fps => 12fps - Loop with crossfades - Export frames - Import layers into Photoshop
animated .gif
- Add layers to animation panel - Set frames to 0.1 second and loop - Mask out redundant areas - Save out .gif (few colors)
PusHIng
Awwwards
Friends
Peak: 169
Awwwards
Peak: 4,589
At most, 67.35% of visitors hit Play. Only 8.98% of visitors who started watching a video finished it.
Viewers
Followers
Contacts
Missing