Skip to content

poshaughnessy/christmascard2010

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Christmas Card for my Telegraph colleagues 2010
Hosted at: www.merrychristmasfrompeter.co.uk

By Peter O'Shaughnessy

---

COMPATIBILITY

This card has been built for WEBKIT browsers

 - Google Chrome - fully working
 - Safari - fully working
 - iPad 4.2 - fully working (but no snowflakes as it's too slow at animating them so I disabled it)
 - iPhone 4.2 - fully working (but no snowflakes and you can't see the whole card in landscape orientation)
 - iPad/iPhone pre-4.2 - no Tangerine font (doesn't support TTF fonts)
 - Firefox 3.6 - displays initial view OK, but card won't open (no 3D CSS transition support)

--

FEATURES

 - Open web standards (HTML5 <canvas> & <audio>, CSS3 transitions, fonts) - works on many devices (e.g. iPad)
 - Optimised for touch devices (tap & swiping)
 - 'Web app capable' - add to home screen on iPhone/iPad for full-screen view
 - HTML5 offline caching - works offline
 - No images used, anywhere (oh ok, except for two tiny exceptions - the snowflake PNG, and the iOS home screen icon)

--

STILL TO DO

 Should haves:
 - Use the real Telegraph font for 'The Telegraph'? Or try a better font, at least?
 - Fix Tangerine font for iPhone/iPad pre 4.2 - I thought the SVG version should work? Or I could go back to using Google Font API and forget about that font working offline?
 - Fix swiping on iPhone - only seems to work one in three or so (not so much of an issue since adding tap support)
 - Fix so whole height is shown on iPhone in landscape orientation - or allow pinch to zoom out and stop it making the whole thing go crazy...
 - Change the music to something better?
 - Refactoring, tidying...

 Nice to haves:
 - Set initial music volume to be lower? Add volume control?
 - Something extra on inner page - an animation? Swinging bell?
 - Support more browsers, e.g. Firefox 4 (but there's no 3D transform support yet)

--

CREDITS

Snowflake effect (on desktop version)
Used code kindly provided to the world by Seb Lee-Delisle and mr. doob
See: http://sebleedelisle.com/2010/11/javascript-html5-canvas-snow-in-3d/

'Jingle Bells - Instrumental, Ringtone, Loop Jazzy' by Royalty Free Music
From the album: 'Instrumental Christmas Music, On Hold Loops, Ringtones, Comedy Ringtone'
Obtained from Amazon
http://www.amazon.co.uk/gp/product/B004ATZEKS/

About

Digital Christmas Card for my colleagues 2010 built with HTML5, CSS3 and JS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published