impress.js-前端PPT制作

最新推荐文章于 2022-01-14 17:45:06 发布

csdn怀

最新推荐文章于 2022-01-14 17:45:06 发布

阅读量2.3k

点赞数

分类专栏： web 文章标签： impress.js

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用html+CSS+js制作PPT，应该是每个前端爱好者都觉得不同于其他开发者的一大亮点。

目前主流的框架有HTML5 Slides、Reveal.js 、Impress.js 、Deck.js 、HTML Slide Presentation 、CSSS 、Fathom.js 等，个人偏爱Impress.js。

Impress.js源码的GitHub地址 https://github.com/impress/impress.js

git下载下来，目录结构如下

一般我们会看js下的impress.js源码，css下的impress-demo.css，index.html用于快速上手

详述

1. 基本结构

<!DOCTYPE html>
<html>
<head>
	<title>Impress Demo</title>
	<link rel="stylesheet" type="text/css" href="css/impress-demo.css">
</head>
<body>
	<div class="impress-not-supported"></div>
	<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
    </div>
	<div id="impress">
	</div>
	<script src="js/impress.js"></script>
	<script>impress().init();</script>
</body>
</html>

class=impress-not-supported指浏览器不支持时显示fallback-message类的内容。（js代码没找到这块...学艺不精啊）

2.元素属性

data-x:元素在x轴的位置
data-y:元素在y轴的位置
data-z:元素的z轴的位置
data-scale:元素缩放比例
data-rotate:元素旋转角度注意是相对于0度旋转的角度
data-rotate-x: 元素绕x轴旋转角度同上
data-rotate-y: 元素绕y轴旋转角度同上
data-rotate-z: 元素绕z轴旋转角度同上
data-autoplay:自动播放

3.幻灯片创建

<div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">

每一个step代表一张幻灯片，slide代表幻灯片样式。id代表URL路由跳转，没有id属性默认step-[num]

.slide {
    display: block;

    width: 900px;
    height: 700px;
    padding: 40px 60px;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
}

根据slide样式可以计算出每张幻灯片大致的位置

4. 全局预览

<div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">

效果如下

当然你也可以根据自己的需要修改样式

具体样式可以查看源码impress-demo.css

csdn怀

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
impress.js-前端PPT制作

使用html+CSS+js制作PPT，应该是每个前端爱好者都觉得不同于其他开发者的一大亮点。目前主流的框架有HTML5 Slides、Reveal.js 、Impress.js 、Deck.js 、HTML Slide Presentation 、CSSS 、Fathom.js 等，个人偏爱Impress.js。Impress.js源码的GitHub地址 https://github.co...
复制链接

扫一扫