scrollReveal.js(滚动实现加载效果)

最新推荐文章于 2023-08-16 16:44:39 发布
最新推荐文章于 2023-08-16 16:44:39 发布
阅读量2.3k 收藏 1
点赞数 1 
<!doctype html>
<html lang="zh-CN">
<head>
    <title>scrollReveal.js演示2_dowebok</title>
    <meta charset="utf-8">
    <style>
        * { margin: 0; padding: 0;}
        .dowebok { font-family: "Microsoft Yahei";}
        .dowebok h1 { margin: 60px 0 30px; font-size: 60px; font-weight: 500; text-align: center;}
        .dowebok-explain { margin-bottom: 80px; font-size: 14px; text-align: center;}
        .dowebok .list { width: 1064px; margin: 0 auto; overflow: hidden; zoom: 1;}
        .dowebok .list ul { float: left; width: 246px; margin: 0 10px; list-style-type: none;}
        .dowebok .list li { margin-bottom: 20px;}
        .dowebok .list img { width: 100%; border-radius: 5px; vertical-align: top;}
    </style>
</head>

<body class="dowebok">
<h1>scrollReveal.js演示2</h1>

<p class="dowebok-explain">页面滚动显示动画效果，IE10 以下无效</p>

<div class="list">
    <ul>
        <li data-scroll-reveal="enter top"><img src="http://cdn.dowebok.com/134/images/i2/1.jpg" alt=""></li>
        <li data-scroll-reveal="enter right after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/2.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"><img src="http://cdn.dowebok.com/134/images/i2/3.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 0.5s and move 200px"><img src="http://cdn.dowebok.com/134/images/i2/4.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 100px"><img src="http://cdn.dowebok.com/134/images/i2/5.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"><img src="http://cdn.dowebok.com/134/images/i2/6.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/7.jpg" alt=""></li>
        <li data-scroll-reveal="enter left"><img src="http://cdn.dowebok.com/134/images/i2/8.jpg" alt=""></li>
    </ul>
    <ul>
        <li data-scroll-reveal="enter top"><img src="http://cdn.dowebok.com/134/images/i2/9.jpg" alt=""></li>
        <li data-scroll-reveal="enter left"><img src="http://cdn.dowebok.com/134/images/i2/10.jpg" alt=""></li>
        <li data-scroll-reveal="enter top"><img src="http://cdn.dowebok.com/134/images/i2/11.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/12.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 100px"><img src="http://cdn.dowebok.com/134/images/i2/13.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 0.5s and move 200px"><img src="http://cdn.dowebok.com/134/images/i2/14.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/15.jpg" alt=""></li>
        <li data-scroll-reveal="enter right after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/16.jpg" alt=""></li>
    </ul>
    <ul>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/17.jpg" alt=""></li>
        <li data-scroll-reveal="enter left"><img src="http://cdn.dowebok.com/134/images/i2/18.jpg" alt=""></li>
        <li data-scroll-reveal="enter right after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/19.jpg" alt=""></li>
        <li data-scroll-reveal="enter top"><img src="http://cdn.dowebok.com/134/images/i2/20.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 100px"><img src="http://cdn.dowebok.com/134/images/i2/21.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 0.5s and move 200px"><img src="http://cdn.dowebok.com/134/images/i2/22.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"><img src="http://cdn.dowebok.com/134/images/i2/23.jpg" alt=""></li>
        <li data-scroll-reveal="enter right after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/24.jpg" alt=""></li>
    </ul>
    <ul>
        <li data-scroll-reveal="enter left"><img src="http://cdn.dowebok.com/134/images/i2/25.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/26.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 100px"><img src="http://cdn.dowebok.com/134/images/i2/27.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 0.5s and move 200px"><img src="http://cdn.dowebok.com/134/images/i2/28.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/29.jpg" alt=""></li>
        <li data-scroll-reveal="enter left"><img src="http://cdn.dowebok.com/134/images/i2/30.jpg" alt=""></li>
        <li data-scroll-reveal="enter top over 3s after 0.5s"><img src="http://cdn.dowebok.com/134/images/i2/31.jpg" alt=""></li>
        <li data-scroll-reveal="enter bottom over 1s and move 100px"><img src="http://cdn.dowebok.com/134/images/i2/32.jpg" alt=""></li>
    </ul>
</div>

<script src="http://cdn.dowebok.com/134/js/scrollReveal.js"></script>
<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        (function(){
            window.scrollReveal = new scrollReveal({reset: true});
        })();
    };
</script>








</body>
</html>



农民工-涯
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
scrollReveal.js插件
01-18
类似wow特效插件。向下向上翻滚均能触发。。。。。。。。。
scrollreveal.min.js
08-28
和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。 虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。 IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果，并且因为不支持一些属性或方法会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
meteor-scrollreveal:为 Meteor 打包的 scrollReveal.js。 scrollReveal.js 是 Julian Lloyd 的一个开源项目，它使用自然语言关键字作为 data-sr 属性在元素进入视口时显示元素
06-22
流星卷轴揭示 为 Meteor 打包的 scrollReveal.js。 scrollReveal.js 是 Julian Lloyd 的一个开源项目，它使用自然语言关键字作为 data-sr 属性在元素进入视口时显示元素。
scrollreveal.js.zip
05-13
scrollreveal.js_V0.1.3和V4.0.6，一款优秀的前端页面滚动动画插件，操作简单快捷
scrollreveal:scrollreveal.js ui 网站
05-31
滚动显示 scrollreveal.js ui 网站
scrollreveal.js用于随页面滚动执行动画
qq_42634441的博客
05-17 453
用于随页面滚动执行动画，无须编写监听滚动代码，绑定对应dom即可在改动到该dom时执行预设动画效果。下载scrollreveal.min.js。
scrollReveal.js页面滚动动画插件的使用
qq_41558265的博客
06-25 2783
scrollReveal.js简介： scrollReveal.js是一款js的页面滚动动画插件，兼容PC端和移动端。主要功能是当页面滚动到浏览器可视窗口内时为元素添加相应的进入动画。 scrollReveal.js不依赖animate.css以及Jquery。但它的动画也是用css3创建的，因此不支持ie10以下的浏览器。 scrollRever.js官方网址：https://scroll...
使用grid布局解决flex布局最后一行不足的问题
qcc0716的博客
08-13 2644
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
scrollReveal.js
jahdgja的博客
03-12 350
scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次； 特点： scrollReveal同时兼容PC端和移动端； 0依赖（不依赖于jQuery，也不依赖于animate.css）; 定制性高，使用简单方便快捷。 使用 1.github中搜索scrollReveal，下载 2.导入动画库<script src="scrollreveal.js"></scrip
wow.js & scrollReveal.js 动画库 使用详解以及优劣
柑橘乌云_
04-28 2231
​ wow.js 依赖animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.js和scrollreveal.js对比1 都不依赖jquery；2 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；3 WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件;4 WOW.js 依赖 animate.css使用，动画效果更多
nuxtjs中使用scrollreveal.js结合animate.css实现页面进入视口即播放动画
最新发布
Lsir1998的博客
08-16 530
nuxtjs中使用scrollreveal.js结合animate.css实现页面进入视口即播放动画
scrollReveal.js网页动效插件
aoli5022的博客
10-20 194
scrollReveal.js网页动效插件，可以使网页滚动的时候页面元素动起来，产生炫酷的动态效果，吸引用户眼球，对用户体验有一定的提升。 使用scrollReveal.js非常简单，你只需在页面引入scrollReveal.js文件：<script src="js/scrollreveal.js"></script>（相关文件可到github站下载），并在页面...
Vue使用scrollrevealjs
豪先生的博客
04-28 1013
1、安装vuescrollreveal npm install --save vue-scroll-reveal 2、在main.js里面引用 import VueScrollReveal from 'vue-scroll-reveal'; Vue.use(VueScrollReveal,{ class: 'v-scroll-reveal', duration: 1000, scale: 1, distance: '0px', reset:true, mobile: false, useDe
scrollReveal.js – 页面滚动显示动画JS
阳光下的哈巴狗
06-29 594
简介 scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。 动态HTML scrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素，并进行初始化，所以对于动态加载的元素，可以这样操作： var config = { enter: 'bottom', move: '40px', over: '0.16s', reset: true, ini
JS 流行库（八）：ScrollReveal
0lonely0
09-28 552
JS 流行库（八）：ScrollReveal
ScrollReveal-元素随页面滚动产生动画的js插件
hellogril前端库
11-17 1577
简介 和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。 虽然 scrollReveal.js 不依赖 ...
scrollReveal.js的用法
qq_41889034的博客
06-20 2400
1、引入文件 <script src="js/scrollReveal.js"></script> 2、HTML <div data-scroll-reveal>dowebok.com</div> 必须给元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如： ...
scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了（我的Hexo next博客引发的问题）...
as403045314的博客
03-03 568
文章目录时间背景问题解决 个人博客：https://mmmmmm.me 源码：https://github.com/dataiyangu/dataiyangu.github.io 时间 2019.3.3 背景 之前给自己加了护眼色的小功能，本来应该是这样的： 今天发现，点击护眼色后期初是没问题的，但是只要一滚动就会变成下面这样。 问题解...
用scrollReveal.js揭示元素
11-24 153
CSS是语言，我们自1996年创立今天都使用在网络上的风格的网站，我们能够使用CSS创建真棒效果和它的功能更强大日常的感谢成为引进形状，软硬盒，和动画。 这当然是真实的除了著名的笑话，我们可以创建动画，但直到几年前，我们不能轻易垂直居中元素（这仍然是正确的在Internet Explorer的一些版本）等等。 尽管CSS是完成某些任务，从现在开始很长一段时间的语言，JavaScript已被用于...
vue-cli项目中用vue2引用中scrollreveal结合animate.css完成动画实例
03-27
1. 安装scrollreveal和animate.css ```bash npm install scrollreveal animate.css --save ``` 2. 在main.js中引入 ```js import ScrollReveal from 'scrollreveal' import 'animate.css' ``` 3. 在组件中使用 ```vue <template> <div class="container"> <div class="box" ref="box"> <h2 class="title">ScrollReveal + Animate.css</h2> <p class="subtitle">Scroll down to see the magic happen!</p> </div> </div> </template> <script> export default { name: 'App', mounted() { const sr = ScrollReveal() sr.reveal('.box', { duration: 2000, origin: 'top', distance: '200px', delay: 500, easing: 'ease', reset: true, viewFactor: 0.5, afterReveal: (el) => { el.classList.add('animated', 'bounceIn') } }) } } </script> <style> .container { height: 300vh; } .box { width: 100%; height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f5f5f5; } .title { font-size: 4rem; color: #333; } .subtitle { font-size: 2rem; color: #666; margin-top: 2rem; } </style> ``` 在mounted钩子函数中，我们使用ScrollReveal来实现动画效果。其中，我们设置了元素从顶部出现，距离为200px，持续时间为2s，延迟0.5s，并且在元素出现后添加了bounceIn的animate.css动画效果。 效果如下： 参考文献： - https://scrollrevealjs.org/guide/hello-world.html - https://animate.style/#documentation

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值