Shortcodes

[intense_animated]

Description

Animated allows for animating items on a page. There are many different options to choose from with some starting hidden and others ending hidden. Animations can be triggered when an item on the page has the mouse hovered over it, when the user scrolls the page so that the item is visible, or when something is clicked with the mouse.

Screenshots

Animated1 Animated2 Animated3 Animated4

Dialog

Animated

Attributes

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
typeanimationAnimationAttention Seekers - bounce, flash, pulse, shake, swing, tada, wiggle, wobble

Bouncing Entrances - bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceInUpExpand

Bouncing Exits - bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp

Expand - expandDown, expandLeft, expandRight, expandUp

Fading Entrances - fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig

Fading Exits - fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig

Flippers - flip, flipInDownBackward, flipInDownForward, flipInLeftBackward, flipInLeftForward, flipInRightBackward, flipInRightForward, flipInUpBackward, flipInUpForward, flipInX, flipInY, flipOutX, flipOutY

Lightspeed - lightSpeedIn, lightSpeedOut

Repeating - beating, blinking, floating, flyAway, gearTurn, pulsating, squishBounce, throbbing, tossing

Rotating Entrances - rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight

Rotating Exits - rotateDown, rotateLeft, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rotateRight, rotateUp

Slide - slideDown, slideDownReturn, slideLeft, slideLeftReturn, slideRight, slideRightReturn, slideUp, slideUpReturn

Specials - bombLeftOut, bombRightOut, flyIn, flyOut, foolishIn, foolishOut, hinge, holeOut, magic, pileDrive, rollIn, rollOut, springUp

Static - openDownLeft, openDownLeftOut, openDownLeftReturn, openDownRight, openDownRightOut, openDownRightReturn, openUpLeft, openUpLeftOut, openUpLeftReturn, openUpRight, openUpRightOut, openUpRightReturn

Swinging - swingInDownBackward, swingInDownForward, swingInLeftBackward, swingInLeftForward, swingInRightBackward, swingInRightForward, swingInUpBackward, swingInUpForward

Tin - tinDownIn, tinDownOut, tinLeftIn, tinLeftOut, tinRightIn, tinRightOut, tinUpIn, tinUpOut

Zoom - puffIn, puffOut, swap, swashIn, swashOut, twisterInDown, twisterInUp, vanishIn, vanishOut, zoomInBounce, zoomInGrow, zoomInShrink

triggerdropdownTriggerscroll - triggered when the user scrolls their browser window
hover - triggered when the user's mouse hovers over the item
click - triggered when the user clicks on an item
delay - triggered after a given number of milliseconds
scrollscroll - Scroll
hover - Hover
click - Click
delay - Delay
trigger_client_idtextTrigger Client IDanimate when an html element with this id is triggered (optional)
scroll_percentdropdownScroll Percentageanimate when % of item is in view100 - 0
10 - 10
20 - 20
30 - 30
40 - 40
50 - 50
60 - 60
70 - 70
80 - 80
90 - 90
100 - 100
delaytextDelayNumber of milliseconds to wait before triggering the animation. For the delay trigger, this is the number of milliseconds after the page loads. For all other triggers, this is the number of milliseconds after the trigger occurs.
resettextResetNumber of milliseconds to wait before resetting the animation. Leave blank to not reset.

Compatibility

The animations will only work in browsers that support CSS3 transitions. This may exclude Internet Explorer 9 and below.

Examples

<h2>Delayed Animation <small>Refresh page to try again</small></h2>
[intense_animated type="bounceIn" trigger="delay" delay="500"]
[intense_image imageid="9770" size="square75" /]
[/intense_animated]
[intense_animated type="fadeIn" trigger="delay" delay="1500"]
[intense_image imageid="9739" size="square75" /]
[/intense_animated]
[intense_animated type="rotateIn" trigger="delay" delay="2500"]
[intense_image imageid="9738" size="square75" /]
[/intense_animated]
[intense_animated type="lightSpeedIn" trigger="delay" delay="3500"]
[intense_image imageid="9733" size="square75" /]
[/intense_animated]
[intense_animated type="fadeInDownBig" trigger="delay" delay="4500"]
[intense_image imageid="8316" size="square75" /]
[/intense_animated]
[intense_animated type="bounceInRight" trigger="delay" delay="5500"]
[intense_image imageid="8321" size="square75" /]
[/intense_animated]
[intense_animated type="rotateInDownRight" trigger="delay" delay="6500"]
[intense_image imageid="8317" size="square75" /]
[/intense_animated]
[intense_animated type="fadeInRight" trigger="delay" delay="7500"]
[intense_image imageid="8304" size="square75" /]
[/intense_animated]
[intense_animated type="bounceInUp" trigger="delay" delay="8500"]
[intense_image imageid="8302" size="square75" /]
[/intense_animated]
[intense_animated type="fadeIn" trigger="delay" delay="9500"]
<span style="font-size: 30px; margin-left: 20px;">The End!</span>
[/intense_animated]
[/intense_content_section]

[intense_hr size="large" /]
[intense_content_section]
<h2>Attention Seekers <small>hover</small></h2>
[intense_animated type="flash" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]flash[/intense_button]
[/intense_animated]
[intense_animated type="bounce" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]bounce[/intense_button]
[/intense_animated]
[intense_animated type="shake" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]shake[/intense_button]
[/intense_animated]
[intense_animated type="tada" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]tada[/intense_button]
[/intense_animated]
[intense_animated type="swing" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]swing[/intense_button]
[/intense_animated]
[intense_animated type="wobble" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]wobble[/intense_button]
[/intense_animated]
[intense_animated type="wiggle" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]wiggle[/intense_button]
[/intense_animated]
[intense_animated type="pulse" trigger="hover"]
[intense_button size="large" link="javascript: return false;"]pulse[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Flippers (currently Webkit, Firefox, &amp; IE10 only) <small>click</small></h2>
[intense_animated type="flip" trigger="click"]
[intense_button size="large" link="javascript: return false;"]flip[/intense_button]
[/intense_animated]
[intense_animated type="flipInX" trigger="click"]
[intense_button size="large" link="javascript: return false;"]flipInX[/intense_button]
[/intense_animated]
[intense_animated type="flipOutX" trigger="click"]
[intense_button size="large" link="javascript: return false;"]flipOutX[/intense_button]
[/intense_animated]
[intense_animated type="flipInY" trigger="click"]
[intense_button size="large" link="javascript: return false;"]flipInY[/intense_button]
[/intense_animated]
[intense_animated type="flipOutY" trigger="click"]
[intense_button size="large" link="javascript: return false;"]flipOutY[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Fading Entrances <small>click</small></h2>
[intense_animated type="fadeIn" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeIn[/intense_button]
[/intense_animated]
[intense_animated type="fadeInUp" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInUp[/intense_button]
[/intense_animated]
[intense_animated type="fadeInDown" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInDown[/intense_button]
[/intense_animated]
[intense_animated type="fadeInLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInLeft[/intense_button]
[/intense_animated]
[intense_animated type="fadeInRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInRight[/intense_button]
[/intense_animated]
[intense_animated type="fadeInUpBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInUpBig[/intense_button]
[/intense_animated]
[intense_animated type="fadeInDownBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInDownBig[/intense_button]
[/intense_animated]
[intense_animated type="fadeInLeftBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInLeftBig[/intense_button]
[/intense_animated]
[intense_animated type="fadeInRightBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeInRightBig[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Fading Exits <small>click</small></h2>
[intense_animated type="fadeOut" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOut[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutUp" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutUp[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutDown" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutDown[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutLeft[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutRight[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutUpBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutUpBig[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutDownBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutDownBig[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutLeftBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutLeftBig[/intense_button]
[/intense_animated]
[intense_animated type="fadeOutRightBig" trigger="click"]
[intense_button size="large" link="javascript: return false;"]fadeOutRightBig[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Bounce Entrances <small>click</small></h2>
[intense_animated type="bounceIn" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceIn[/intense_button]
[/intense_animated]
[intense_animated type="bounceInDown" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceInDown[/intense_button]
[/intense_animated]
[intense_animated type="bounceInUp" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceInUp[/intense_button]
[/intense_animated]
[intense_animated type="bounceInLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceInLeft[/intense_button]
[/intense_animated]
[intense_animated type="bounceInRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceInRight[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Bounce Exits <small>click</small></h2>
[intense_animated type="bounceOut" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceOut[/intense_button]
[/intense_animated]
[intense_animated type="bounceOutDown" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceOutDown[/intense_button]
[/intense_animated]
[intense_animated type="bounceOutUp" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceOutUp[/intense_button]
[/intense_animated]
[intense_animated type="bounceOutLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceOutLeft[/intense_button]
[/intense_animated]
[intense_animated type="bounceOutRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]bounceOutRight[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Rotating Entrances <small>click</small></h2>
[intense_animated type="rotateIn" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateIn[/intense_button]
[/intense_animated]
[intense_animated type="rotateInDownLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateInDownLeft[/intense_button]
[/intense_animated]
[intense_animated type="rotateInDownRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateInDownRight[/intense_button]
[/intense_animated]
[intense_animated type="rotateInUpLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateInUpLeft[/intense_button]
[/intense_animated]
[intense_animated type="rotateInUpRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateInUpRight[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Rotating Exits <small>click</small></h2>
[intense_animated type="rotateOut" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateOut[/intense_button]
[/intense_animated]
[intense_animated type="rotateOutDownLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateOutDownLeft[/intense_button]
[/intense_animated]
[intense_animated type="rotateOutDownRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateOutDownRight[/intense_button]
[/intense_animated]
[intense_animated type="rotateOutUpLeft" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateOutUpLeft[/intense_button]
[/intense_animated]
[intense_animated type="rotateOutUpRight" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rotateOutUpRight[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Lightspeed</h2>
[intense_animated type="lightSpeedIn" trigger="click"]
[intense_button size="large" link="javascript: return false;"]lightSpeedIn[/intense_button]
[/intense_animated]
[intense_animated type="lightSpeedOut" trigger="click"]
[intense_button size="large" link="javascript: return false;"]lightSpeedOut[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Specials <small>click</small></h2>
[intense_animated type="hinge" trigger="click"]
[intense_button size="large" link="javascript: return false;"]hinge[/intense_button]
[/intense_animated]
[intense_animated type="rollIn" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rollIn[/intense_button]
[/intense_animated]
[intense_animated type="rollOut" trigger="click"]
[intense_button size="large" link="javascript: return false;"]rollOut[/intense_button]
[/intense_animated]
[/intense_content_section]
[intense_hr size="large" /]

[intense_content_section]
<h2>Scrolling <small>Refresh page to try again</small></h2>
[intense_row padding_top="0"]
[intense_column size="3"]
[intense_animated type="fadeInLeft" scroll_percent="90" trigger="scroll"]
[intense_image imageid="8312" size="small320" /]
[/intense_animated]
[/intense_column]
[intense_column size="9"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu felis quis dui scelerisque imperdiet a nec quam. Pellentesque egestas mi ac mauris gravida nec fermentum nunc dignissim. Proin sollicitudin scelerisque posuere. Duis vel orci ac urna blandit aliquam. Vestibulum fringilla, nulla ac molestie ultricies, sapien ligula porta sapien, sed faucibus ligula sem vel arcu. Morbi imperdiet, dui ut dapibus ultrices, ante magna gravida risus, id molestie mi libero ac risus. Praesent non magna quis ipsum aliquam accumsan. Vivamus in nunc eu est sagittis placerat. Praesent elementum dictum tincidunt. Pellentesque dignissim bibendum arcu id hendrerit. Vivamus at dolor mi.

Ut vitae tellus turpis. Vestibulum ultricies nibh sed turpis sollicitudin vel varius tortor elementum. Cras scelerisque tincidunt eros ut luctus. Aenean a sem nisi, in sagittis quam. Vestibulum non nunc nulla. Sed id odio nunc. Morbi pretium nisl ut enim varius tincidunt. Praesent dignissim rhoncus rhoncus. Curabitur consectetur lobortis vehicula. Fusce
[/intense_column]
[/intense_row]

[intense_row]
[intense_column size="12"]
[intense_animated type="fadeInUp" trigger="scroll"]
[intense_image imageid="7151" size="large1600" title="Book" /]
[/intense_animated]
[/intense_column]
[/intense_row]

[intense_row]
[intense_column size="6"]
[intense_animated type="bounceIn" trigger="scroll"]
[intense_image imageid="7459" size="large1024" title="Book" /]
[/intense_animated]
[/intense_column]
[intense_column size="6"]
[intense_animated type="bounceIn" trigger="scroll"]
[intense_image imageid="7790" size="large1024" title="Player" /]
[/intense_animated]
[/intense_column]
[/intense_row]

[intense_row]
[intense_column size="6"]
[intense_animated type="bounceIn" trigger="scroll"]
[intense_image imageid="7457" size="large1024" title="Book" /]
[/intense_animated]
[/intense_column]
[intense_column size="6"]
[intense_animated type="bounceIn" trigger="scroll"]
[intense_image imageid="7789" size="large1024" title="Player" /]
[/intense_animated]
[/intense_column]
[/intense_row]