有你在真好 的个人博客
站在巨人的肩膀上——制作酷炫web幻灯片
阅读:2037 添加日期:3/27/2021 11:31:19 PM 原文链接:https://www.toutiao.com/item/4690602406/

站在巨人的肩膀上——制作酷炫web幻灯片

       你是否还在用ppt做一些毫无意思的幻灯片?你是否在做ppt的时候绞尽脑汁想把效果做的吸引大家?你是否想通过一次ppt吸引领导的注意?那好吧!来学学怎么制作一款炫酷的web幻灯片~

ps:如果看到这里还不感兴趣就请先看看素材演示,这个演示是前些时候给组里新人介绍HTML5的时候自己做的一款幻灯片!

工具

  1. 一款最近版本的chrome浏览器(火狐,safari也可)

  2. 一款趁手的IDE工具

  3. impress.js君(您也可下载本页素材进行自己需求的修改)

优点

几乎不需要写任何JS,只需要在每个子页DOM处添加几个属性就可达到效果!至于CSS嘛,根据你的幻灯片需求,看情况写啦!

操作时候可以用键盘空格、光标或者鼠标滚轮控制幻灯片切换

原理

看完效果大多数人应该就了解了原理,在这里还是罗嗦一下:其实每一个子页就是id为impress的div下的一级div,impress将他们每个起始位置或动画角度定好(由我们来配),当子页出现时候通过平滑的css动画过度到屏幕正向面前。就好像一张大纸上画了好几个div,屏幕就像一个放大镜焦点,从第一个div开始,挨个看div,在过程中不断平移或旋转这个大纸(3d效果动画另说)。

HTML部分结构

<body>  ....  <div id="impress">    <div class="step">子页一</div>    <div class="step">子页二</div>    <div class="step">子页三</div>    <div class="step">子页四</div>    ....  </div>  ....</body>

JS代码部分

除了引入impress.js就是下面这句了:

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

API

  • data-x:幻灯片的x坐标(子页面出现时候进行平移)

  • data-y:幻灯片的y坐标(子页面出现时候进行平移)

  • data-z:幻灯片的z坐标(子页面出现时候进行z轴深度的平移)

  • data-scale:缩放。通过指定一个值来进行缩放,将该子页出现时进行放大,同时其他子页就会相对变小

  • data-rotate:旋转。通过一个数字度数来确定旋转你的幻灯片

  • data-rotate-x:为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)

  • data-rotate-y:为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)

  • data-rotate-z:为3D用,这个数字度数是它应该相对z轴旋转多少度。

一共就这几个参数,配置在每个子页div的DOM上

DEMO

这是幻灯片中的一个片段,截取了源码中两个子页代码,从这里可以读出3个要点:

  1. 每个子页是一个div,必须有一个step作为class,如果没有,这个div将不会在幻灯片进行时候出现

  2. api中的属性写在子页div中

  3. 每个子页的自定义css可以定义class或者id写在css文件中

到这里,聪明的读者应该已经迫不及待的,想要靠自己的智慧想要去亲手做一个了。但是这时候我再废话几句我的源码:

  1. 第一个子页这里data-x,data-y是可以从0开始的,之所以这样其实是想告诉大家这里可以不从0开始,哈哈!可以把定位在0子页之前的这种子页当成幻灯片前言

    1. <div class="step slide" data-x="-1000" data-y="-1500">

    2.  <img src="img/h5.png">

    3.  <h1>HTML5 介绍</h1>

    4. </div>

  2. 源码最后的子页有个这个空的div,其实是为了展示出来“整张大纸”的全景,坐标是自己摸索出来的,放大倍数也是根据内容多少而大致试出来的。这个div其实定义了style:display:none,但是幻灯片还是会展示,只是个空的而已。也就是说即便对他设置了css让他隐藏,但只要有step这个class在,一样不会被忽略!

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

    2. </div>

在线调试和把玩相关代码请访问:
http://www.gbtags.com/gb/share/5688.htm