The animate your content plugin makes it possible to animate existing html by placing shortcodes around content.
Watch Some EXAMPLES Here With Code Samples
Features
- fly blocks from the left/right/top/bottom of your screen
- different bouncing effects can be configured
- rotate a block of text and/or images with any rotation angle
- set total elapsed time of animation per animation element
- set delay from start per animation element
- set animation effects on container element, any nested elements will inherit the effects from the container.
- set 'delay_increment' on animation set, which automatically adds an incremental delay on any child elements
- Install and activate this plugin
- Place shortcodes in your content as described below.
To get started, look at the
examples with code samples on my site.
Shortcode Installation Example
[animation-set style="" class="" id="" ]
[animation-element] .. your content here .. [/animation-element]
[animation-element] .. your content here .. [/animation-element]
[/animation-set]
HTML shortcode attributes
Any attributes placed on an
animation-set
will be automatically applied to any nested
animation-element
s. It is however possible to override an
animation-set
attribute per
animation-element
.
The html attributes
style
and
class
can be used on both
animation-set
and
animation-element
. The
id
attribute can only be used on an
animation-set
.
Animation shortcode attributes
effect
: one of ( slide_from_left , slide_from_right , slide_from_top , slide_from_bottom , fade_in , rotate ). No default and thus a required field.
time
: the total elapsed time of the animation in seconds. Fractions are allowed. Default is 2.0 seconds.
delay
: the delay in seconds (fractions allowed) after which the animation must start. Default is 0.
rotation
: rotation angle in degrees. Example: 360. Only used for effect rotate
.
ease
: defines the method used to make a block of content bounce against the far edge of the animation. Possible values are described on this page. Examples are 'Bounce.easeIn', 'Cubic.easeOut', 'Elastic.easeInOut', etc.
delay_increment
: this attribute is only allowed on an animation-set
element. It defines the incremental delay in seconds (fractions allowed) that must be added to each subsequent child animation-element
. The default value is 0.
Example
- Text flying in from the top, left, right and bottom of the screen.
- Each animation takes 3 seconds.
[animation-set ease="Bounce.easeIn" time="3"]
[animation-element effect="slide_from_top"]Hello World (from top)![/animation-element]
[animation-element effect="slide_from_left"]Hello World (from left)![/animation-element]
[animation-element effect="slide_from_right"]Hello World (from right)![/animation-element]
[animation-element effect="slide_from_bottom"]Hello World (from bottom)![/animation-element]
[/animation-set]
Example
- Images flying in from the left, with half a sec delay in between.
- Each animation takes 1.5 seconds.
- The container DIV gets a css class attribute for custom styling purposes.
[animation-set effect="slide_from_left" time="1.5" ease="Bounce.easeIn" delay_increment="0.5" class="myCssClass"]
[animation-element][/animation-element]
[animation-element][/animation-element]
[animation-element][/animation-element]
[animation-element][/animation-element]
[/animation-set]
Example
- Text rotates 360 degrees in 1.5 seconds.
[animation-set effect="rotate" time="1.5" rotation="360"]
[animation-element]Hello World[/animation-element]
[/animation-set]
Example
- Fade in the page title and afterwards, fade in the content below the title
- Total animation time is 1.5 seconds
[animation-set effect="fade_in"]
[animation-element time="1.5"]
My Page Title[/animation-element]
[animation-element time="1.5" delay="1.5"]
Here is some more content that will be faded in later
Enjoy
[/animation-element]
[/animation-set]