& & & & &简介和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果，并且因为不支持一些属性或方法会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。浏览器兼容IE6+ ?Chrome ?Firefox ?Opera ?Safari ?基本方法1、引入文件&script&src=&js/scrollReveal.js&&&/script&2、HTML&div&data-scroll-reveal&helloweb.wang&/div&必须给元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如：&div&data-scroll-reveal=&enter&left&and&move&50px&over&1.33s&&helloweb.wang&/div&
&div&data-scroll-reveal=&enter&from&the&bottom&after&1s&&Hello&world!&/div&
&div&data-scroll-reveal=&wait&2.5s&and&then&ease-in-out&100px&&iPhone&6&/div&3、JavaScriptwindow.scrollReveal&=&new&scrollReveal();
//或者，elem&为动画元素的任何级别的父元素
window.scrollReveal2&=&new&scrollReveal({elem:&document.getElementById('srcontainer')});data-scroll-reveal属性上面说了可以自定义 data-scroll-reveal 属性，下面来看看该属性的关键词和值（可选）。enter说明: 动画起始方向值: top | right | bottom | leftmove说明: 动画执行距离值: 数字，以 px 为单位over说明: 动画持续时间值: 数字，以秒为单位after/wait说明: 动画延迟时间值: 数字，以秒为单位填充（可选）可以在 data-scroll-reveal&属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：fromtheandthenbutwith,也就是可以像这样写 HTML：&div&data-scroll-reveal=&wait&0.3s,&then&enter&left&and&move&40px&over&2s&&helloweb.wang&/div&
&div&data-scroll-reveal=&enter&from&the&left&after&0.3s,&move&40px,&over&2s&&Hello&world!&/div&
&div&data-scroll-reveal=&enter&left&move&40px&over&2s&after&0.3s&&iPhone&6&/div&
&div&data-scroll-reveal=&enter&left,&move&40px,&over&2s,&wait&0.3s&&I&love&you&/div&高级用法自定义默认值可以更改 scrollReveal.js 的默认配置，如：var&config&=&{
&&&&after:&'0s',
&&&&enter:&'bottom',
&&&&move:&'24px',
&&&&over:&'0.66s',
&&&&easing:&'ease-in-out',
&&&&viewportFactor:&0.33,
&&&&reset:&false,
&&&&init:&true
window.scrollReveal&=&new&scrollReveal(config);动态HTMLscrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素，并进行初始化，所以对于动态加载的元素，可以这样操作：var&config&=&{
&&&&enter:&'bottom',
&&&&move:&'40px',
&&&&over:&'0.16s',
&&&&reset:&true,
&&&&init:&false
window.scrollReveal&=&new&scrollReveal(config);
var&data&=&{newElementHtml:&'&div&data-scroll-reveal&dowebok.com&/div&'};
var&container&=&document.getElementById('#container');
container.innerHTML(data.newElementHTML);
scrollReveal.init();
转载请注明： &
欢迎阅读：诚挚的邀请您加入“helloweb” 学习交流群：&&nbsp共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！Server error
Server error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.十年专注于网站建设、系统开发，低调、有情怀的互联网软件服务商！
天宏网络发扬“+”时代精神，基于互联网品牌服务、电子商务运营服务及平台软件开发，用整体解决方案为您实现商业价值。天宏网络正年轻，精彩绽放。期待与您开启全新的旅程。
专注互联网+整体技术解决方案，在多个行业积累丰富的业务实践：零售及电商、消费品、电子通信、网络媒体、本地生活服务、汽车后市场、移动互联网、广告公关、影视传媒、金融投资、政府机关等
10年来，服务1000+客户,我们只做一件事 :基于互联网+技术解决方案，力求视觉与交互的完美契合，以规范的流程和专注的态度，为您提供全方位的应用服务。
昆明天宏网络科技有限公司是一家专业从事网站建设、互联网+解决方案咨询、规划、建设和服务的软件企业和高新技术企业。为客户提供专业的电子商务基础平台解决方案、电子政务建设解决方案、移动互联应用开发。在与合作客户共同成长的过程中，积累了信息化规划设计、标准建设、系统集成、项目实施、运行维护的经验，为政企信息化建设提供完整的解决方案并取得了良好的效果。
网站做好了，如何进行有效的网站推广？多年的实践让我们积累了丰富的网站建设和优化知识！
wow.js实现上下滚动页面都有效果，wow.js重复执行？
在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
但是大家都直接wow.js不能像RevealScroll一样，当网页上下滚动页面的时候都有效果，wow.js只能实现一次，怎么样让wow.js也能上下滚动的时候有效果呢，经天宏网络公司修改了核心代码后已经实现效果。下面给出下载地址，提供给大家直接使用！
下载地址：http://www.yngod.com/script/wow/wow.min2.js
版权所有： 转载请注明出处
400-040-9910（服务时间：9:00-22:00）
云南省昆明市西山区万达广场5栋号
contact#yngod.cn（请将#更换为@）
扫描微信公众号二维码
获取最新动态css - How to use scrollRevealJS alongside AnimateCSS? - Stack Overflow
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I love both the
libraries for animations, however, I would like to use them both on one element. For example, I have a div &div class="animated fadeInDown" data-sr='enter top reset'&Lorem Ipsum&/div&. For some reason, adding the Animate CSS classes animated fadeInDown ignores scrollReveal's data attribute. How am I able to use both the classes and data attributes of both libraries?
EDIT: I forgot to mention that I have the following style applied:
[data-sr] { visibility: }
1,58232441
The ScrollRevealJS library does not provide default functionality to work with AnimateCss. Instead of ScrollRevealJS you can use Wow.js library – it works with AnimateCss. The problem with Wow.js is that a reset option is not available.
6,48222234
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled　　ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加&data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。
本文链接：
编译来源：
未经允许不得转载： &