[vc_row][vc_column width=”1/1″][vc_column_text]Add some cool on-scroll animation to you pages! Animation effects are easy to apply, change or remove directly from Visual Composer. They can be added to almost all layout elements: images & banners, text blocks, benefits, logos etc. Please read our online manual, take a look at admin screenshots or use dummy content to have better idea how to use animation effects.[/vc_column_text][dt_gap height=”30″][vc_column_text]
6 different transitions
[/vc_column_text][dt_gap height=”20″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”top” bg_image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/09/bg-solid.gif” bg_opacity=”50″ link=”http://the7.dream-demo.com/features-2/animation/top/”]
– TOP –
View live demo
[/dt_banner][/vc_column][vc_column width=”1/3″][dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”bottom” bg_image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/09/bg-solid.gif” bg_opacity=”50″ link=”http://the7.dream-demo.com/features-2/animation/bottom/”]
– BOTTOM –
View live demo
[/dt_banner][/vc_column][vc_column width=”1/3″][dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”left” bg_image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/09/bg-solid.gif” bg_opacity=”50″ link=”http://the7.dream-demo.com/features-2/animation/left/”]
– LEFT –
View live demo
[/dt_banner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][dt_gap height=”20″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”right” bg_image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/09/bg-solid.gif” bg_opacity=”50″ link=”http://the7.dream-demo.com/features-2/animation/animation-right/”]
– RIGHT –
View live demo
[/dt_banner][/vc_column][vc_column width=”1/3″][dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”scale” bg_image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/09/bg-solid.gif” bg_opacity=”50″ link=”http://the7.dream-demo.com/features-2/animation/animation-scale/”]
– SCALE –
View live demo
[/dt_banner][/vc_column][vc_column width=”1/3″][dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”fade” bg_image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/09/bg-solid.gif” bg_opacity=”50″ link=”http://the7.dream-demo.com/features-2/animation/animation-fade/”]
– FADE –
View live demo
[/dt_banner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][dt_gap height=”20″][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]
Row or column animation
[/vc_column_text][dt_gap height=”20″][dt_fancy_image type=”image” image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/10/animation-scr.jpg” image_alt=”animation-screen” lightbox=”true” style=”3″ width=”890″ padding=”10″ align=”left” animation=”none”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]
Shortcode animation
[/vc_column_text][dt_gap height=”20″][dt_fancy_image type=”image” image=”http://demos.the7.dream-demo.com/main/wp-content/uploads/sites/9/2013/08/animation-shortcode-scr.jpg” image_alt=”animation-shortcode-screen” lightbox=”true” style=”3″ width=”890″ padding=”10″ align=”left” animation=”none”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][dt_gap height=”40″][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]
Shortcodes with animation setting
[/vc_column_text][dt_gap height=”20″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][dt_list style=”1″ dividers=”true”]
[dt_list_item image=””]Banners[/dt_list_item]
[dt_list_item image=””]Teasers[/dt_list_item]
[dt_list_item image=””]Logos grid[/dt_list_item]
[dt_list_item image=””]Benefits[/dt_list_item]
[dt_list_item image=””]Call to action area[/dt_list_item]
[dt_list_item image=””]Fancy media & Single image[/dt_list_item]
[dt_list_item image=””]Text[/dt_list_item]
[dt_list_item image=””]Pull quotes and block quotes [text shortcode] [/dt_list_item]
[dt_list_item image=””]Buttons – visual & [text] shortcode[/dt_list_item]
[dt_list_item image=””]Social icons [text shortcode][/dt_list_item]
[/dt_list][/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][dt_gap height=”10″][vc_column_text][dt_quote type=”blockquote” font_size=”normal” animation=”none” background=”plain”]Most of these and all other shortcodes can also be animated through row and column animation settings.[/dt_quote][/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]