impress.js
介绍一下
impress.js是一个非常炫酷的幻灯片展示框架,依靠CSS3技术。
impress.js使用起来非常简单,下面就来简单介绍一下其用法。
Start
首先,当然要引入impress.js。
在div标签设置id为impress(不要求一定是div),然后在你想进行展示的地方加上calss:step,每一个step就相当于一张幻灯片。与.step同级通常会自己定义一个id,这个id主要用来在url中进行辨认序数,播放第几张的时候其id就会显示在url中,当然也可以直接用此锚点来访问指定的地方;如果没有定义,则默认为step-N(N为序数)。
fallback
如果用户的浏览器不支持这么炫酷的特效,框架会自动展示class为fallback-message中的内容,做个兼容。
一些属性
在.step的同级定义一些属性:
中心点:整个元素的中心点
data-x:距中心点x轴的坐标
data-y:距中心点y轴的坐标
data-z:相当于垂直于屏幕的距离
data-transition-duration:动画切换持续的时间,默认为1s
data-perspective:视距,默认为1000,不太了解视距的可以自行学习下
data-rotate:顺时针旋转的度数
data-rotate-x:以x轴为中心旋转,通常用来制造3D效果
data-rotate-y:以y轴为中心旋转,通常用来制造3D效果
data-rotate-z:等同于data-rotate
三种状态
impress.js提供三种状态,分别是未展示(future),展示中(present),已展示(past)
这几个状态会作为class添加在元素上,方便使用者根据自己需求进行操作
事件
impress().init():初始化(必须)
impress().next():过渡到下一个展示的元素
impress().prev():过渡到前一个展示的元素
impress().goto(Index | Id | El, [duration]):过渡到指定的元素(序数 | Id | 元素,过渡时间)
Last
用法比较简单,过渡动画也比较流畅,最终效果很炫酷
作者建议在纸上构思好整个排版之后,在进行撸码哈~
如果感兴趣请看作者源码
impress.js的更多相关文章
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- 如何使用impress.js做一个网页版本的PPT
blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...
- 我在 impress.js 中学到的小套路
我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下, ...
- 我对 impress.js 源码的理解
源码看了两天,删掉了一些优化,和对 ipad 的支持,仅研究了其核心功能的实现,作以下记录. HTML 结构如下: <!doctype html> <html lang=" ...
- impress.js学习总结
impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...
- 体验Impress.js
用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试. 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步 ...
- impress.js初体验
概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...
- 一统江湖的大前端(1)——PPT制作库impress.js
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- 如何用impress.js写有逼格的ppt
概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...
随机推荐
- main方法或者junit单元测试报 类找不到异常
MyEclipse10.7+Maven项目junit单元测试报找不到类异常,附正常编译后的输出设置 1 首先想到的是输出路径错误 一般不是maven工程的项目编译后的.class文件会在/weba ...
- byteify
byteify函数 Python自带的Json库会把json文件load成Unicode对象. 如果想要变成str对象的话,就要自己去encode. def byteify(input): if is ...
- 在Kubernetes集群中安装Helm及证书认证
安装Kubernetes 测试环境使用kubeadm安装kubernetes v1.6.3版本, 安装过程略过. 为Helm创建客户端认证 客户端认证是为了能够使用helm命令行调用Helm的服务端T ...
- 基于 Dojo toolkit 实现 web2.0 的 MVC 模式
前言 MVC 模式是设计模式中的经典模式,它可以有效的分离数据层,展示层,和业务逻辑层.Web2.0 技术由于其良好的用户体验被广泛应用于 WEB 应用的展示层.但是在传统的 web 开发中,展示层的 ...
- linux配置无秘钥登陆
linux配置无秘钥登陆 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近有点心烦,很少写博客了,后期的3个月里,估计更新的频率也不会太高,请见谅,今天给大家共享一下linux不 ...
- mysql优化问题汇总
sql优化-->分区-->分表-->垂直分库-->水平分库-->读写分离 分区 关于分区的博客推荐这个:https://blog.csdn.net/youzhouliu/ ...
- redis的入门篇----启动和关闭
废话不多说 本博主要的内容是redis的常见命令 redis分为服务端和客户端 服务端的启动方式: redis-server redis-server ${redis.conf} //后面是一 ...
- <T extends Comparable<? super T>>什么意思
<T extends Comparable<? super T>>首先这是运用了java的泛型①extends后面跟的类型如<任意字符 extends 类/接口>表 ...
- .Net进阶系列(13)-异步多线程(Task和Parallel)(被替换)
一. Task开启多线程的三种形式 1. 利用TaskFactory下的StartNew方法,向StartNew传递无参数的委托,或者是Action<object>委托. 2. 利用Tas ...
- Javaweb学习笔记——(三)——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...