【某元素每次进入视窗时均有动画效果】小米官网商品详细页的元素动画效果的实现方式
如题,小米官网的商品详细页中,一些图片在每次进入浏览器视窗范围时,都会有位移+显现的动画效果.
大约为:top|bottom|left|right属性与opacity属性的变化.
如果只是首次显示元素时显示动画,那么实现起来就简单的多了.如下代码:
1
1111
但是,单纯用CSS3实现出来的效果,只有在元素第一次加载时展示动画,没有进视窗范围的局限,更无法每次进入视窗均有动画的效果
于是乎,找到了第三方插件ScrollReveal.js
这是可以让元素的动画直到进入视窗范围之时才开始动画效果,并且可以设置每次进入时均重新动画.
百度源码和API:
1开始
1.1基本
导入js
s cript>
reveal()方法是主要的API,通过该方法创建和管理CSS动画
1111h1>
2222h3>
window.sr=ScrollReveal();
sr.reveal("h1");
sr.reveal("h3");
1.2连点式
1111h1>
2222h3>
window.sr=ScrollReveal().reveal("h1,h3")
2配置
2.1基本
通过配置ScrollReveal()对象创建基本属性,再通过reveal()方法增改特例属性
window.sr=ScrollReveal({reset:true});//是否重复动画
sr.reveal("h1",{origin:'top'});//动画进入方向
sr.reveal("h3",{delay:500});//动画延迟
2.2参数说明
2.2.1 origin
默认值:'bottom'
元素进入方向,取值范围:['top','bottom','left','right']
若不想让元素位移,可将distance的值设为0
2.2.2 distance
默认值:'20px'
元素进入位移距离,支持所有css长度
['20px','5rem','10%','20vw'...]
2.2.3 duration
默认值:500
元素动画时长,单位毫秒
2.2.4 delay
默认值:0
元素动画延迟,单位毫秒
2.2.5 rotate
默认值:{x:0,y:0,z:0}
元素动画前的角度,动画将移动至0
具体参考CSS3:rotateX(),rotateY() rotateZ()
2.2.6 opacity
默认值:0
元素动画前的透明度,动画将变化至1
2.2.7 scale
默认值:1
元素动画前的大小,动画将变化值1
2.2.8 easing
默认值:'cubic-bezier(0.6,0.2,0.1,1)'(贝塞尔曲线什么鬼)
动画播放速度
可选值:ease,ease-in-out,linear等
2.2.9 container
默认值:window.document.documentElement
对Dom元素的封装方式
2.2.10 mobile
默认值:true
值:true|false
控制动画移动(未测试出效果)
2.2.11 reset
默认值:false
值:true|false
再次显示元素时是否重新动画
true:每次元素出现在视窗范围内时再次播放动画
false:只有第一次元素出现在视窗范围内时才播放动画
2.2.12 useDelay
默认值:'always'
值:'always'|'once'|'onload'
当reset:true时使用
always:每次动画都有延迟时间
once:只有第一次有延迟时间,当元素第二次出现在视窗时无延迟立即开始动画
onload:加载时有延迟时间
2.2.13 viewFactor
2.2.14 viewOffset
2.2.15 beforeReveal
默认值:function(ele){}
元素移入视窗,css渲染之前触发
2.2.16 beforeReset
默认值:function(ele){}
元素移除视窗,css渲染消失时触发
2.2.17 afterReveal
默认值:function(ele){}
css渲染完成后
2.2.18 afterReset
默认值:function(ele){}
元素退出时css渲染后
3高级
3.1序列动画
33333h3>li>
33333h3>li>
33333h3>li>
ul>
window.sr=ScrollReveal().reveal('.box',{ duration:500},100);
reveal()方法可以带一个整形参数Num,使一个元素集合的每一个元素延迟上一个元素Num毫秒播放动画
3.2重写配置
window.sr=ScrollReveal({
scale:1
});
sr.reveal('h1',{
scale:2
});
扣扣：120/342/833验证:QQ
~��Y�=
a
