传统的layzload只能适用于图片懒加载，而我们现在需要的是全部元素的懒加载！

官网：https://scrollrevealjs.org/

gitHub：https://github.com/jlmakes/scrollreveal

提供了两种使用方式：

1.使用script标签（提供国内加载）

 <script src="https://cdn.bootcss.com/scrollReveal.js/4.0.0-beta.26/scrollreveal.min.js"></script>

2.下载zip包

https://github.com/jlmakes/scrollreveal.git

我们怎样使用呢？（Github已经提供了方式）

针对某个类做出的懒加载动作！（不过你要考虑到ajax异步请求加载图片）

Github示例：

https://github.com/Sunnshino/scroll-example.git

scrollReveal 使用的更多相关文章

  1. ScrollReveal.js – 帮助你实现超炫的元素运动效果

    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置 ...

  2. 强大的scrollReveal库，炫酷的页面缓入效果。

    首先我问来看一下这个强大的插件能做出什么效果,下面是我找的一个网站: http://kepler.gl/#/, 接下来看看官网给出的效果:https://scrollrevealjs.org/. 是不 ...

  3. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  4. ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。

    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787. ...

  5. scrollReveal.js页面滚动动态效果

    scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScrip ...

  6. [UI] Elastic Stack & scrollReveal.js

    Elastic Stack & scrollReveal.js Elastic Stack http://freebiesbug.com/code-stuff/elastistack-js-d ...

  7. scrollreveal(页面滚动显示动画插件支持手机)

    scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. ...

  8. scrollReveal（页面缓入效果插件）

    scrollReveal(页面缓入效果插件)实现页面滚动时动画加载元素效果 前面我去了解了元素距页面视图距离,想实现页面滚动是动画加载元素(https://www.cnblogs.com/chengh ...

  9. scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了（我的Hexo next博客引发的问题）

    文章目录 时间 背景 问题解决 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 时间 2019 ...

随机推荐

  1. VS第一天（一堆错误的错误示范）

    自学VS第一天 (目标用vs做个不low的简历) 学习视频 https://www.bilibili.com/video/av48489320/?p=1 代码 写了一天的代码,自己理解的内容在注释里 ...

  2. centos 7.3 快速安装ceph

    Ceph的部署手册(Centos7.3)     Ceph简介 Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统. 部署逻辑架构 准备3台主机,并且修改主机名(hostnam ...

  3. （转） 苹果所有常用证书，appID,Provisioning Profiles配置说明及制作图文教程（精）

    原文地址:http://blog.csdn.net/holydancer/article/details/9219333 概述: 苹果的证书繁锁复杂,制作管理相当麻烦,今天决定重置一个游戏项目中的所有 ...

  4. 对linux中source，fork,exec的理解以及case的 使用

    fork   使用 fork 方式运行 script 时, 就是让 shell(parent process) 产生一个 child process 去执行该 script, 当 child proc ...

  5. Lex与Yacc学习（六）之lex & yacc (简单计算器程序) 运行

    词法分析程序ch3-01.l %{ #include "ch3-01.tab.h" extern int yylval; %} %% [0-9]+ { yylval = atoi( ...

  6. 在html页面中使用js变量

    Method 1:   <a id="xxxx">xxxxxxxxxxxxxxxxxx</a> <script type="text/jav ...

  7. skkyk:题解 洛谷P3865 【【模板】ST表】

    我不会ST表 智推推到这个题 发现标签中居然有线段树..? 于是贸然来了一发线段树 众所周知,线段树的查询是log(n)的 题目中"请注意最大数据时限只有0.8s,数据强度不低,请务必保证你 ...

  8. linux无人值守安装介绍(一)

    一.术语解释 PXE(Pre-boot ExecutionEnvironment)是由Intel设计的协议,它可以使计算机通过网络而不是从本地硬盘.光驱等设备启动.现代的网卡,一般都内嵌支持PXE的R ...

  9. [无趣]bit reverse

    真不想承认啊,因为年轻而犯下的错误! inline void _BR(int* a,int r){ for(int i=0,j=1;i<r;++i,j<<=1){ for(int k ...

  10. KVM 网络虚拟化基础

    网络虚拟化是虚拟化技术中最复杂的部分,学习难度最大. 但因为网络是虚拟化中非常重要的资源,所以再硬的骨头也必须要把它啃下来. 为了让大家对虚拟化网络的复杂程度有一个直观的认识,请看下图 这是 Open ...