动态效果html wow,bootstrap 动态效果WOW animate插件
随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有:UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等,JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等,还有很多常用的动画库、字体图标,比如:Animate、Wow、Iconfont、Iconmoon等。
这些前端框架典型的特点:简单易用、相通性强,我们可以在学习一个框架后快速上手其他框架。
主要知识点:Animate、WOW.js、 scrollReveal.js、Zepto.js、Bootstrap、 jQuery 等
1.Animate
Animate.css是一个css动画样式库,其目标是让CSS动画像喝水一样容易(Just-add-water CSS Animation)。
animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库)
animate.css是一个来自国外的CSS3动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn \/ rotateOut)、淡入淡出(fadeIn \/ fadeOut)等多达70多种动画特效,几乎包含了所有常见的动画特效。
重点:浏览器兼容,animate.css底层是通过css3实现的,当然是只兼容支持CSS3 animate属性的浏览器: IE10+、Firefox、Chrome、Opera、Safari
1.wow
1 核心作用:让页面滚动更有趣
通过WOW.js,可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说:当我们向下滚动页面时,可以省去很多判断条件,让CSS动画逐渐展示出来。
2 特点
轻量级类库, 不依赖jQuery,超简单的安装和使用,与animate.css配合,只需要短短几行代码就可以实现很多特效。容易定制,我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。
3 兼容性考虑
因为,WOW要和Animate配合使用,所有其也只兼容支持CSS3 animate属性的浏览器:IE10+、Firefox、Chrome、Opera、Safari。
A.WOW的常用属性
data-wow-delay: 动画开始前延迟
data-wow-duration: 动画持续时长
data-wow-iteration: 动画重复次数
data-wow-offset: 浏览器底部到指定item的顶部的距离(偏移量)
来搞定它? 可以加入data-wow-duration(动画持续时间)和data-wow-delay(动画延迟时间)等属性。比如:
data-wow-offset:用于决定当前的元素在滚动的时候 , 到达怎样的位置出现(是在滚动之前出现、滚动之后出现,还是滚动的时候出现)http://mynameismatthieu.com/WOW/
B.WOW的默认配置参数
var wow = new WOW({
boxClass: 'wow', // 动画元素的CSS类(默认类名wow)
animateClass:'animated', // 动画CSS类 (默认类名animated)
offset: 0, // 距离可视区域多少开始执行动画(默认为0)
mobile: true, // 是否在移动设备上执行动画 (默认是true)
});
wow.init();
WOW.js实例的动画只能加载一次,如果要重新执行动画必须要进行刷新。
3.scrollReveal
scrollReveal是一个兼容PC端和移动设备的滚动-动画库。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;
1.特点
scrollReveal同时兼容PC端和移动端;
0依赖(不依赖于jQuery,也不依赖于animate.css);
定制性高,使用简单方便快捷。
2.浏览器兼容
虽然scrollReveal.js不依赖于animate.css,但是它的动画也是用CSS3创建的,所以依然需要支持HTML5和CSS3比较好的浏览器,比如:IE10+、Firefox、Chrome、Opera、Safari。
对应的代码
Title
*{
margin: 0;
padding: 0;
}
#main {
width: 800px;
margin: 20px auto;
/*background-color: skyblue;*/
list-style: none;
}
#main .box{
width: 200px;
height: 300px;
background-color: skyblue;
float: left;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
- 1
- 2
- 3
.........
30
常用的参数
var config = {
reset: false, // 滚动鼠标时,动画开关(如果为true, 动画可以执行n次)
origin: 'bottom', // 动画开始的方向
duration: 500, // 动画持续时间
delay: 0, // 延迟
rotate: {x:0, y:0, z:0}, // 过度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9, //缩放
easing: 'cubic-bezier(0.1, 0.2, 0.3, 0.4)', // 动画效果'ease', 'ease-in-out','linear'...
// 回调函数
//动画开始前调用
beforeReveal: function(domEl){},
//滚动鼠标之前调用
beforeReset: function(domEl){},
//动画开始后调用
afterReveal: function(domEl){},
//滚动鼠标之后调用
afterReset: function(domEl){}
};
window.sr = ScrollReveal();
sr.reveal('.sr', config);
给某个盒子设计动画
window.οnlοad=function () {
var config = {
reset: true,
// rotate: {x:50, y:70, z:50}, // 过度到0的初始角度
};
var config1 = {
reset: true,
rotate: {x:0, y:0, z:90}, // 过度到0的初始角度
scale: 2,
duration: 1500, // 动画持续时间
};
//1.拿到ScrollReveal对象
window.sr= ScrollReveal();
//2.开始动画
sr.reveal('.box',config);
//3.开始动画
sr.reveal('#test12',config1);
}
动态效果html wow,bootstrap 动态效果WOW animate插件相关推荐
- animate,wow,Bootstrap,scrollReveal
Animate 1.简介 随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有:UI层面的有Bootstrap.Yui.JqueryUI.CSS3 ...
- wow.js怎么使用这个插件
wow.js中各种特效对应的类名 一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果 ...
- 你也可以做一个小米魅族网站(WOW.js:WOW.js – 在页面滚动时展现动感的元素动画效果)
可视区域动画: aos.js :http://www.jq22.com/jquery-info8150 scrollReveal.js :http://to ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap 弹出提示插件Popover 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑5: 表 5‑5 popover插件的选项 名称 类型 默认值 ...
- Bootstrap 弹出提示插件popover 的使用方法
弹出提示 弹出提示是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展. 弹出提示插件需要 bootstrap-popover.js 文件支持,在使用该插件之前,应该导入 ...
- Bootstrap 标签页Tab插件的事件
事件 Bootstrap标签页Tab插件有两个事件,分别是 show 和 shown,这两个事件的含义见表 5‑3. 表 5‑3 标签页事件及含义 事件 含义 show 标签页显示之前,触发该事件.使 ...
- Bootstrap 标签页Tab插件使用方法
标签页 Bootstrap标签页Tab插件需要 bootstrap-tab.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-tab.js 文件. 调用方式 1.dat ...
- Bootstrap 滚动监听插件Scrollspy 的事件
事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...
- Bootstrap 滚动监听插件Scrollspy 的选项
选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...
最新文章
- 问题1:程序员要做一辈子?
- mysql file-pos_mysql-5.7 调整mysql的复制方式由master_log_file+master_log_pos 到gtid 详解
- 关于props的注意事项!
- WCF入门-项目间调用服务
- 理解ASP.NET Core中的中间件
- 数据库系统原理复习提纲
- CNN卷积层里的多输入多输出通道channel 动手学深度学习v2 pytorch
- 【matlab数字图像处理】数字图像处理中的坐标系
- 浙江大学计算机图形学视频教程,浙江大学现代教务管理系统
- 等保三级密码技术应用要求 GM/T 0054-2018
- 解决网站80端口被封,本地公网IP加速25mb/s网站访问速度
- microsoftonenote_Microsoft OneNote 2017 官方免费版
- 联想服务器AR系列,联想沉浸式AR游戏设备Mirage AR现场实拍图赏
- 在c语言中 不可表示的字符是什么,C 语言易错点综合
- plt.xticks()
- CentOS7安装配置Tomcat9
- 记录自己第一次科研经历
- 【Linux】Protected multilib versions XXX错误
- python asyncio_Python 异步 IO系列:认识asyncio
- blogger_如何在博客中添加推文并调试基本JavaScript:为什么Twitter.com/JavaScript/Blogger JSONP Widget停止工作?...
热门文章
- 怎么修改背景图片大小的HTML代码,网页背景图片的大小的代码是什么
- 虚拟机安装win7 64位教程
- 记12306货运系统“抢订空车”插件的编写--chrome插件各部分的交互
- 计算机硬盘图标怎么更改,Win7硬盘图标怎么改 win7修改硬盘盘符图标的方法
- 数商云:传统建筑行业产业转型,轻松实现建筑材料信息系统撮合交易智能化、数字化管理
- 电脑重装win10系统教程,简单易懂,不用U盘直接重装
- html ul 的类别,CSS 类表样式(ul)
- 一款陌生人状态社交软件--same
- 如何用Python计算股票的Beta系数
- php计算股票均线,php写智能选股,股票回测系统之--MACD指标计算方法及实例