建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

impress.js 现代浏览器 HTML 演示框架

来源:易助科技网浏览量:21收藏

简介


impress.js是一个令人惊叹的现代浏览器演示框架。基于CSS3转换和转换。它不依赖于任何外部样式表。它添加了演示工作所需的所有样式。

(下载的附件中附有DEMO)


更多 HTML 演示插件:👉  [ 详情 ]


现代浏览器演示框架impress.js



使用


1.  引入文件


<script src="js/impress.js"></script>


2.  HTML相关设置


1)设置Body元素


Body元素由impress.js用来设置一些有用的类名,这将允许您在CSS或其他脚本中检测演示文稿的支持和状态。

第一个非常有用的类名是“impression not supported”。这个类意味着,浏览器不支持impress.js所需的功能,所以您应该在CSS中应用一些回退样式。没有必要在这个元素上手动添加它。如果脚本检测到浏览器不够好,它将添加此类,但将其保留在HTML中意味着没有JavaScript的用户也将获得回退样式。

当impress.js脚本检测到浏览器支持所有必需的功能时,该类名将被删除。

body元素上的类名也取决于当前活动的表示步骤。有关它的更多细节可以在稍后描述“hint”元素时找到。


<body class="impress-not-supported">


2)包装器设置


现在,这是impress.js使用的核心元素。它是演示步骤的包装器。在这个元素中,所有的impress.js魔法都发生了。它不必是“<div>”。只有“id”在这里很重要,因为脚本就是这样找到它的。

要更改幻灯片之间转换的持续时间,请使用“数据转换持续时间=“2000””,使其具有毫秒数。默认值为1000(1s)。

在编写impress.js演示文稿时,您应该针对一些屏幕大小,您可以在此处定义。默认值为1024 x 768。你应该写你的CSS,就好像这是用于演示的屏幕大小一样。当您在不同大小的屏幕(或浏览器窗口)上展示演示文稿时,impress.js会自动缩放演示文稿以适应屏幕。这种缩放的最小和最大限制也可以在这里定义。

您还可以使用`data perspective=“500”`控制透视图,使其具有多个像素。默认值为1000。如果不需要任何3D效果,可以将其设置为0。如果您愿意更改此值,请确保您了解CSS透视图的工作原理:https://developer.mozilla.org/en/CSS/perspective


<div id="impress"
  data-transition-duration="1000"
  data-width="1024"
  data-height="768"
  data-max-scale="3"
  data-min-scale="0"
  data-perspective="1000"
  data-autoplay="7">
  ... steps here ..
</div>


3)定义步骤


演示的每个步骤都应该是“#impression”中的一个元素,类名为“step”。这些步骤元素由impress.js定位、旋转和缩放,“相机”会在演示的每个步骤上显示它们。

定位信息通过数据属性传递。

在下面的示例中,我们只指定具有`data-x=“-1000”`和`data-y=“-1500”`属性的step元素的x和y位置。这意味着**元素的中心**(是的,中心)将位于演示“画布”的点x=-1000px和y=-1500px。

它不会被旋转或缩放。


<div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">
  <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>


4)示例


这是正在缩放的阶梯元素的示例。同样,我们使用了一个“data-”属性,这次是“data-scale=“4””,所以这意味着这个元素将比其他元素大4倍。从演示和转换的角度来看,这意味着它必须缩小(4倍)才能恢复到正确的大小。


<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span class="try">then you should try</span>
  <h1>impress.js<sup>*</sup></h1>
  <span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>


5)旋转设置


此元素引入旋转。符号不应该是一个惊喜。我们使用`data rotate=“90”`属性,这意味着这个元素应该顺时针旋转90度。


<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>It’s a <strong>presentation tool</strong> <br/>
  inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
  and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div>

<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
  <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
</div>


6)data-z 属性设置


除了“data-x”和“data-y”,您还可以用“data-Z”定义第三(Z)轴上的位置。在下面的例子中,我们使用了`data-z=“-3000”`,这意味着元素的位置应该远离我们(3000px)。


<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
  <p>and <b>tiny</b> ideas</p>
</div>


7)绕轴旋转


您不仅可以在三维中定位元素,还可以围绕任何轴旋转它。所以这个会绕X轴旋转-40度(逆时针40度),绕Y轴旋转10度(顺时针)。当然,你可以用“数据旋转Z”绕Z轴旋转它——它的效果与“数据旋转”完全相同(这两个基本上是别名)。


<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
  <p>and <b>tiny</b> ideas</p>
</div>


8)UI插件


这是一个UI插件。您可以在src/plugins/README.md中阅读更多关于插件的信息。


<div id="impress-toolbar"></div>


2.  调用


1)初始化


要使上述内容真正发挥作用,您需要在页面中包含impress.js。您还需要调用一个`impass().init()`函数来初始化impress.js演示。


<script>impress().init();</script>


2)调用


“impass()”函数还允许您访问控制演示文稿的API。


// initializes the presentation,
api.init();

// moves to next step of the presentation
api.next();

// moves to previous step of the presentation
api.prev();

// moves the presentation to the step given by its index number
api.goto(stepIndex | stepElementId | stepElement, [duration]);



相关链接


官网地址 :  https://impress.js.org/

GitHub 地址 : https://github.com/impress/impress.js/

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/impress/index.html#/bored