介绍一下

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. 十二、java_网络编程

    目录: 一.网络基础 二.TCP/IP协议 三.IP地址 四.Socket通信 一.网络基础 什么是计算机网络: 把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大.功能强的网络系 ...

  2. 第2课:什么是SQL注入

    SQL注入:利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,这是SQL注入的标准释义. 随着B/S模式被广泛的应用,用这种模式编写应用程序的程序员也越来越多,但由于开发人员的水 ...

  3. HTML格式化标签

    除了div.p.h1~h6.a.span这几个极常用的标签外,HTML还有一些不常见的标签(10个,5对:加粗.斜体.大小.上下标.特殊),默认效果如下: 当然,我们习惯用css编写效果来替代这些效果 ...

  4. powershell 删除8天前的日志

    把以下命令保存为ps1脚本,添加到Windows计划任务中设定每天固定时间执行即可: #delete logs in specify website, just save logs in eight ...

  5. 学习windows编程 day5 之按键消息

    case WM_KEYDOWN://带sys的按键消息大多是系统需要自己处理的,我们一般不需要,默认处理 //wParam 指定按键的虚拟键代码 //lParam 指定技术,扫描码,闲钱状态,转换状态 ...

  6. C#获取Html中的图片元素路径

    使用Ueditor的时候把文章以HTML标签的方式存在数据库中,同时还要将文章的第一张图片的路径一并存入数据库,所以就需要在Html中获取第一个图片的路径,没有图片的话设置一个默认的图片.代码如下: ...

  7. Docker 入门 第三部分: 服务

    目录 Docker 入门 第三部分: 服务 先决条件 介绍 你的第一个 docker-compose.yml 文件 docker-compose.yml 运行你新建的负载均衡应用 扩展应用程序 卸载应 ...

  8. 【搬运】C指针 一

    本文搬运自https://fishc.com.cn/forum.php?mod=viewthread&tid=71654&extra=page%3D1%26filter%3Dtypei ...

  9. C#在Win10与非Win10 Windows系统鼠标滚动编程的一点区别。

    C#在win10和非Win10上处理鼠标滚动有一些区别,建一个Form1,放置一个FlowLayoutPanel ,类型的Panel1 Panel.MouseWheel += PanelOnMouse ...

  10. Linux 创建 时间命名 文件

    创建以 时间 命名文件:: touch /logs/`date +%Y-%m-%d_%d_%H:%M`.log touch "$(date +%Y-%m-%d_%H:%M:%S.TXT)