Scrollspy
[vc_row][vc_column offset=”vc_col-lg-offset-2 vc_col-lg-8″][vc_custom_heading text=”Trigger events and animations while scrolling your page.” font_container=”tag:h2|text_align:center” use_theme_fonts=”yes” el_class=”uk-h1″][ete_vc_introtext]The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element.[/ete_vc_introtext][vc_empty_space height=”40px”][/vc_column][/vc_row][vc_row][vc_column][vc_row_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Fade” scrollspy=”yes”][vc_column_text]
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Scale up” scrollspy=”yes” scrollspy_class=”uk-animation-scale-up”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Scale down” scrollspy=”yes” scrollspy_class=”uk-animation-scale-down”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Slide top” scrollspy=”yes” scrollspy_class=”uk-animation-slide-top”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Slide bottom” scrollspy=”yes” scrollspy_class=”uk-animation-slide-bottom”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Slide right” scrollspy=”yes” scrollspy_class=”uk-animation-slide-right”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/4″ panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Slide left” scrollspy=”yes” scrollspy_class=”uk-animation-slide-left”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column offset=”vc_col-lg-offset-2 vc_col-lg-8″][vc_empty_space height=”40px”][vc_custom_heading text=”Groups” font_container=”tag:h2|text_align:center” use_theme_fonts=”yes” el_class=”uk-h1″][ete_vc_introtext]You can also group scrollspy elements, so you won’t have to apply the data attribute to each of them. When using a delay it will be applied cumulatively to the items within the row that scrolls into view. The delay will be resetted for the next row within the group when it scrolls into view.[/ete_vc_introtext][vc_empty_space height=”40px”][/vc_column][/vc_row][vc_row scrollspy=”yes” scrollspy_delay=”150″][vc_column width=”1/6″][vc_row_inner][vc_column_inner panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Item”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_row_inner][vc_column_inner panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Item”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_row_inner][vc_column_inner panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Item”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_row_inner][vc_column_inner panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Item”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_row_inner][vc_column_inner panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Item”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_row_inner][vc_column_inner panel=”uk-panel uk-panel-box uk-panel-box-primary” panel_title=”Item”][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]