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

[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"]