小米官网商品详细页的元素动画效果的实现方式

    如题,小米官网的商品详细页中,一些图片在每次进入浏览器视窗范围时,都会有位移+显现的动画效果.

    大约为:top|bottom|left|right属性与opacity属性的变化.

    如果只是首次显示元素时显示动画,那么实现起来就简单的多了.如下代码:

1 1111

    但是,单纯用CSS3实现出来的效果,只有在元素第一次加载时展示动画,没有进视窗范围的局限,更无法每次进入视窗均有动画的效果

    于是乎,找到了第三方插件ScrollReveal.js

    这是可以让元素的动画直到进入视窗范围之时才开始动画效果,并且可以设置每次进入时均重新动画.

    百度源码和API:

1 开始

1.1 基本

导入js

<s cript type="text/javas cript" src="//cdn.bootcss.com/scrollReveal.js/3.3.2/scrollreveal.js">s cript>

 

reveal()方法是主要的API,通过该方法创建和管理CSS动画

<h1>1111h1>

<h3>2222h3>

window.sr = ScrollReveal();

sr.reveal("h1");

sr.reveal("h3");

 

1.2 连点式

<h1>1111h1>

<h3>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 序列动画

<ul>

<li class="box"><h3>33333h3>li>

<li class="box"><h3>33333h3>li>

<li class="box"><h3>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

});