ScrollReveal1
2017-02-12 本文已影响68人
西巴撸
有什么技术性的问题 欢迎大家留言 !
< ! ---------- HTML ------------ >
<div class="center">
<ul>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr self"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
</ul>
<ul>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr self"><a href="javascript:;"></a></li>
</ul>
<ul>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr self"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
</ul>
<ul>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr"><a href="javascript:;"></a></li>
<li class="sr self"><a href="javascript:;"></a></li>
</ul>
</div>
< ! --------- Style -------------- >
<style>
* {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
div.center {
width: 1230px;
margin: 0 auto;
}
ul {
float: left;
}
ul {
margin-right: 10px;
}
ul:last-child {
margin-right: 0;
}
ul li {
margin-bottom: 10px;
}
</style>
< ! --------- JavaScript ------- >
<script>
window.onload = function () {
// 如果需要上下滚动每次都做动画 reset的值必须为true 默认为false
// 如果只需要做一次滚动动画的话,可以不要这句代码
var config = {
reset: true
}
// 自定义参数配置,让每一个动画多样化
var self = {
reset: true, // 滚动鼠标时，动画开关
origin: 'left', // 动画开始的方向
duration: 500, // 动画持续时间
delay: 0, // 延迟
rotate: {x: 100, y: 200, z: 300}, // 过度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.2, //缩放
easing: 'linear', // 缓动'ease', 'ease-in-out'，'linear'
}
window.sr = ScrollReveal();
sr.reveal('.sr', config);
sr.reveal('.self', self);
}
</script>
< ! --------- 效果展示 ---------- >
**ScrollReveal 案例一**
