Paper Christmas Card - Animated Creative HTML5 Template

That is one in every of my Christmas flash animations re-designed to responsive HTML5 template with Adobe Animate CC and CreateJS. Made with stop-motion animation technic, this template provide customizable brand built-in on display screen, exterior music file included in obtain archive, adjustable textblock in your greetings message, interactive cartoon present field – you possibly can open and shut field to see totally different animation cycles.

Animation centered in browser window. Your brand is clickable with customized URL-linking. Ecard is totally responsive and design appears to be like appropriate at any units. Simple to customise brand, music, textual content greetings and button by way of modifying settings.js, index.html and elegance.css with any texteditor. Word, If you wish to edit different vector graphic objects and animation (items, tree) you want put in Adobe Animate CC.

Options:

You possibly can open and shut xmas field to start out/cease animations.
Many settings in script.js (see code instance under), simple to make use of, you possibly can change brand, music file, textual content, sizes, colours with out recompile authentic .FLA file.
Authentic music loop and sound results included in archive.
Able to add index.html web page with animation centered in browser.
Nicely commented code.
Documentation.

Credit:

Free font utilized in template: Paper Cuts 2 by Empire of Mud
Library used for fundamental animation:
CreateJS http://www.createjs.com/
Libraries used for detect browser and IE fallback:
Jquery https://jquery.com/
Yepnope http://yepnopejs.com/

Recordsdata included:

FLA, HTML, JS, CSS, MP3, PSD, PNG, Documentation

Instance of script.js with settings:

// Preliminary setup - change parameters right here:
var logo_enable = true; // Present or conceal brand on web page (true, false)
var path_to_logo = "pictures/brand.png"; // Specify right here path to your brand
var logo_align = "left"; // Emblem align in browser (could be "left" or "proper")
var logo_x = 130; // Emblem correction issue for X-position (in pixels), inverse when logo_align="proper";
var logo_y = 55; // Emblem correction issue for Y-position (in pixels);
var logo_scale = 80; // Emblem sale issue (in percents)
var logo_url_enable = true; // Make brand clickable (true, false)
var logo_url = "http://kontramax.com"; // Specify URL when clicking on brand
var logo_url_target = "_blank"; // Focusing on brand URL (_blank, _self, _parent, _top)
var main_animation_x = 0; // Animation correction issue for X-position (in pixels);
var main_animation_y = 35; // Animation correction issue for Y-position (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"; // Colour of animated trace arrow
var center_page_mark_enable = false; // Present mark on middle of web page for testing

Should you like this template, please price/share it after buy.
Thanks and Merry Christmas!