Paper Christmas Card – Animated Creative HTML5 Template
This is one among my Christmas flash animations re-designed to responsive HTML5 template with Adobe Animate CC and CreateJS. Made with cease-movement animation technic, this template supply customizable emblem built-in on display, exterior music file included in obtain archive, adjustable textblock in your greetings message, interactive cartoon reward field – you may open and shut field to see completely different animation cycles.
Animation centered in browser window. Your emblem is clickable with customized URL-linking. Ecard is absolutely responsive and design seems to be appropriate at any units. Easy to customise emblem, music, textual content greetings and button through enhancing settings.js, index.html and elegance.css with any texteditor. Note, If you need to edit different vector graphic objects and animation (items, tree) you want put in Adobe Animate CC.
Features:
- You can open and shut xmas field to start out/cease animations.
- Many settings in script.js (see code instance beneath), straightforward to make use of, you may change emblem, music file, textual content, sizes, colours with out recompile unique .FLA file.
- Original music loop and sound results included in archive.
- Ready to add index.html web page with animation centered in browser.
- Well commented code.
- Documentation.
Credits:
Free font utilized in template: Paper Cuts 2 by Empire of Dust
Library used for important animation:
CreateJS http://www.createjs.com/
Libraries used for detect browser and IE fallback:
Jquery https://jquery.com/
Yepnope http://yepnopejs.com/
Files included:
FLA, HTML, JS, CSS, MP3, PSD, PNG, Documentation
Example of script.js with settings:
// Initial setup - change parameters right here:
var logo_enable = true; // Show or disguise emblem on web page (true, false)
var path_to_logo = "pictures/emblem.png"; // Specify right here path to your emblem
var logo_align = "left"; // Logo align in browser (could be "left" or "proper")
var logo_x = 130; // Logo correction issue for X-place (in pixels), inverse when logo_align="proper";
var logo_y = 55; // Logo correction issue for Y-place (in pixels);
var logo_scale = 80; // Logo sale issue (in percents)
var logo_url_enable = true; // Make emblem clickable (true, false)
var logo_url = "http://kontramax.com"; // Specify URL when clicking on emblem
var logo_url_target = "_blank"; // Targeting emblem URL (_blank, _self, _parent, _top)
var main_animation_x = 0; // Animation correction issue for X-place (in pixels);
var main_animation_y = 35; // Animation correction issue for Y-place (in pixels);
var main_animation_scale = 100; // Animation sale issue (in percents)
var textbox_x = -327; // Greeting textbox place by X in pixels
var textbox_y = -50; // Greeting textbox place by Y in pixels
var textbox_scale = 100; // Textbox sale issue (in percents)
var path_to_music_file = "sounds/music.mp3"; // Specify right here path to your music
var path_to_sound_in = "sounds/sounds-in.mp3"; // Path to your sound-in FX
var path_to_sound_out = "sounds/sounds-out.mp3"; // Path to your sound-out FX
var loop_music = true; // Loop your music (true, false)
var mute_all = false; // Mute music and sounds (true, false)
var hint_arrow_color = "#94E2EB"; // Color of animated trace arrow
var center_page_mark_enable = false; // Show mark on heart of web page for testing
If you want this template, please price/share it after buy.
Thanks and Merry Christmas!