介绍一下

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. main方法或者junit单元测试报 类找不到异常

    MyEclipse10.7+Maven项目junit单元测试报找不到类异常,附正常编译后的输出设置   1 首先想到的是输出路径错误 一般不是maven工程的项目编译后的.class文件会在/weba ...

  2. byteify

    byteify函数 Python自带的Json库会把json文件load成Unicode对象. 如果想要变成str对象的话,就要自己去encode. def byteify(input): if is ...

  3. 在Kubernetes集群中安装Helm及证书认证

    安装Kubernetes 测试环境使用kubeadm安装kubernetes v1.6.3版本, 安装过程略过. 为Helm创建客户端认证 客户端认证是为了能够使用helm命令行调用Helm的服务端T ...

  4. 基于 Dojo toolkit 实现 web2.0 的 MVC 模式

    前言 MVC 模式是设计模式中的经典模式,它可以有效的分离数据层,展示层,和业务逻辑层.Web2.0 技术由于其良好的用户体验被广泛应用于 WEB 应用的展示层.但是在传统的 web 开发中,展示层的 ...

  5. linux配置无秘钥登陆

    linux配置无秘钥登陆 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近有点心烦,很少写博客了,后期的3个月里,估计更新的频率也不会太高,请见谅,今天给大家共享一下linux不 ...

  6. mysql优化问题汇总

    sql优化-->分区-->分表-->垂直分库-->水平分库-->读写分离 分区 关于分区的博客推荐这个:https://blog.csdn.net/youzhouliu/ ...

  7. redis的入门篇----启动和关闭

    废话不多说  本博主要的内容是redis的常见命令 redis分为服务端和客户端 服务端的启动方式: redis-server redis-server ${redis.conf}    //后面是一 ...

  8. <T extends Comparable<? super T>>什么意思

    <T extends Comparable<? super T>>首先这是运用了java的泛型①extends后面跟的类型如<任意字符 extends 类/接口>表 ...

  9. .Net进阶系列(13)-异步多线程(Task和Parallel)(被替换)

    一. Task开启多线程的三种形式 1. 利用TaskFactory下的StartNew方法,向StartNew传递无参数的委托,或者是Action<object>委托. 2. 利用Tas ...

  10. Javaweb学习笔记——(三)——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...