最近学习了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>
<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度左右