Paper Christmas Card - Animated Creative HTML5 Template

This is one 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 offer customizable logo integrated on screen, external music file included in download archive, adjustable textblock for your greetings message, interactive cartoon gift box – you can open and close box to see different animation cycles.

                        

Animation centered in browser window. Your logo is clickable with custom URL-linking. Ecard is fully responsive and design looks correct at any devices. Easy to customize logo, music, text greetings and button via editing settings.js, index.html and style.css with any texteditor. Note, If you want to edit other vector graphic objects and animation (gifts, tree) you need installed Adobe Animate CC.

Features:

• You can open and close xmas box to start/stop animations.
• Many settings in script.js (see code example below), easy to use, you can change logo, music file, text, sizes, colors without recompile original .FLA file.
• Original music loop and sound effects included in archive.
• Ready to upload index.html page with animation centered in browser.
• Well commented code.
• Documentation.

Credits:

Free font used in template: Paper Cuts 2 by Empire of Dust Library used for main 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 here:
var logo_enable = true; // Show or hide logo on page (true, false)
var path_to_logo = "images/logo.png"; // Specify here path to your logo
var logo_align = "left"; // Logo align in browser (can be "left" or "right")
var logo_x = 130; // Logo correction factor for X-position (in pixels), inverse when logo_align="right";
var logo_y = 55; // Logo correction factor for Y-position (in pixels);
var logo_scale = 80; // Logo sale factor (in percents)
var logo_url_enable = true; // Make logo clickable (true, false)
var logo_url = "http://kontramax.com"; // Specify URL when clicking on logo
var logo_url_target = "_blank"; // Targeting logo URL (_blank, _self, _parent, _top)
var main_animation_x = 0; // Animation correction factor for X-position (in pixels);
var main_animation_y = 35; // Animation correction factor for Y-position (in pixels);
var main_animation_scale = 100; // Animation sale factor (in percents)
var textbox_x = -327; // Greeting textbox position by X in pixels
var textbox_y = -50; // Greeting textbox position by Y in pixels
var textbox_scale = 100; // Textbox sale factor (in percents)
var path_to_music_file = "sounds/music.mp3"; // Specify 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 hint arrow
var center_page_mark_enable = false; // Show mark on center of page for testing

If you like this template, please rate/share it after purchase. Thanks and Merry Christmas!

Congratulate your friends with cool animated ecards

Check my items currently on sale

Also check out additional music for your videos