Beskrywing
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
Installation
- 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 effectrotate
.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 ananimation-set
element. It defines the incremental delay in seconds (fractions allowed) that must be added to each subsequent childanimation-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
<p>Enjoy</p>
[/animation-element]
[/animation-set]
Kwel-vrae
- Can I add a question to this FAQ?
-
Yes, please send me a message via www.fides-it.nl/contact 🙂
Aanbevelings
There are no reviews for this plugin.
Contributors & Developers
“Animate Your Content” is oopbron sagteware. Die volgende mense het bygedra tot die ontwikkeling van hierdie uitbreiding:
ContributorsTranslate “Animate Your Content” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
- v1.0 – Maiden voyage