Pocket Christmas Card – Animated Creative HTML5 Template

pocket-christmas-card-animated-creative-html5-template.png


Creative animated Christmas greeting for your loved once,
friends or clients! This is one of my flash animations re-designed
to responsive HTML5 template with Adobe Animate CC and CreateJS.
Along with fun orthographic animation, this template offer
customizable integrated logo, external music file included in
download archive, adjustable textblock for your greetings message
and button with custom URL-linking to redirect user to your website
or social media profile.


              

Animation centered in browser window. Template is fully
responsive and design looks correct and sharp at any devices. Easy
to customize via editing settings.js with any texteditor.

Features:

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

Credits:

Free font used in template: by MÃ¥rten Nettelbladt

Library used for main animation: CreateJS

Libraries used for detect browser and IE fallback: Jquery

Yepnope

Additional libraries:

Files included:

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

If you like this template, please
rate/share itafter purchase.

Thanks and Merry Christmas!

Example of settings.js with user preferences:


// ------------------------------------------------------------
//
//     POCKET XMAS CARD by Kontramax
//
// ------------------------------------------------------------
//
// Initial setup - you can change parameters here:

// Main animation settings
var main_animation_x = 0; // Animation position by X (in pixels)
var main_animation_y = -50; // Animation position by Y (in pixels)
var main_animation_scale = 120; // Animation sale factor (in
percents)

// Logo settings
var logo_enable = true; // Show or hide logo on card (true, false)
var logo_path = "images/logo.png"; // Specify here path to your
logo
var logo_x = 3; // Logo position corrections by X (in pixels)
var logo_y = -15; // Logo position corrections by Y (in pixels)
var logo_scale = 43; // Logo sale factor (in percents)

// Greeting text settings
var textbox_message = "Dear friends!nPut this card in your pocket
and Christmas mood always will be with you. Be happy and keep
smiling!"; // Use n as line break
var textbox_font = "normal 27px miso-regular"; // Font face
settings
var textbox_color = "#DBF5FF"; // Greeting text color
var textbox_x = 0; // Greeting textbox position by X (in pixels)
var textbox_y = -70; // Greeting textbox position by Y (in pixels)
var textbox_scale = 100; // Greeting textbox scale factor (in
percents)
var textbox_linewidth = 350; // Width of text box
var textbox_lineheight = 32; // Font line height
var textbox_align = "center"; // Horizontal alignment (left,
center, right)
var textbox_baseline = "middle"; // Baseline alignment (top,
middle, bottom)

// Button settings
var button_enable = true; // Show button below greeting (true,
false)
var button_text = "Merry Christmas!"; // Text on button
var button_text_hover = " Buy Pocket Card "; // Text on hovered
button
var button_url = "http://kontramax.com"; // URL path when click on
button
var button_url_target = "_blank"; // Targeting URL (_blank, _self,
_parent, _top)
var button_font = "normal 23px miso-regular"; // Font face settings
var button_space = 28; // Distance between greeting text and button
var button_margin_x = 36; // Distance from button text to button
borders by X
var button_margin_y = 20; // Distance from button text to button
borders by Y
var button_rounded = true; // Rectangle or rounded button (true,
false)
var button_text_color = "#6283B3"; // Button text color when idle
var button_text_color_hover = "#DBF5FF"; // Button text color on
hover
var button_fill_color = "#DBF5FF"; // Button fill color when idle
var button_fill_color_hover = "#EF1D4B"; // Button fill color on
hover

// Music settings
var music_path = "sounds/music.mp3"; // Path to music
var sound_in_path = "sounds/sounds-in.mp3"; // Path to sound-in FX
var sound_out_path = "sounds/sounds-out.mp3"; // Path to sound-out
FX
var music_loop = true; // Repeat music file (true, false)
var mute_all = false; // Mute music and sounds (true, false)

// Settings for tests
var center_page_mark_enable = false; // Show marks for centering
tests
var show_test_info = true; // Show fps, dpr etc. info for tests

// ------------------------------------------------------------

Congratulate your friends with cool animated ecards

Check
my items currently on sale

Also check out additional music for your videos






































Download