JQUERY HANDWRITING
View Documentation || Purchase jQuery Handwriting
Demos
Merry Christmas
View Code
var hw_mc = jQuery('#merry_christmas').HandWriting({
text_color: 'rgba(0,100,0,1)',
text_lineWidth: 2,
show_pen: true,
pen_image: 'mc_pen.png',
anim_layers: 20,
steps_between_letters: 8,
letter_steps: 8,
isc: [0.75, 0.75, 0.75, 0.75, 0.75, 0.5],
hw_scale: 2.0,
line_offset_x: 0,
line_offset_y: 25,
drawings: ['lred.png', 'lyellow.png', 'lgreen.png', 'ggold.png', 'gred.png', 'g2.png'],
replay: true,
wait_after_finish_duration: 3000,
finish_effect: 'fade',
image_rotation: 'random',
random_pos_x: 0,
random_pos_y: 0,
text_align: 'center',
complete: function(){hw_hny.play_anim();}
});
<div id="merry_christmas" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #300; font-size: 100px; background-image: url('mc_bgr.jpg'); color: #080"><span data-images="4,5,2,0">Merry</span> <span data-images="3,5,5,1">Christmas</span></div>
Happy New Year 2014
View Code
var hw_hny = jQuery('#hny2014').HandWriting({
text_color: 'rgba(0,100,0,1)',
text_lineWidth: 2,
show_pen: true,
pen_image: 'mc_pen.png',
anim_layers: 10,
steps_between_letters: 12,
letter_steps: 12,
isc: [0.08, 0.5, 0.75, 0.75],
hw_scale: 1.8,
line_offset_x: 0,
line_offset_y: 25,
drawings: ['sn4.png', 'g2.png', 'lcyan.png', 'lgreen.png'],
paused: true,
replay: true,
wait_after_finish_duration: 3000,
finish_effect: 'fade',
image_rotation: 'random',
random_pos_x: 0.1,
random_pos_y: 0.1,
line_height: 60,
complete: function(){hw_anim1.play_anim();}
});
<div id="hny2014" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #111; text-align: center; font-size: 100px; background-image: url('hny_bgr.jpg')"><span style="color:#888" data-images="0,0,0,3">Happy New Year</span> <span style="color:#080" data-images="1,3">2014</span></div>
Burn Marks
View Code
var hw_anim1 = jQuery('#animation1').HandWriting({
xml_file: 'letters_verdana.xml',
text_color: 'rgba(0,0,0,1)',
show_pen: false,
steps_between_letters: 15,
letter_steps: 15,
hw_scale: 2.70,
line_offset_x: 0,
line_offset_y: 10,
drawings: [
'anim/b0001.png', 'anim/b0002.png', 'anim/b0003.png', 'anim/b0004.png', 'anim/b0005.png', 'anim/b0006.png',
'anim/b0007.png', 'anim/b0008.png', 'anim/b0009.png', 'anim/b0010.png', 'anim/b0011.png', 'anim/b0012.png', 'anim/b0013.png'],
isc: [0.6],
stroke_above_image: false,
paused: true,
replay: true,
animate: true,
wait_after_finish_duration: 3000,
finish_effect: 'fade',
image_rotation: 'random',
random_pos_x: 0.15,
random_pos_y: 0.15,
line_height: 50,
use_stroke: false,
ms:30,
complete: function(){hw_anim2.play_anim();}
});
<div id="animation1" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #111; text-align: center; font-size: 130px; background-image: url('burn_bgr.jpg'); color: #000;"><span data-images="0,0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,4,4,4,5,5,5,6,6,6,7,7,8,8,9,9,10,10,11,12">Burn Marks</span></div>
blooming flowers
View Code
var hw_anim2 = jQuery('#animation2').HandWriting({
xml_file: 'letters_verdana.xml',
show_pen: false,
steps_between_letters: 4,
letter_steps: 4,
hw_scale: 2.50,
line_offset_x: 0,
line_offset_y: 10,
drawings: ['anim/p0001.png', 'anim/p0002.png', 'anim/p0003.png', 'anim/p0004.png', 'anim/p0005.png', 'anim/p0006.png', 'anim/p0007.png', 'anim/p0008.png',
'anim/p0009.png', 'anim/p0010.png', 'anim/p0011.png', 'anim/p0012.png', 'anim/p0013.png', 'anim/p0014.png', 'anim/p0015.png', 'anim/p0016.png',
'anim/p0017.png', 'anim/p0018.png', 'anim/p0019.png', 'anim/p0020.png', 'anim/p0021.png', 'anim/p0022.png', 'anim/p0023.png'],
isc: [0.6],
stroke_above_image: false,
paused: true,
replay: true,
animate: true,
wait_after_finish_duration: 3000,
finish_effect: 'fade',
image_rotation: 'random',
random_pos_x: 0.1,
random_pos_y: 0.1,
line_height: 50,
ms:20,
complete: function(){hw_sv.play_anim();}
});
<div id="animation2" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #151; text-align: center; font-size: 120px; color: #E4312F; background-image: url('green.jpg')"><span data-images="0-22,21-0">blooming flowers</span></div>
Be My Valentine
View Code
var hw_sv = jQuery('#saint_valentine').HandWriting({
text_lineWidth: 3,
text_color: 'rgba(0,100,0,1)',
xml_file: 'letters_verdana.xml',
show_pen: true,
steps_between_letters: 7,
letter_steps: 7,
hw_scale: 2.3,
line_offset_x: 0,
line_offset_y: 10,
drawings: ['f11.png', 'f2.png', 'f1.png', 'f7.png', 'f8.png', 'f9.png'],
isc: [0.5,0.5,0.5,0.5,0.5,0.5,0.75],
paused: true,
replay: true,
animate: false,
anim_layers: 15,
wait_after_finish_duration: 3000,
finish_effect: 'fade',
image_rotation: 'random',
random_pos_x: 0.15,
random_pos_y: 0.15,
line_height: 60,
complete: function(){hw_cal.play_anim();}
});
<div id="saint_valentine" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #300; text-align: center; font-size: 100px; background-image: url('sv_bgr.jpg')"><span data-images="1" style="color:#800">Be My</span> <span data-images="0-5">Valentine</span></div>
Be My Valentine
View Code
var hw_cal = jQuery('#calligraphic').HandWriting({
text_lineWidth: 1,
text_color: 'rgba(0,100,0,1)',
xml_file: 'letters.xml',
show_pen: true,
steps_between_letters: 15,
letter_steps: 15,
hw_scale: 2,
line_offset_x: 0,
line_offset_y: 0,
drawings: ['f11.png', 'f2.png', 'f1.png', 'f7.png', 'f8.png', 'f9.png'],
isc: [0.15],
paused: true,
replay: true,
animate: false,
anim_layers: 4,
wait_after_finish_duration: 3000,
finish_effect: 'fade',
image_rotation: 'random',
random_pos_x: 0.15,
random_pos_y: 0.15,
line_height: 65
});
<div id="calligraphic" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #300; text-align: center; font-size: 100px; background-image: url('sv_bgr.jpg')"><span data-images="0-5">Be My</span> <span data-images="1" style="color:#800">Valentine</span></div>
Left aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
View Code
var hw_simple = jQuery('.handwritingSIMPLE').HandWriting({
text_lineWidth: 1,
text_color: 'rgba(250,250,250,1)',
xml_file: 'letters_verdana.xml',
show_pen: true,
steps_between_letters: 3,
letter_steps: 3,
hw_scale: 0.75,
line_offset_x: 5,
line_offset_y: 10,
wait_after_finish_duration: 1000,
finish_effect: 'fade',
replay: true
});
<div class="handwritingSIMPLE" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #080; text-align: left; font-size: 38px; color: #fff;"><span style="color: green" data-width="3">Left aligned.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
Right aligned.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
View Code
var hw_simple = jQuery('.handwritingSIMPLE').HandWriting({
text_lineWidth: 1,
text_color: 'rgba(250,250,250,1)',
xml_file: 'letters_verdana.xml',
show_pen: true,
steps_between_letters: 3,
letter_steps: 3,
hw_scale: 0.75,
line_offset_x: 5,
line_offset_y: 10,
wait_after_finish_duration: 1000,
finish_effect: 'fade',
replay: true
});
<div class="handwritingSIMPLE" style="position: relative; top: 0px; left: 0px;width: 600px; height: 300px; border: 1px solid #ff0; text-align: right; font-size: 38px; color: #fff;"><span style="color: #ff0" data-width="3">Right aligned.</span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>