Parallax & Animation

[vc_row row_separator= »no-separator » top= »200px » bottom= »200px » bg_image= »3088″ parallax_bg= »parallax-bg » scale_bg= »scale-bg » speed= »0.20″ content_fadeout= »content-fadeout » fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » textalign= »center » bg_position= »Center bottom » overlay_color= »rgba(31,30,53,0.55) » video_speed= »0.20″ overlay_pattern= »sm_cell_b » overlay_pattern_op= »0.1″ row_align= »align-middle » scale_speed= »0.20″ full_content_width= » » bg_color= »#3e4058″ bg_cover= » » parallax_video= » » row_mobile_style= » » row_show_on= » » slope_top= » » slope_bottom= » »][vc_column width= »1/1″][vc_heading h_size= »h-extralarge » title= »Parallax background » title_color= »#ffffff » subtitle= »Create eye-catching parallax sections » subtitle_color= »#ffffff » divider_type= »div-narrow » size= »small » alignment= »align-center »][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »100px » bottom= »0px » bg_color= »#f4f4f3″ speed= »0.20″ fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px »][vc_column width= »1/1″][vc_heading title= »Custom row animation » title_color= »#363b3e » subtitle= »To make your content really stand out » subtitle_color= »#9ca8ae » divider= »div-between » divider_type= »div-narrow-thick » size= »small » divider_color= »#bcd44f » alignment= »align-center » css_animation= »bottom-to-top »][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »60px » bottom= »60px » bg_color= »#f4f4f3″ speed= »0.20″ fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px »][vc_column width= »1/3″][vc_service icon_name= »li_photo » title= »Parallax background » icon_position= »sb_center » icon_shape= »service-hexagon » css_animation= »bottom-to-top » icon_color= »#ffffff » bg_color= »#bcd44f » type= »linecons » icon_fontawesome= »fa fa-adjust » icon_openiconic= »vc-oi vc-oi-dial » icon_typicons= »typcn typcn-adjust-brightness » icon_entypo= »entypo-icon entypo-icon-note » icon_linecons= »vc_li vc_li-photo » icon_simplelineicons= »icon-user-unfollow »]Set custom parallax background for each row and even row inside another row. Set the speed of parallax effect and create stunning website sections.[/vc_service][vc_empty_space height= »50px »][/vc_column][vc_column width= »1/3″][vc_service icon_name= »li_search » title= »Zooming backgound » icon_position= »sb_center » icon_shape= »service-hexagon » css_animation= »bottom-to-top » icon_color= »#ffffff » bg_color= »#bcd44f » css_animation_delay= »delay-200″ type= »linecons » icon_fontawesome= »fa fa-adjust » icon_openiconic= »vc-oi vc-oi-dial » icon_typicons= »typcn typcn-adjust-brightness » icon_entypo= »entypo-icon entypo-icon-note » icon_linecons= »vc_li vc_li-search » icon_simplelineicons= »icon-user-unfollow »]Backgrounds can also scale on mouse scroll. Set the scale speed or use it together with parallax effect for syncronized animation.[/vc_service][vc_empty_space height= »50px »][/vc_column][vc_column width= »1/3″][vc_service icon_name= »li_params » title= »Background overlays » icon_position= »sb_center » icon_shape= »service-hexagon » css_animation= »bottom-to-top » icon_color= »#ffffff » bg_color= »#bcd44f » css_animation_delay= »delay-400″ type= »linecons » icon_fontawesome= »fa fa-adjust » icon_openiconic= »vc-oi vc-oi-dial » icon_typicons= »typcn typcn-adjust-brightness » icon_entypo= »entypo-icon entypo-icon-note » icon_linecons= »vc_li vc_li-params » icon_simplelineicons= »icon-user-unfollow »]Two types of overlay are available for every background – color and pattern. You can also choose the opacity of each. Go on, try them![/vc_service][vc_empty_space height= »50px »][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »140px » bottom= »140px » bg_image= »3166″ parallax_bg= »parallax-bg » speed= »0.20″ bg_cover= »cover » bg_position= »Center bottom » content_fadeout= »content-fadeout » fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » overlay_color= »rgba(31,30,53,0.55) » scale_bg= »scale-bg » bg_repeat= »no-repeat » row_align= »align-middle » scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ full_content_width= » » bg_color= »#3e4058″ parallax_video= » » row_mobile_style= » » row_show_on= » » slope_top= » » slope_bottom= » »][vc_column width= »1/1″][vc_heading h_size= »h-extralarge » title= »Content animation » subtitle= »Content will slide down and fade out as you scroll » divider_type= »div-narrow-thick » size= »small » divider_color= »#bcd44f » alignment= »align-center » title_color= »#ffffff » subtitle_color= »#ffffff »][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »60px » bottom= »60px » bg_color= »#2b2b37″ speed= »0.20″ fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » textalign= »center » row_align= »align-middle » scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ overlay_color= »rgba(24,22,57,0.32) »][vc_column width= »1/1″][vc_column_text el_class= »max-width »]TiLT IS NOT JUST ANOTHER WORDPRESS THEME[/vc_column_text][vc_empty_space height= »10px »][vc_separator style= »simple » color= »#bcd44f » width= »60px » thickness= »4px » size= »large » align= »none »][vc_empty_space height= »20px »][vc_column_text el_class= »max-width »]TiLT is fast, easy to learn and fantastic to use WordPress theme. Get started and you will fall in love with usability and customizability that TiLT offers.[/vc_column_text][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »0px » bottom= »0px » speed= »0.20″ parallax_video= »parallax-bg » video_speed= »0.20″ overlay_pattern_op= »0.2″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » row_align= »align-middle » scale_speed= »0.20″ row_height_type= »fixed_height » height= »600px » overlay_color= »rgba(31,30,53,0.4) » full_content_width= » » content_fadeout= » » bg_color= »#3e4058″ parallax_bg= » » scale_bg= » » bg_cover= » » row_mobile_style= » » row_show_on= » » slope_top= » » slope_bottom= » »][vc_column width= »1/1″][vc_heading h_size= »h-extralarge » title= »Parallax video background » title_color= »#ffffff » subtitle= »Perfectly responsive » subtitle_color= »#ffffff » divider_type= »div-narrow » size= »small » alignment= »align-center »][/vc_column][/vc_row][vc_row row_align= »align-middle » top= »100px » bottom= »30px » row_separator= »no-separator » bg_color= »#ffffff » speed= »0.20″ scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » textalign= »center »][vc_column width= »1/1″][vc_column_text]Buy now and try yourself![/vc_column_text][/vc_column][/vc_row][vc_row row_align= »align-middle » top= »0px » bottom= »100px » row_separator= »no-separator » bg_color= »#ffffff » speed= »0.20″ scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » textalign= »center »][vc_column width= »1/3″][/vc_column][vc_column width= »1/3″][vc_button title= »Explore more » size= »btn-large » icon_pos= »icon-left » color= »btn_black » border_radius= »sharp » button_width= » btn_fw » button_style= »minimal_style »][/vc_column][vc_column width= »1/3″][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »0px » bottom= »0px » parallax_bg= »parallax-bg » speed= »0.20″ bg_cover= »cover » bg_repeat= »no-repeat » bg_position= »Right bottom » fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » full_content_width= »row-inner-full » bg_image= »3131″ row_show_on= »hide_mobile_landscape,hide_mobile_portrait » row_align= »align-middle » scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ overlay_color= »rgba(31,30,53,0.4) » content_fadeout= » » bg_color= »#3e4058″ scale_bg= » » parallax_video= » » row_mobile_style= » » slope_top= » » slope_bottom= » »][vc_column width= »1/2″ slope_left_dir= »slope-left-top » slope_left_width= »100px » slope_right_dir= »slope-right-top » slope_right_width= »100px »][vc_empty_space height= »200px »][/vc_column][vc_column width= »1/2″ css= ».vc_custom_1424122783798{padding-top: 60px !important;padding-right: 60px !important;padding-bottom: 60px !important;padding-left: 30px !important;background-color: #f4f4f3 !important;} » slope_left_dir= »slope-left-top » slope_left_width= »100px » slope_right_dir= »slope-right-top » slope_right_width= »100px » slope_left= »slope-left » slope_left_color= »#f4f4f3″][vc_heading title= »Picture with content » divider= »div-between » divider_type= »div-narrow-thick » size= »small » divider_color= »#bcd44f » alignment= »align-left » css_animation= »right-to-left »][vc_empty_space height= »20px »][vc_column_text css_animation= »right-to-left »]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/vc_column_text][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »0px » bottom= »0px » parallax_bg= »parallax-bg » speed= »0.20″ bg_cover= »cover » bg_repeat= »no-repeat » bg_position= »Right bottom » fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » full_content_width= »row-inner-full » bg_image= »3131″ row_show_on= »hide_mobile_landscape,hide_mobile_portrait » row_align= »align-middle » scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ overlay_color= »rgba(31,30,53,0.4) » content_fadeout= » » bg_color= »#3e4058″ scale_bg= » » parallax_video= » » row_mobile_style= » » slope_top= » » slope_bottom= » »][vc_column width= »1/2″ css= ».vc_custom_1424122792961{padding-top: 60px !important;padding-right: 30px !important;padding-bottom: 60px !important;padding-left: 60px !important;background-color: #f4f4f3 !important;} » slope_left_dir= »slope-left-top » slope_left_width= »100px » slope_right_dir= »slope-right-bottom » slope_right_width= »100px » slope_right= »slope-right » slope_right_color= »#f4f4f3″][vc_heading title= »Combine them with slopes » divider= »div-between » divider_type= »div-narrow-thick » size= »small » divider_color= »#bcd44f » alignment= »align-right » css_animation= »left-to-right »][vc_empty_space height= »20px »][vc_column_text css_animation= »left-to-right »]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[/vc_column_text][/vc_column][vc_column width= »1/2″ slope_left_dir= »slope-left-top » slope_left_width= »100px » slope_right_dir= »slope-right-top » slope_right_width= »100px »][vc_empty_space height= »200px »][/vc_column][/vc_row][vc_row row_separator= »no-separator » top= »0px » bottom= »0px » parallax_bg= »parallax-bg » speed= »0.20″ bg_cover= »cover » bg_repeat= »no-repeat » bg_position= »Right bottom » fadeout_speed= »0.50″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » full_content_width= »row-inner-full » bg_image= »3131″ row_show_on= »hide_on_normal_screen,hide_tablet_landscape,hide_tablet_portrait » overlay_color= »rgba(0,0,0,0.6) » row_align= »align-middle » bg_type= »image » scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ bg_color= »rgba(31,30,53,0.4) »][vc_column width= »1/1″ css= ».vc_custom_1424152602207{padding-top: 60px !important;padding-right: 30px !important;padding-bottom: 60px !important;padding-left: 60px !important;} » slope_left_dir= »slope-left-top » slope_left_width= »100px » slope_right_dir= »slope-right-bottom » slope_right_width= »100px » slope_right= »slope-right » slope_right_color= »#f4f4f3″][vc_empty_space height= »60px »][vc_heading title= »Picture with content » divider= »div-between » divider_type= »div-narrow-thick » size= »small » divider_color= »#bcd44f » alignment= »align-center » css_animation= »left-to-right » title_color= »#ffffff »][vc_empty_space height= »20px »][vc_column_text css_animation= »left-to-right »]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[/vc_column_text][vc_empty_space height= »60px »][/vc_column][/vc_row][vc_row row_align= »align-middle » top= »60px » bottom= »30px » row_separator= »no-separator » bg_color= »#bcd44f » speed= »0.20″ scale_speed= »0.20″ video_speed= »0.20″ overlay_pattern_op= »0.2″ slope_top_pos= »slope-top-inside » slope_top_dir= »slope-top-left » slope_top_height= »100px » slope_bottom_pos= »slope-bottom-inside » slope_bottom_dir= »slope-bottom-left » slope_bottom_height= »100px » textalign= »center »][vc_column width= »2/3″][vc_column_text]

Inspired by TiLT? Get your copy now!

[/vc_column_text][vc_empty_space height= »30px »][/vc_column][vc_column width= »1/3″][vc_empty_space height= »6px »][vc_button title= »Purchase » size= »btn-large » icon_pos= »icon-left » color= »btn_black » border_radius= »round »][/vc_column][/vc_row]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *