[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1447676411623{margin-bottom: -10px !important;}”]

Scroll in & scroll out

[/vc_column_text][vc_column_text letter_spacing=”” css=”.vc_custom_1474978616747{margin-right: 5% !important;}”]

With the “scroll in” and “scroll out” features, you could trigger actions according to differents browsings on the page.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1447676497974{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]This kind of action allows you to launch animations in a long-form whenever an element appears or disappears on the screen.

As in the example opposite (scrolling) , you could trigger animations according scrolling place.

You gonna learn here how to play or show elements , actions and animations and make them stop or disappear.

you can use this method with all medias on Racontr : images, sounds, texts, videos.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”50px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Apply your actions on an element. For example here, we decided the title and the background introduction will move (X) when you will scroll until the area the hotlink is placed, using the action ?scroll-in?.

1. Click on the element
2. Add scroll action
3. Choose scroll-in or scroll-out

In the preview, when you reach the scroll level where your element and its scroll-in hotlink is, your animations trigger !

You can build your entire page with this method by carefully positioning your blocks texts and give a real touch of interactivity to your projects.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5649″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463669716151{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Unlike the scroll -in action, the scroll-out will trigger actions when the element on which they are applied is not visible anymore

1. Click on the element
2. Add scroll action
3. Choose scroll-in or scroll-out

In the same way, apply scroll-out action on the hotlink concerned and choose to remove from the scene the title and the background.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5652″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463669744308{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]