Reveal.js a framework for making web presentations

Reveal.js is a great way to help us easily use HTML to create beautiful demos, which are our common PowerPoint slides. Reveal.js does not rely on any other JavaScript libraries, it is a standalone JavaScript plugin library. It offers a variety of slide transitions and is a great online demo library.

Reveal.js also has many advanced features, complete installations, some reveal.js features like external markdown and lecture notes, need to run a presentation on a local Web server, and therefore need to run in a nodejs environment, Installing node. js and Grunt is a bit more complicated. This article uses the simple installment, unifies the site instance, uses the Reveal.js realizes the presentation function.

Html

We first introduce the main CSS files and JS files. CSS files are loaded in the head, and reveal.js can be loaded before </body>>.

 <  link  rel  = "stylesheet"   href  = "Css/reveal.css"  >  <  link  rel  = "stylesheet"   href  = "Css/theme/moon.css"  >  <  script  src  = "Js/reveal.js"  ></ script  >  

The hierarchy of HTML tags needs to be. Reveal >. slides > section Such,<section> represent a slide and can be infinitely duplicated. If we put multiple <section> inside another <section>, they will be displayed as vertical slides. <section> internal can be text, pictures, multimedia and other arbitrary HTML content. For example:

<Divclass= "Reveal">    <Divclass= "Slides">        < Section>Slide1</ Section>        < Section>Slide2</ Section>    </Div></Div>

Javascript

At the end of the page, we need to run the following code to initialize the slide. Note that all of the configured values are optional, and the following are the default values:

<script>reveal.initialize ({    //  is the control bar true in the lower-right corner    ,     //  whether to display the progress bar of the presentation    true,    //  whether to display the number of pages of the current slide    slidenumber: ' c/t '}); </script>

The above code enables the control bar in the lower right corner to toggle the display slide, display the progress bar of the presentation slide, and display the page number of the slide.

Option settings

Parameters	Describe	Default value
Controls	Whether the control bar is displayed in the lower right corner	True
Progress	Whether to show the progress bar of the presentation	True
SlideNumber	Whether to display the number of pages for the current slide, or to use code slidenumber: ' c/t ', which indicates the current page/total pages.	False
History	Do you want to add each slide change to your browser's history?	False
Keyboard	Whether to enable keyboard shortcuts to navigate	True
Overview	Whether to enable the slide overview mode, you can use the ESC or O keys to toggle the overview mode	True
Center	Whether to center the slide vertically	True
Touch	Whether to enable touch swipe toggle on the touchscreen device	True
Loop	Whether to loop the demo	False
Rtl	Whether to change the direction of the presentation to RTL, that is, from right to left	False
Fragments	Globally turns fragmentation on and off.	True
Autoslide	The interval of time (in milliseconds) between two slides automatically switches off automatically when set to 0, which can be overridden by the ' Data-autoslide ' property on a slide	0
Transition	Toggle transition effect, with none/fade/slide/convex/concave/zoom	' Default '
Transitionspeed	Transition speed, Default/fast/slow	' Default '
MouseWheel	Whether to toggle slides with the mouse wheel enabled	True

In addition, Reveal.js also provides full-screen mode, just to click on the keyboard? F? Press the button to enter full-screen mode, click? Esc? Press the key to exit full-screen mode.

Reveal.js also has a fragment concept, which is used to highlight a single element in a slide show. Each element with a fragment style will be traversed before switching to the next slide. The default fragment style is to start invisible, then fade in, and we can divide multiple paragraphs in the same slide into multiple fragments and add the. Fragment style to them, just like in the demo demo:

< Section>    <H2>Slide Transition Mode</H2>    <Pclass= "Fragment">Lower right corner control bar control Toggle</P>    <Pclass= "Fragment">You can use the keyboard arrow keys to manipulate</P>    <Pclass= "Fragment">You can set the use mouse wheel to toggle</P>    <Pclass= "Fragment">Sliding switch on the moving side</P></ Section>

About slide transitions are set by transition configuration values. We can also override the global configuration by specifying the Data-transition property. For example:

<data-transition= "Zoom">    <H2> This slide would override the presentation transition and zoom! </ H2 > </  Section >

One more question, how do I set a slide background? Slides are included in a limited area of the screen, allowing them to accommodate any viewport and zoom consistency by default. You can add an entire page's background outside the slide by adding a Data-background property to your <section> element. Supports four types of backgrounds: color, image, video, and IFRAME.

Reveal.js Project GitHub Address: Https://github.com/hakimel/reveal.js

Reveal.js a framework for making web presentations