Paper Card HTML5

19 Dec 2018
themes No Comments

This is one of my old 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 multiline 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. Theme is fully responsive and design looks correct at any devices.

Click on picture for preview on Codecanyon (in new window):

Paper Christmas Card - HTML5 Template

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 picture and alert message.


                        

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

Also here is Flash + XML old version on my site:

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

No Responses to “Paper Card HTML5”

Leave a Comment

* Copy This Password *

* Type Or Paste Password Here *