-
Notifications
You must be signed in to change notification settings - Fork 0
Digital Christmas Card for my colleagues 2010 built with HTML5, CSS3 and JS
poshaughnessy/christmascard2010
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
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 0
No packages published