- Site Template
- WordPress Theme
- Blogging Theme
- CMS Theme
- Marketing Template
- eCommerce Theme
- Forum Theme
- Flash Template
- PSD Web Template
- .NET Script
- PHP Script
- HTML5 Code
- CSS Style
- Edge Animate Template
- Muse Template
- TypeEngine Theme
- Static Site Generator
- Sketch Template
CodeCanyon jQuery Handwriting 6354107
Jquery \ Ipad \ Handwriting \ Animation
DEMO || DOCUMENTATION
The tool gives errors when working with jquery versions lower than 1.8.0, because the absence of parseHTML method. All testing during development was performed with jquery 1.9.1.
<div id="hello_world" style="font-size: 16px; color: #888; position: relative; width: 580px; height: 280px;">Hello <span style="color:#fff">World</span></div>
- two sets of symbols
The tool features two sets of symbols – one similar to Verdana font, and another one with more calligraphic look.
- 85 symbols in each set
These are A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 . , ! ? ( ) [ ] ; : @ $ % & * = + – / ’ ” > <
- size of animated symbols
Can be set using a scale parameter. Must be tuned manually to user’s needs, because different sets of symbols have different basic sizes. It is a float number where 1 means 100%. This parameter affects many aspects of the animation – space between letters, line height, padding, etc.
- size of line height
This parameter is used when the text must be laid out on more than one line. It is set in pixels and is affected by the scale parameter.
- color of text
Color can be set for all targeted objects with parameter, or can be set for individual parts of texts. Spans with inline color value can define that parameter.
- stroke width
Line width can be set with parameter for all selected objects, or selectively for parts of text in span elements using data-width parameter. Line width is not affected by the scale parameter.
- top/left offset
- text alignment
It is possible to set left, right and center alignment for the text, which applies on all text. Text align can be set with inline style for the selected div objects, or with parameter.
- curves speed drawing
Integer numbers that define in how many steps each curve of each symbol will be animated. One parameter is used for visible curves and another for the invisible curves between letters and words. These numbers are also used when images are place to decorate the curves. More parts mean more images over the curve.
Pen can use different image set by user. Pen ball must be in top/left corner of pen image. Pen can be hidden.
Images can be used in the animation and are managed with several parameters. One of the parameters is an array of paths to images that the user intends to use. Another parameter is array of floats that each image will use to scale its size.
One method to use images is to put them zoomed out on each defined point on the curve. Then gradually zoom out the image to the scale defined. Images can be placed exactly on the curves or slightly offset which can defined with another parameters. Images can gradually rotate starting from random direction, or use fixed direction. The amount of frames to animate this behavior can be set. Very interesting results can be achieved depending on type of images used.
Another method of using images is to do short animations – for example blooming flower. Then store the animation in png files. There is a parameter that can force the tool to alternate the images and as a result the animation shows on all curves it is set for.
- stroke above image
It is possible to define if the stroke will draw above or below the canvas that animates images.
It is possible to pause and continue animation using public method
A parameter can define if animation will play again after it is finished.
- finish effect
When animation is done it can either fade or stay. If it is going to fade an interval can be set for duration of fade. If it is going to fade a wait interval can set, so text can be read before it fades.
- overall speed
Speed can be set in milliseconds. It affects each frame animated.
User can define a function that will execute when animation is complete.
Keywords: animation, handwriting, ipad, jquery.
Android, Builder, Business, Clean, Corporate, Creative, Design, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Online, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest Workspace Creative Office Space WordPress Theme 19356594
- ThemeForest Akest Creative & Clean One-Page PSD 19469917
- ThemeForest Seriesa Creative Blog PSD Template 19469114
- ThemeForest Penguin PSD Template for Business Companies 19466197
- ThemeForest LeadPack Multi-Purpose Landing Page Templates 19467314
- ThemeForest Mad Lemur A Modern Template for Digital Agencies 19462072
- ThemeForest Multipurpose Business & Corporate Business PSD Template 19241719
- ThemeForest Citeno Creative Multipurpose HTML5 Template 19343253
- ThemeForest Mogtemplates Mognews Template For Blogger 19460451
- ThemeForest Rava Creative One Page Multipurpose PSD Template 19456413