- 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, Ecommerce, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest WSC Meeting Multipurpose Meeting Template 18379053
- ThemeForest Ruby Responsive Email & StampReady Builder 18430857
- CodeCanyon Wallpaper App with Google Photos Backend No Server Needed & Admob interstitial And Banner Ads 18314212
- CodeCanyon Educational Games Bundle #1 6 HTML5 Games CAPX included 18481676
- ThemeForest Bestapp Premium App Showcase Landing Page 17809528
- ThemeForest Max Blog Personal Blog PSD Template 18438090
- ThemeForest Mitri Events Events & Conference HTML Template 16231315
- ThemeForest Photograph Awesome Photography Portfolio Template 18138797
- ThemeForest Virgo PSD Multipurpose Template 18423878
- ThemeForest Pixel Multipurpose Site Template 18576527