[vc_row][vc_column][vc_empty_space height=”50px”][vc_column_text]

[/vc_column_text][/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/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1447770029594{margin-bottom: -10px !important;}”]

Make a mask with a text block

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

This method allows you to create fades between two images using the text block.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”50px”][vc_column_text css=”.vc_custom_1447770088455{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][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_video link=”https://vimeo.com/101617889″ css=”.vc_custom_1448895102752{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”90px”][vc_row_inner][vc_column_inner][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]First, make your composition : Prepare upstream all media that will be needed to achieve this Racontr tips & tricks.

Once you have imported them into the editor, the tutorial can begin.

Suppose you want to create an layer effect of image A to image B, you need to have the URL of image B

To do this, import your images on the scene then go to the page preview. Right-click on the image B and choose ?copy the url of the image.?[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_single_image image=”820″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447770236108{margin-right: 5% !important;}”][vc_row_inner][vc_column_inner width=”1/4″][vc_column_text]

1. Create a text block, it is important that it is wider than your image to function optimally.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][vc_column_text]

2. In the text options box click on ?HTML? and add the URL of the code after replaced the image B link inside.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][vc_column_text]

3. We must now play with the timeline here, go to two seconds for example and create a key point to your text block.

You can also click in the field width at the bottom to create a scale key on the timeline.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][vc_column_text]

4. Go back to point 0 and reduce the width of the text block that masked image A.
   Start the preview, and voila, you have achieved a fade between two images.
   You can repeat this method for the loading bar, but you do not need text block because preserving the shape does not matter here.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]The code:

<div style="

height:100%;

width:100%;

background-image: url(https://ce3861569bfb8e5b814c-7ceb94de4d3be92144118b01e53b4105.ssl.cf3.rackcdn.com/full_550ae3ea80ece-1426775960244.png);

background-position: top right;

background-repeat: no-repeat;">
<p>&nbsp;</p>
</div>[/vc_column_text][/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]