强大的scrollReveal库,炫酷的页面缓入效果。
2024-10-15 01:35:11
首先我问来看一下这个强大的插件能做出什么效果,下面是我找的一个网站:
接下来看看官网给出的效果:https://scrollrevealjs.org/。
是不是很炫酷,很让人心动,接下来我们介绍如何使用:
(1)安装或引入
a。你可以直接引入:
<script src="https://unpkg.com/scrollreveal"></script>
先别忙着粘贴,记得要加上版本号,如果不指定固定版本号,可能会在解析最新版本时延迟页面加载。
b.或者你可以使用npm进行安装
npm install scrollreveal
安装成功后,在页面进行引入:
import ScrollReveal from 'scrollreveal'
(2)接下来在你需要加效果的html元素处加data-scroll-reveal。
<div class="industry_advantage" >
<h1 class="home_t1" data-scroll_reveal>优势</h1>
<ul data-scroll-reveal>
<li >
<span class="tab_1">icon</span>
<strong>我</strong>
<b>啦啦啦</b>
</li>
<li >
<span class="tab_3">icon</span>
<strong>英语</strong>
<b>啦啦啦</b>
</li>
<li>
<span class="tab_4">icon</span>
<strong>130万</strong>
<b>啦啦啦</b>
</li>
</ul>
</div>
(3)最后在js中写配置
let config = {
after: '0s',
enter: 'bottom',
move: '70px',
over: '2s',
easing: 'ease-in-out',
viewportFactor: 0.33,
reset: true,
init: true
};
window.sr = ScrollReveal();
ScrollReveal().reveal('.industry_advantage>ul, .home_t1' ,config)
当然啦,你如果需要设置不同的动画效果,可以直接在html标签里写,像这样:
<div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">啦啦啦</div>
此时,大功告成啦。
最新文章
- jQuery-1.9.1源码分析系列(十二) 筛选操作
- Delphi日期函数、日期加减
- ts tp 高清播放软件 Elecard MPEG Player 6.0.130827
- VS启用IIS调试的方法及可能碰到的问题。
- CentOS中查看系统资源占用情况的命令
- encodeURIComponent=>;Uri.EscapeDataString
- octopress Endless Error With Gem Dependencies
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
- PHP -- 添加注释
- 对Numpy广播操作的理解
- spring入门 依赖入注的三种方式(1)
- ThreadLocal总结
- 设计模式-享元模式(FlyWeight)
- IntellIJ IDEA 配置 Vue 支持
- openssl编译参数选项
- 使用git时报错出现vim.exe.stackdump
- SpringBoot 5.SpringBoot小知识讲解
- vps搭建个人网盘不二之选—kodexplorer介绍,包含安装步骤
- C的指针疑惑:C和指针6(指针)
- windows系统作为客户端时,linux中本地yum源挂载时,如何同时挂载DVD1和DVD2?
热门文章
- IntelliJ IDEA部署tomcat时Edit Configuration Deployment无artifact选项
- nodejs接收get参数和post参数
- [ Java面试题 ]JavaWeb篇
- [八]JavaIO之FileInputStream 与 FileOutputStream
- 基于Dockerfile镜像制作的基本操作
- 如何正确使用Java序列化?
- Python并发编程之学习异步IO框架:asyncio 中篇(十)
- [Go] golang连接查询mysql
- C# 设置Excel条件格式(二)
- Dubbo+ZK与Eureka注册中心比较