Moving image shortcode gives your images nice moving effects to grab visitor’s attention. Using this shortcode you can apply CSS3 animation effects such as Pulse, Tossing, Vertical Float and Horizontal Float.
In this article, we will explain displaying and configuring Moving Image shortcode.
Displaying Moving Image Shortcode
To add Moving image shortcode:
Configuring the Settings
There are several types of settings in the Moving Image Settings pop-up. We explain all the settings in the follow sections.
| Setting | Description |
|---|---|
| Style | Defines the animation of the image. There are 5 animation types: Float Vertically, Float Horizontally, Pulse Tossing, Spin, Flip Horizontally. |
| Align | Defines the alignment of the image. The available options are : Left, Center, Right |
| Title & Alt | Sets the title and alt attribute of the image |
Adding an Entrance Animation
Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.
You can read Configuring shortcode’s entrance animation article for further explanation.
Adding an Extra Class Name
Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read Adding custom CSS class to a shortcode article for further explanation.
