UIkit之滚动监听+动画特效

框架引入CSS和JS：

<!--引入css和js的路径请根据自己的实际情况确定 -->

<!-- css -->
<link rel="stylesheet" type="text/css" href="uikit/css/uikit.css">

<!-- js -->
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="uikit/js/uikit.js"></script>
<!-- ps:jquery-1.12.4最好在框架必须引入的uikit.js上面-->

主要实现代码：

<div class="uk-margin-large-top"><!--uk-margin-large-top设置上边距 -->
    <div class="uk-width-medium-2-3 uk-container-center"><!--uk-container-center固定容器大小 -->
	<div class="uk-grid uk-grid-medium" data-uk-scrollspy="{cls:'uk-animation-fade uk-invisible', target:'> div > .uk-panel', delay:300, repeat: true}">
            <!--设置其监听动画，动画样式可修改（这里用的uk-animation-fade：淡入样式）；target:'> div > .uk-panel'是指当前目录下的div下的class为.uk-panel元素经行特效；delay:300是指展示的块延时300毫秒；repeat: true是指元素每次出现在视窗中时，都应用这个类 -->
            <!-- 具体微末细节请参考官方文档-->

             <div class="uk-width-medium-1-4">
                 <div class="uk-panel uk-panel-box uk-panel-box-primary uk-scrollspy-init-inview uk-scrollspy-inview uk-invisible">
                <!--uk-panel-box:面板边框，uk-panel-box-primary：面板背景颜色，uk-scrollspy-init-inview uk-scrollspy-inview：初始化视图 ，uk-invisible：隐藏该元素-->
                   box1
                  </div>
             </div>

             <div class="uk-width-medium-1-4">
                  <div class="uk-panel uk-panel-box uk-panel-box-primary uk-scrollspy-inview uk-invisible">
                    box2	
                  </div>
             </div>

             <div class="uk-width-medium-1-4">
                <div class="uk-panel uk-panel-box uk-panel-box-primary uk-scrollspy-inview uk-invisible">
                    box3
                </div>
             </div>

             <div class="uk-width-medium-1-4">
                <div class="uk-panel uk-panel-box uk-panel-box-primary uk-scrollspy-inview uk-invisible">
                    box4	
                </div>
             </div>

            </div>
	</div>
</div>

 运行结果：

UIkit官网地址：http://www.getuikit.net/docs/slideshow.html

感谢亲哟?