This is one of my flash animations re-designed to HTML5 with help of CreateJS. Hand-drawn animated fantastic mechanism from letters “under construction” with customizable logo integrated on screen, jQuery countdown timer, 2 skins (light and blueprint). Cartoon retro-styled mechanism animation centered in browser window. Your logo is clickable with custom URL.
- Classic cartoon frame-by-frame animation with countdown timer.
- Customizable liquid color, logo.
- Ready to upload index.html page with animation centered in browser.
- 2 Skins (light and blueprint).
- Archive include original flash animation .FLA and photoshop .PSD sources.
- Fallback dummy page with static picture for IE8 and earlier versions.
- Detailed help file and commented code.
Due to CreateJS requires the HTML5 Canvas, which is not available for IE8 and earlier browsers, in this theme I add dummy fallback page with non-animated .jpg machine picture and alert message.
In Opera browser this animation have some strange tiny glitches (thin horizontal lines occuring above animation), I still could not figure out why. The rest browsers is ok.
Hope you enjoy this file, and take a few seconds to rate and share it.
Example of script.js:
//Initial setup var preloader_width = 150; // Preloader width var preloader_height = 4; // Preloader height var preloader_color_fill = "#656A77"; // Preloader fill color var preloader_color_outline = "#656A77"; // Preloader outline color var preloader_color_text = "#656A77"; // Preloader text color var liquid_color = "#ffcf3e"; // Color of animated liquid var background_path = "images/background.png"; // Path to your main background var background_type = "stretched"; // Background type (can be "stretched", "fixed") var background_pattern_usage = true; // Use pattern above main background (true, false) var background_pattern_path = "images/pattern.png"; // Path to your pattern var background_pattern_alpha = 0.13; // Alpha of your pattern (from 0 to 1) var background_pattern_scale = 50; // Scale factor of your pattern (in percents) var background_pattern_rotation = 0; // Rotation factor of your pattern var logo_path = "images/logo.png"; // Specify here path to your logo var logo_scale = 100; // Logo sale factor (in percents) var logo_x = 0; // Logo correction factor for X-position (in pixels); var logo_y = 0; // Logo correction factor for Y-position (in pixels); var logo_url_enable = true; // Make logo clickable (true, false) var logo_url = "http://themeforest.net/user/Kontramax"; // URL when click on logo var logo_url_target = "_self"; // Targeting (_blank, _self, _parent, _top) var flickering = true; // Flickering (true, false) var animated_scratches = true; // Animated scratches dust (true, false)
Fonts Roboto and Sniglet from Google Fonts http://www.google.com/fonts/
jQuery Countdown Plugin by Keith Wood http://keith-wood.name/countdown.htmlhttp://yepnopejs.com/