Reveal.js HTML5炫酷幻灯片

用reveal.js和HTML5制作幻灯片，炫到没朋友！

1、首先下载reveal.js，然后引入

2、在index.html里面引入css和js，我写的简单demo如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="css/reveal.css"><link rel="stylesheet" href="css/theme/league.css"><!--Add support for earlier versions of Internet Explorer --><!--[if lt IE 9]><script src="lib/js/html5shiv.js"></script><![endif]-->
</head>
<body><div class="reveal"><div class="slides"><section data-transition="zoom">  <h1>Single Horizontal Slide</h1> </section><section><section ><p class="fragment">Vertical Slide 1</p><!--fragment是碎片展示--><p class="fragment">Vertical Slide 2</p><p class="fragment">Vertical Slide 3</p></section><section data-background="url(images/12.jpg)">Vertical Slide dsd</section><!--图片直接这样引用-->
</section>
</div><div class="slides"><section data-transition="zoom">Happy New Year!</section><section >Happy New Year!5656</section><section >Happy New Year!5646</section><section >Happy New Year!46456</section><section><section data-background-transition="zoom" data-background="#defbbc"> <h1>Vertical Slide 1</h1> </section><section data-transition="zoom">Vertical Slide 2</section><section data-transition="convex">Vertical Slide 3</section><section data-transition="">Vertical Slide 4</section></section></div><script src="lib/js/head.min.js"></script><script src="js/reveal.js"></script><script>Reveal.initialize({// controls:false   //只用空格切换transition:'convex',//切换过渡效果backgroundTransition: 'convex',// 全屏幻灯片背景的过渡效果});</script>
</body>
</html>

3、一些注意：

（1）data-background 属性来在幻灯片之外添加整个页面的背景。支持四种类型的背景： color, image, video 和 iframe
（2）点击 "Esc" 或 "o" 键来切换概览模式

（3）键盘上点击 »F« 按键即可进入全屏模式。点击 »ESC« 按键退出全屏模式

（4）嵌入的 HTML5 <video>/<audio> 以及 YouTube 内联框架将会在你从一个幻灯片导航离开的时候自动暂停。这可以通过给你的元素指定一个 data-ignore 属性来禁止。

（5）局幻灯片切换效果是通过 transition 配置值来设定的。你可以通过指定<section>元素的 data-transition 属性来重写全局配置。支持效果： none/fade/slide/convex/concave/zoom

Reveal.js HTML5炫酷幻灯片相关推荐

html5炫酷透明地球视觉js特效
下载地址 html5炫酷的地球视觉特表, 含透明大气层.地球表面大陆板块地图(球面大陆打点).火山喷发(球面径向光锥)特效. dd:
前端实现炫酷动效_最好的H5动效视频教程：HTML5炫酷动效案例
一个元素,动态的往往比静态的更能吸引人们的注意力,由此推之,一个操作界面,活泼的动效交互反馈将会给用户带来更好的操作体验和感知.小到APP的Loading动画,大到各大网站炫酷的H5运营页的展现,可以 ...
HTML5炫酷的特效代码下载
原文:HTML5炫酷的特效代码下载源代码下载地址http://www.zuidaima.com/share/1800857292508160.htm 炫酷的效果会随着鼠标移动不停的变更,很赞的
幻灯片制作软件Movavi Slideshow Maker让你制作出炫酷幻灯片
幻灯片制作软件Movavi Slideshow Maker让你制作出炫酷幻灯片!Movavi Slideshow Maker 5 for Mac可以为您的视频添加以添加各种特效.声音.特效.文字.滤镜 ...
Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
使用reveal.js制作一个酷炫的网页ppt
今天教大家使用reveal.js,制作一个简洁优雅的网页ppt.在这之前,你需要一些基本的HTML以及CSS的技能基础. 1.准备工作下载插件,插件下载地址:https://github.com/h ...
【前端学习日记】用reveal.js实现制作网页幻灯片
一.效果展示今天学习reveal.js做了一个简单的网页幻灯片,至于reveal.js是什么,可以去这里看看https://revealjs.com/. 话不多说,上图: 二.重要代码讲解 1.导入 ...
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...
html5炫酷作品源代码,8个超炫酷的HTML5动画演示及源码
利用HTML5可以绘制很多静态的图像,也可以制作一些炫酷的动画,本文分享了8个利用HTML5和CSS3实现的动画演示,同时也分享了源代码供大家下载参考. 1.HTML5 3D点阵列波浪翻滚动画这个H ...

Reveal.js HTML5炫酷幻灯片

Reveal.js HTML5炫酷幻灯片相关推荐

最新文章

热门文章