Shulou(Shulou.com)06/02 Report--

This article to share with you is about how to use the framework Reveal.js used to do WEB presentations, Xiaobian feels quite practical, so share it with you to learn, I hope you can gain something after reading this article, not much to say, follow Xiaobian to see it.

Reveal.js is a tool that helps us to easily create beautiful presentations using HTML, also known as PowerPoint slides. Reveal.js does not depend on any other javascript library and is a stand-alone javascript plugin library. It provides a variety of slide transition effects and is a great online presentation library.

Reveal.js also has many advanced features, complete installation, some reveal.js features like external Markdown and speech annotation, presentation needs to be run locally on a web server, so it needs to run in nodejs environment, installation of node.js and grunt, slightly more complex. The following simple installation combined with examples, using reveal.js to achieve the presentation function.

HTML

Let's start with the main CSS files and js files. CSS files are loaded inside the head, while reveal.js can be loaded before>.

The HTML markup hierarchy needs to be.reveal > .slides > section, which represents a slide and can be repeated indefinitely. If we put multiple inside of one another, they will appear as vertical slides. The interior can be any HTML content such as text, images, multimedia, etc. For example:

slide1

slide2

Javascript

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

Reveal.initialize({ //Whether to display control bar in lower right corner

controls: true,

//Whether to display the progress bar of the presentation

progress: true,

//Whether to display the number of pages of the current slide

slideNumber: 'c/t'

});

The above code implements a control bar that allows the lower right corner to control the transition between presentation slides, the progress bar that displays presentation slides, and the page number that displays slides.

option is set

parameter description default controls whether to display the control bar trueprogress in the lower right corner trueslideNumber whether to display the page number of the current slide, or use the code slideNumber: 'c / t' to indicate the current page/total number of pages. falsehistory whether to add each slide change to the browser history Go falsekeyboard whether to enable keyboard shortcuts to navigate trueoverview whether to enable overview mode of slides, you can use the "Esc" or "o" key to toggle overview mode truecenter whether to center slides vertically truetouch whether to enable touch sliding on touch screen devices Toggle trueloop whether to loop presentation falsertl whether to change presentation orientation to RTL, i.e. from right to left falsefragments globally turn on and off fragmentation. trueautoSlide Time interval (ms) between automatic switching between two slides. When set to 0, automatic switching is disabled. This value can be overridden by the ` data-autoslide` attribute on the slide. 0transition transition effect, none/fade/slide/convex/cave/zoom'default'transitionSpeed, default/fast/slow'default'mouseWheel Whether to enable slide switching via mouse wheel true

In addition, reveal.js also provides full screen mode, just click the »F« key on the keyboard to enter full screen mode, click the »ESC button to exit full screen mode.

Reveal.js also has a fragment concept, which is used to highlight a single element in a slide. Each element with a fragment style will be walked through before switching to the next slide. The default fragment style is invisible at first and then fades in. We can divide multiple paragraphs in the same slide into multiple fragments and add the.fragment style to them, just like in the DEMO presentation:

Slide switching mode

The control bar in the lower right corner controls switching

You can use the keyboard arrow keys to operate

You can set the mouse wheel to switch

Mobile terminal sliding switch

The slide transition effect is set by the transition configuration value. We can also override the global configuration by specifying the data-transition attribute. For example:

This slide will override the presentation transition and zoom!

One more question, how do I set the slide background? Slides are contained in a limited area of the screen, allowing them to fit into any viewport and zoom consistency by default. You can add background to the entire page outside of the slide by adding a data-background attribute to your element. Four types of backgrounds are supported: color, image, video and iframe.

The above is how to use Reveal.js, which is used to make WEB presentations. Xiaobian believes that some knowledge points may be seen or used in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.