的id可有可无,当有id时url中的hash变化是随着id走;反之就是step-[num],如)
My first slide
创建幻灯片的同时,要添加一些数据属性。下面是一些可用的数据属性:
data-x = 幻灯片的x坐标
data-y = 幻灯片的y坐标
data-z = 幻灯片的z坐标
data-scale = 通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-rotate = 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x = 为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)
data-rotate-y = 为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)
data-rotate-z = 为3D用,这个数字度数是它应该相对z轴旋转多少度。
让数据属性起作用
接下来的幻灯片设置将引导你理解每一个数据属性
从一个初始的幻灯片开始,这个幻灯片已将它data-x和data-y数据属性设置为0,所以会出现在页面的中间。
This is my first slide (显示的内容)
第二个幻灯片的data-x值为500、data-y值为0,活动的时候它将会向左平移(滑动)500px的地方。
This is slide 2
第三张幻灯片其data-x值不变,data-y位置为-400,这将会是从顶部400px处滑入屏幕。
This is slide 3
第四张幻灯片来个新花样,使用data-scale的值控制其缩放大小。data-scale=”0.5″表示着它应该是一半的尺寸,当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸,从这一步绚丽开始起步
This is slide 4
第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图,幻灯片5被设置旋转90度,视觉效果微叼哈
This is slide 5
第六张幻灯片开始3D style,可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴,意思是你可使事物倾斜(正值)或向后(负值),y轴是竖轴,所以你可使事物向左摇摆(负值)或向右(正值),z轴是纵轴,这将是旋转的东西向上(负值)和向下(正值)。
data-rotate-y=“-60″ data-rotate-z=“90” data-scale=“4”>
This is slide 7 and it has a 3D transition AND a scale.
对于不支持Impress.js的浏览器做降级处理
在
之前添加如下一个div
Your browser doesn't support impress.js. Try Chrome or Safari.
然后将下列样式添加到你的样式表中:
.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }