IMAGE SCROLL

SCROLL A TALL IMAGE ON HOVER OR TOUCH

Image Scroll Features:

Define visible height of image
Set scroll down speed and scroll up speed independently
Use CSS easing effect for scroll animation
Fully responsive layout
Add tooltip to element
Add one out of multiple click events to element
Show or hide the handle indicator below the image
Wrap image with imitation browser frame

Export Page Content

[vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578141421578{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">IMAGE SCROLL</h1>
<h3 style="text-align: center;">SCROLL A TALL IMAGE ON HOVER OR TOUCH</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_column_text]
<h2>Image Scroll Features:</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][TS_VCSC_Fancy_List list_type="image" marker_image="https://www.composium.krautcoding.com/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png" content_margin="10"]
<ul>
 	<li style="text-align: justify;">Define visible height of image</li>
 	<li style="text-align: justify;">Set scroll down speed and scroll up speed independently</li>
 	<li style="text-align: justify;">Use CSS easing effect for scroll animation</li>
 	<li style="text-align: justify;">Fully responsive layout</li>
 	<li style="text-align: justify;">Add tooltip to element</li>
 	<li style="text-align: justify;">Add one out of multiple click events to element</li>
 	<li style="text-align: justify;">Show or hide the handle indicator below the image</li>
 	<li style="text-align: justify;">Wrap image with imitation browser frame</li>
</ul>
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height="20"][TS_VCSC_Content_Export toggle_switch="true" toggle_background="#71b1d5" clipboard="true"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_single_image image="22359" img_size="large" alignment="center" css_animation="fadeInRight"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578141444296{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">SCROLL EXAMPLES</h1>
<h3 style="text-align: center;">SCROLL A TALL IMAGE ON HOVER OR TOUCH</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row][vc_column width="1/2"][TS-VCSC-Spacer height="40" el_file=""][TS_VCSC_Image_Scroll image="23617" scroll_height="400" scroll_speed_down="3" scroll_browser="simple" overlay_handle_color="#0094ff" hover_event="link" hover_link="url:https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFernsehturm_Berlin||target:%20_blank"][/TS_VCSC_Image_Scroll][TS-VCSC-Spacer height="40" el_file=""][/vc_column][vc_column width="1/2"][TS-VCSC-Spacer height="40" el_file=""][TS_VCSC_Image_Scroll image="23635" scroll_height="400" overlay_handle_color="#0094ff" hover_event="image"][/TS_VCSC_Image_Scroll][TS-VCSC-Spacer height="40" el_file=""][/vc_column][/vc_row]

Copy