Introduction
The animated image shortcode adds animated images that slide left, right, up, or down along the screen. You can also control the speed and position of the image. Multiple images can be added together to create impressive effects.
We have a few examples below. This effect can also be used to create a stock ticker type effect. Another idea is to use animated images to show a sliding background of portfolio, news, customers, etc. items.
Stock Ticker
Add a stock ticker like effect to your pages using one animated image that slides right or left. Just create an image that is a collection of other smaller images and animate it.
Slide Left and Right Animated Images
An example of animated images that slide left and right along the screen at different speeds. The images are anchored to the bottom of the container. Notice how layers have been added using z-index to set clouds behind this text and also in front.
Danger, Will Robinson!
Notice the use of multiple layers. The images on the left are sliding up and down. The asteroids are sliding to the right.
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[intense_content_section]
<h2>Introduction</h2>
The animated image shortcode adds animated images that slide left, right, up, or down along the screen. You can also control the speed and position of the image. Multiple images can be added together to create impressive effects.
We have a few examples below. This effect can also be used to create a stock ticker type effect. Another idea is to use animated images to show a sliding background of portfolio, news, customers, etc. items.
[/intense_content_section]
[intense_content_section overlay_color="#000000" overlay_opacity="70"]
[intense_alert color="#f9f9f9"]
<h2>Stock Ticker</h2>
Add a stock ticker like effect to your pages using one animated image that slides right or left. Just create an image that is a collection of other smaller images and animate it.
[/intense_alert]
[intense_animated_image image="395" type="slideright" anchor="middle" zindex="-1" speed="50"]
[/intense_content_section]
[intense_content_section background_color="#87CEEB" padding_bottom="0"]
<h2>Slide Left and Right Animated Images</h2>
An example of animated images that slide left and right along the screen at different speeds. The images are anchored to the bottom of the container. Notice how layers have been added using z-index to set clouds behind this text and also in front.
[intense_spacer height="110"/]
[intense_animated_image imageid="371" type="slideleft" speed="70" anchor="bottom" zindex="-2" /][intense_animated_image imageid="370" type="slideright" anchor="bottom" zindex="1" /]
[/intense_content_section]
[intense_content_section size="full" imageid="388" imagemode="repeat" background_color="#101010" padding_bottom="0" padding_top="0"]
[intense_row padding_top="0"]
[intense_column size="1"]
[intense_spacer height="371"/]
[intense_animated_image imageid="373" type="slidedown" speed="5" height="371" /]
[intense_animated_image imageid="372" type="slideup" speed="30" height="371" /]
[/intense_column]
[intense_column size="10"]
[intense_spacer height="50"/]
[intense_promo_box size="mega" background_color="#000" background_opacity="70" color="#fff" shadow="8"]
<h1 style="text-align: right;">Danger, Will Robinson!</h1>
<h3 style="text-align: right; color: #fff;">Notice the use of multiple layers. The images on the left are sliding up and down. The asteroids are sliding to the right.</h3>
[/intense_promo_box]
[/intense_column]
[intense_column size="1"]
[/intense_column]
[/intense_row]
[intense_animated_image imageid="368" type="slideright" speed="110" height="371" zindex="-5" anchor="middle" /]
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]