Content of the article
Installation
- Download to your plugin directory or simply install via WordPress admin interface.
- Activate.
- Use.
Element
Element - a item of content that can be located in any part of the screen, and it may have animations.
Element consists of:
- Title
- Image or Content
- Tooltip
- Position of the Element
- Element properties
- Animation options
- Condition display
- CSS
- Additional animation properties
- Custom animation(not for all version)
- Mobil
- Selector
- Hide or Clip
- Second animation
Settings
Animator Cache - It reduces the number of plugin requests to the database. This increases the download speed of the page
Clear Cache - The plugin automatically clears the cache if a new element has been added. Use this button if for some reason your changes are not visible on the front-end
Show button to quickly add element - setting button display. This button allows the user to easily animate any part of the page (add a selector). This button can be viewed by users who have this role - https://codex.wordpress.org/Roles_and_Capabilities#manage_options
"on customize page"
"on front-end"
Collections
Elements can be grouped, for convenience, the output element via shortcode [wp_animator] (not for all version)
Shortcode
[wp_animator]
(not for all version) Use attribute colection and elements:
- colection - slug of the colections
- elements - IDs of the elements
Example: [
wp_animator colection='test,test1' elements=30,43,56]
Quickly add element Button
This is a feature for quickly animating any part of the page. It also allows you to visually control elements
TAB: "Animate element"
How to select a part of the page for animation - Shift+left/right mouse button OR use +left/right mouse button + this option -
Hint: If this element is a link use Shift+right mouse button
Before add this animation, you can try it -
Fill in the other fields as you need. Detailed description of these fields read below (Title, Animation options, Additional animation properties)
TAB: "All elements"
This tab allows you to find the desired item - delete or edit it.
Show element - marks this element on the page (only for info ) -
Edit element - redirect to the element editing page -
Watch video-tutorial please
Create new Element
To create the element just click - Add New element
Title - need for ease of identification elements in the list
Image or Content - you can choose that will display element :
Image - images of all formats that are supported by wordpress.
Content - any text or text with html tags and shortcodes . To add content instead of the image just click the checkbox Use content
Tooltip - You can add tooltips in different styles to the element.
Use tooltip - Adding a tooltip to the element.
Cotnent of the tooltip - In this field, you can insert text, HTML tags and shortcodes.
Tooltip style - You can choose one of the eleven display tooltips styles. Tooltips use only HTML and CSS. It has a fixed width and position (relative to the element)
Position of the Element - adjusts the location of the element on the screen.
Position X - by vertical. Top , Bottom - starting points. Units in pixels or percentages (relative to the screen size)
Position Y - by horizontal. left , Right - starting points. Units in pixels or percentages (relative to the screen size)
Element properties - Width, Z-index, Position fixed.
Width - width of the element in pixels or percentage.
Z-index - display priority on the screen.
Position fixed - when scrolling element will always stay in one place on the screen.
Animation options - Animation, Time, Iteration.
Animation - this list of available animations.
Time - property specifies the number of seconds a transition animation should take to complete. In other words, is the duration of one cycle of animation.
Iteration - the number of iterations animation. 0 is without animation and -1 is infinity.
Condition display - conditions display elements. By default, the element is displayed on all pages.
Show in exact pages - for each item, you can write a display conditions. Example: !is_page(25) AND !is_home() If you leave the field empty then the element will not be displayed anywhere, this is very important if you want to display this element only with a shortcode.
CSS - this additional css styles. Example:
border: 2px solid #222222;
border-radius: 50%;
Additional animation properties - Animation direction, Animation hover, Animation delay(not for all version), Fill mode.
Animation direction - CSS property indicates whether the animation should play in reverse on alternate cycles. Normal, Reverse, Alternate, Alternate-reverse
Animation hover - defines what to do animation when you hover the mouse over it. Without hover - nothing happens. Stop hover - animation stops pause. Star hover - animation begins to be run.
Animation timing function - specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another. The speed curve is used to make the changes smoothly: linear, Ease, Ease-in, Ease-out, Ease-in-out .
Animation delay (not for all version)- property specifies a delay for the start of an animation (value in seconds (s)).
Fill mode - property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animation-fill-mode property can override this behavior. None - Default value. The animation will not apply any styles to the target element before or after it is executing. Forwards - After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended. Backwards - The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse"). Both - The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions.
Custom animation(not for all version) - You can create and use custom animation.
Use custom animation - it must be checked to apply a custom animation.
Name custom animation - write the name of the animations, it should be the same as the name of the CSS file without .css
Mobil - Changing the position of an element on the mobile device.
Change on mobile device - Use new options on the mobile device
Hide on mobile device - Hide element on the mobile device.
Width; Position X; Position Y; Z-index - New options for changing the positioning element
Selector - The ability to animate any element of the page. Video tutorial
Use selector option - Apply animation to selector
Name of the selector: - Here is the text of the selector. How to determine the correct selector - CSS selector
Hide or Clip - Controlling the visibility of elements. Start the animation if the element is in the visible part of the screen Video tutorial
Clip/cut the element outside of the container - Hiding part of the element that went beyond the container
Hide the element outside of the container - The element is hidden completely if its extreme point has left the container
Start animation on screen - Start the animation if the item is on the visible part of the screen. In other words - when the horizontal scrolling drops to the element
Selector of the container : - This is a container selector whose dimensions will listen to the element - CSS selector
Second animation - This is the second animation that will start only after the end of the first animation.
Use the second animation - Apply the second animation.
Animation - this list of available animations.
Time - property specifies the number of seconds a transition animation should take to complete. In other words, is the duration of one cycle of animation.
Iteration - the number of iterations animation. 0 is without animation and -1 is infinity.
Animation direction - CSS property indicates whether the animation should play in reverse on alternate cycles. Normal, Reverse, Alternate, Alternate-reverse
Animation timing function - specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another. The speed curve is used to make the changes smoothly: linear, Ease, Ease-in, Ease-out, Ease-in-out .
Animation delay - property specifies a delay for the start of an animation (value in seconds (s)).
Fill mode - property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animation-fill-mode property can override this behavior. None - Default value. The animation will not apply any styles to the target element before or after it is executing. Forwards - After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended. Backwards - The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse"). Both - The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions.
How to add custom animation:
- Create directory "animations" in your current theme(/child). Example:
- Create new CSS file. Attention! The file name must be the same as the name of the animation.
- Create animation. How to create CSS animation. Or use this CSS3 Keyframes Animation Generator. Example: