Parallax Backgrounds

[vc_row full_width=”stretch_row” full_height=”yes” bg_media_type=”img_bg” bg_image=”26829″ bg_media_effect=”parallax_bg” parallax_speed=”4″ bg_cover=”cover” bg_position=”center center” bg_start_from_v=”top” animation_delay=”0″ el_design=”{“desktop“:{“padding-top“:“180px“,“padding-bottom“:“180px“}}” bg_size_title=”” top_shape_separator_title=”” bottom_shape_separator_title=””][vc_column stretching=”none”][moura_custom_font element_tag=”h3″ split_animation=”top” split_animation_delay=”0.2″ font_size=”34px” color=”#ffffff” text_align=”text-lg-center”]Simple parallax effect[/moura_custom_font][moura_empty_space height=”30px”][moura_custom_font element_tag=”p” font_size=”17px” color=”rgba(255,255,255,0.5)” line_height=”2em” el_design=”{“tablet_portrait“:{“padding-right“:“12%“,“padding-left“:“12%“},“tablet_landscape“:{“padding-right“:“20%“,“padding-left“:“20%“},“desktop“:{“padding-right“:“30%“,“padding-left“:“30%“}}” text_align=”text-lg-center”]Create a simple parallax scrolling effect and you can control the parallax speed. Row element offers a full set of customization options.[/moura_custom_font][/vc_column][/vc_row][vc_row full_width=”stretch_row” full_height=”yes” bg_media_type=”img_bg” bg_image=”26831″ bg_media_effect=”scale_bg” scale_speed=”3″ bg_cover=”cover” bg_position=”center center” bg_start_from_v=”top” animation_delay=”0″ el_design=”{“desktop“:{“padding-top“:“180px“,“padding-bottom“:“180px“}}”][vc_column stretching=”none”][moura_custom_font element_tag=”h3″ split_animation=”top” font_size=”34px” color=”#ffffff” text_align=”text-lg-center”]Scaling parallax effect[/moura_custom_font][moura_empty_space height=”30px”][moura_custom_font element_tag=”p” font_size=”17px” color=”rgba(255,255,255,0.5)” line_height=”2em” text_align=”text-lg-center” el_design=”{“tablet_portrait“:{“padding-right“:“12%“,“padding-left“:“12%“},“tablet_landscape“:{“padding-right“:“20%“,“padding-left“:“20%“},“desktop“:{“padding-right“:“30%“,“padding-left“:“30%“}}”]Create a scaling parallax scrolling effect. You can control the parallax speed. Also you can reverse the scaling effect by picking negative speed value.[/moura_custom_font][/vc_column][/vc_row][vc_row full_width=”stretch_row” full_height=”yes” bg_media_type=”img_bg” bg_image=”26832″ bg_media_effect=”parallax_mousemove” parallax_mousemove_speed=”3″ bg_cover=”cover” bg_position=”center center” bg_start_from_v=”top” animation_delay=”0″ el_design=”{“desktop“:{“padding-top“:“180px“,“padding-bottom“:“180px“}}”][vc_column stretching=”none”][moura_custom_font element_tag=”h3″ split_animation=”top” font_size=”34px” color=”#ffffff” text_align=”text-lg-center”]Mouse move parallax[/moura_custom_font][moura_empty_space height=”30px”][moura_custom_font element_tag=”p” font_size=”17px” color=”rgba(255,255,255,0.5)” line_height=”2em” text_align=”text-lg-center” el_design=”{“tablet_portrait“:{“padding-right“:“12%“,“padding-left“:“12%“},“tablet_landscape“:{“padding-right“:“20%“,“padding-left“:“20%“},“desktop“:{“padding-right“:“30%“,“padding-left“:“30%“}}”]Create a smooth parallax animation effect that reacts to mouse movement. Each element offers a full set of customization options.[/moura_custom_font][/vc_column][/vc_row]

Scroll to Top