Scribd
Upload
34 views22 pages

Films By... Presentation

This document provides information about the process of creating a film website, including focusing the mindset, choosing a minimalist and cool design with CSS3 over jQuery, and referencing external resources that were helpful. It also discusses some design elements, issues that came up, how to create animated gifs from footage, and basic analytics for the site during its first two weeks online.

Uploaded by

Brett Johnson
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views22 pages

Films By... Presentation

This document provides information about the process of creating a film website, including focusing the mindset, choosing a minimalist and cool design with CSS3 over jQuery, and referencing external resources that were helpful. It also discusses some design elements, issues that came up, how to create animated gifs from footage, and basic analytics for the site during its first two weeks online.

Uploaded by

Brett Johnson
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

This

That

How I made my fIlms sIte

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/

Bootstrap, from Twitter


http://twitter.github.com/bootstrap/javascript.html#scrollspy

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/

One size fits all.

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; }

0.2s 0.2s 0.2s 0.2s

ease; ease; ease; ease;

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

The Best Designs

Awwwards

Friends
Peak: 169

The Best Designs


Peak: 1,169

Awwwards
Peak: 4,589

*Jan. 23, 2012 - Feb 6, 2012

Total Visitors* 13,068

Video Plays 8,802

Video Finishes 791

At most, 67.35% of visitors hit Play. Only 8.98% of visitors who started watching a video finished it.

*Jan. 23, 2012 - Feb 6, 2012

Viewers

Followers

Contacts

Missing

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy