impress.js

最新推荐文章于 2024-08-08 07:49:49 发布

luckSll

最新推荐文章于 2024-08-08 07:49:49 发布

阅读量319

点赞数

分类专栏：个人总结文章标签： impress jq

本文链接：https://blog.csdn.net/qq_29030071/article/details/72828710

版权

个人总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近学习了impress.js，是一个很强大的幻灯片效果的插件，下面，分享一下我的是用心得；

所有的幻灯片又一个父容器，id为impress

<body>
    <div id="impress">
    </div>
</body>

下面创建第一张幻灯片，每张幻灯片的class必须为step

 <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>

给幻灯片加上属性，会是幻灯片的效果更棒

data-x:幻灯片相对于屏幕的x坐标（number）

data-y:幻灯片相对于屏幕的y坐标（number）

data-z:幻灯片相对于屏幕的x坐标（number）

data-scale:幻灯片的放大倍数（number）

data-rotate:幻灯片的旋转角度(number)

下面我们看一下具体的幻灯片例子：

        <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
            <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
        </div>
        <div class="step slide" data-x="0" data-y="-1500">
            <q>Don’t you think that presentations given <strong>in modern browsers</strong> shouldn’t <strong>copy the limits</strong> of ‘classic’ slide decks?</q>
        </div>
        <div class="step slide" data-x="1000" data-y="-1500">
            <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q> 
        </div>

上面的三个幻灯片的class 都设置为step,slide. 设置为slide可将幻灯片左右滑动，

下面你这个幻灯片呢，会将幻灯片在原来的基础上放大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倍，并旋转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>

下面这个，将会在z轴上向内（远离视线方向）3000单位

	<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>

幻灯片中的标签也可以加上，特定的类名，实现不一样的效果

positing:效果如下

scaling:该标签的内容，将会在原有基础s缩小

rotating:该标签的内容，将会在原有基础上逆时针旋转45度左右

  	<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
            <p>by <b class="positioning">positioning</b>,
            <b class="rotating">rotating</b> and <b class="scaling">scaling</b> 
            them on an infinite canvas</p>
        </div>

具体还可以参考：https://www.cubewebsites.com/blog/guides/how-to-use-impress-js/

scaling:该标签的内容，将会在原有基础s缩小

rotating:该标签的内容，将会在原有基础上顺时针旋转45度左右

luckSll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
impress.js

最近学习了impress.js，是一个很强大的幻灯片效果的插件，下面，分享一下我的是用心得；所有的幻灯片又一个父容器，id为impress 下面创建第一张幻灯片，每张幻灯片的class必须为step then you should try impress.js* * no rhyme intended 给幻灯片加上属性
复制链接

扫一扫

专栏目录