页面滚动触发动画插件ScrollReveal.js

页面滚动触发动画插件ScrollReveal.js

ScrollReveal.js是一款用来展示页面动画的原生JavaScript插件,它提供
0
  • 详情内容
  • 留言点评

ScrollReveal.js是一款用来展示页面动画的原生JavaScript插件,它提供比较简单的方法创建和维护多元素进入视角,并触发、消失。 这款页面动画插件常用于高品质网页特效,随鼠标滚轮监听位置不断加载动画效果炫酷网页制作特效插件JS代码。需使用用支持HTML5+CSS3主流浏览器预览效果。(兼容测试:FireFox、Chrome、Safari、Opera、IE10+等支持HTML5/CSS3浏览器)

使用方法:

1、调用JS插件代码:

<script src="js/scrollreveal.min.js"></script>

2、添加HTML代码:

html内容需放在<body></body>之间。

3、初始化代码包含JS参数配置:

<script>    
(function(){    
var config = {    
viewFactor : 0.15,    
duration   : 800,    
distance   : "0px",    
scale      : 0.8,    
}    
window.sr = new ScrollReveal(config)    
})()    
</script>

ScrollReveal3.x.js参数设置说明:

origin: 'bottom', //起始位置,可选值 'bottom', 'left', 'top', 'right'

distance: '20px', //移动距离,CSS单位均可用,如'5rem', '10%', '20vw'

duration: 500, //动画持续时间,毫秒

delay: 0, //动画延迟时间,毫秒

rotate: { x: 0, y: 0, z: 0 }, //旋转角度

opacity: 0, //透明度值

scale: 0.9, //缩放比例

easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)', //动画速度曲线,可选值'ease', 'ease-in-out', 'linear'以及自定义贝塞尔曲线

container: window.document.documentElement, //承载容器

mobile: true, //是否支持手机等移动端

reset: false, //是否重复触发动画

useDelay: 'always', //延迟定义,可选值'always','once','onload',分别为总是、仅第一次显示、仅第一次加载

viewFactor: 0.2, //动画元素视窗可见程度

viewOffset: { top: 0, right: 0, bottom: 0, left: 0 }, //容器边界设置

以下是回调函数:

beforeReveal: function (domEl) {},

beforeReset: function (domEl) {},

afterReveal: function (domEl) {},

afterReset: function (domEl) {}

123.JPG

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看