介绍一下

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的更多相关文章

  1. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  2. 如何使用impress.js做一个网页版本的PPT

    blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...

  3. 我在 impress.js 中学到的小套路

    我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下, ...

  4. 我对 impress.js 源码的理解

    源码看了两天,删掉了一些优化,和对 ipad 的支持,仅研究了其核心功能的实现,作以下记录. HTML 结构如下: <!doctype html> <html lang=" ...

  5. impress.js学习总结

    impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...

  6. 体验Impress.js

    用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试. 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步 ...

  7. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  8. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

  9. 如何用impress.js写有逼格的ppt

    概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...

随机推荐

  1. ps 中取消网格线的吸附功能,其实是对齐功能

    ps 中取消网格线的吸附功能,其实是对齐功能

  2. 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

    HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...

  3. uboot移植

    Uboot移植 1.架构 board:与一些开发板相关的配置文件 common:uboot下使用能够使用的命令 CPU:与特定CPU架构相关的目录 disk:对磁盘的支持 doc:文档目录 drive ...

  4. 同步、异步、阻塞、非阻塞与future

    前言 随着移动互联网的蓬勃发展,手机App层出不穷,其业务也随之变得错综复杂.针对于开发人员来说,可能之前的一个业务只需要调取一次第三方接口以获取数据,而如今随着需求的增加,该业务需调取多个不同的第三 ...

  5. jaxp实现对xml文档的增,删,改,查操作(附源码)浅析

    jaxp,属于javase中的一部分.是对xml进行解析的一个工具类: 既然说到这里,还是讲全一点,讲讲上面说到的xml的解析技术. xml的一个标记型文档. 在html的层级结构中,它会在内存中分配 ...

  6. Postfix 邮件服务 - dovecot 服务

    dovecot 是一个开源的IMAP和POP3邮件服务器 收件协议 (SMTP 传输发件)POP/IMAP 是MUA从邮件服务器中读取邮件时使用的协议.其中,与POP3是从邮件服务器中下载邮件存起来, ...

  7. luogu P3193 [HNOI2008]GT考试

    传送门 单串匹配显然用\(kmp\) 一个暴力的dp是设\(f_{i,j}\),表示前\(i\)位,正在匹配给定串第\(j\)位的方案,转移就枚举下一位放什么,然后使用\(kmp\)看会匹配到给定串的 ...

  8. HDU 2191 - 单调队列优化多重背包

    题目: 传送门呀传送门~ Problem Description 急!灾区的食物依然短缺! 为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种 ...

  9. windows钩子函数

    一 什么时候用到钩子?(when)Windows操作系统是建立在事件驱动的消息处理机制之上,系统各部分之间的沟通也都是通过消息的相互传递而实现的.通常情况下,应用程序只能处理当前进程的消息,如果需要对 ...

  10. E - 着色方案 HYSBZ - 1079 (计数DP)

    题目链接:https://cn.vjudge.net/contest/281963#problem/E 题目大意:中文题目 具体思路:这个题脑洞有点大,因为ci的数据量非常小,所以我们可以根据这个来进 ...