Reveal.js also has many advanced features, complete installation, some of the functions of reveal.js, like external Markdown and presentation notes, need the presentation to run on a local web server, so you need to run in nodejs environment, install node .js and grunt are a bit more complicated. This article uses a simple installation, combined with examples of the site, using reveal.js to achieve the functionality of the presentation.
HTML
Let's introduce the main CSS file and the js file first. CSS files are loaded within the head, and reveal.js can be loaded before .slides > section. stands for a slide and can be repeated indefinitely. If we put multiple s inside another , they will be displayed in a vertical slide. The can be any HTML content such as text, pictures, and multimedia. E.g:
<div class="reveal">
<div class="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 configuration values are optional and the following are the default values:
<script>
Reveal.initialize({
// Is the control bar displayed in the lower right corner?
controls: true,
// Whether to show the progress bar of the demo
progress: true,
// Whether to show the number of pages of the current slide
slideNumber: 'c/t'
});
</script>The above code implements a control bar that allows the lower right corner to control the transition of the slide show, the progress bar of the presentation slide, and the page number of the slide show.
Option settings
Parameter Description Default value
Controls: show control bar in bottom right corner true
Progress: whether to show the progress bar of the demonstration
slideNumber: Whether to display the page number number of the current slide, or use the code slideNumber: 'c / t' to indicate the current page/total number of pages. False
History: whether to add each slide change to the browser's history
Keyboard: Enables keyboard shortcuts for navigation
Overview: Whether to enable slide overview mode, use "Esc" or "o" key to switch overview mode true
Center: centering the slide vertically
Touch: enable touch swipe toggle on touchscreen device true
Loop: whether to loop demonstration
Rtl: Whether to turn the presentation direction into RTL, that is, from right to left
Fragments: Enables and disables fragmentation globally. True
autoSlide: The time interval (in milliseconds) to automatically switch between two slides. When set to 0, automatic switching is disabled. This value can be overridden by the data-autoslide property on the slide. 0
Transition: toggle transition effects, there are none/fade/slide/convex/concave/zoom 'default'
transitionSpeed: transition speed, default/fast/slow 'default'
mouseWheel: whether to enable slide transitions via mouse wheel
In addition, reveal.js also offers a full-screen mode that requires only the »F« button on the keyboard to enter full-screen mode and the »ESC« button to exit full-screen mode.
Reveal.js also has a fragment concept that is used to highlight a single element in a slide. Each element with a fragment style will be passed before switching to the next slide. The default clip style is initially invisible, then fades in. We can split multiple paragraphs from the same slide into multiple clips and add .fragment styles to them, just like in the DEMO demo:
<section>
<h2>Slide transitions</h2>
<p class="fragment">Lower right corner control bar control switch</p>
<p class="fragment">You can use the keyboard arrow keys</p>
<p class="fragment">You can use the mouse wheel to switch</p>
<p class="fragment">Mobile sliding switch</p>
</section>The slide transition effect is set by the transition configuration value. We can also override the global configuration by specifying the data-transition attribute. E.g:
<section data-transition="zoom">
<h2>This slide will override the presentation transition and zoom!</h2>
</section>There is also a question, how to set the background of the slide? Slides are contained within a limited area of the scene and, by default, allow them to fit any viewport and zoom consistency. You can add the background of the entire page outside the slide by adding a data-background attribute to your element. Four types of backgrounds are supported: color, image, video, and iframe.
