Reveal.js
A framework that helps us to easily create a beautiful presentation using HTML.
Slide transitions
Lower right corner control bar control switch
You can use the keyboard arrow keys
You can use the mouse wheel to switch
Mobile sliding switch
Automatic sliding
// Swipe once every 5 seconds, if set to 0, it will not slide automatically
Reveal.configure({
autoSlide: 5000
});
Slide background
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 <section> element. Four types of backgrounds are supported: color, image, video, and iframe.
Slide transition effect
The slide transition effect is set by the transition configuration value. You can override the global configuration by specifying the data-transition attribute of the
Support effect:none/fade/slide/convex/concave/zoom
Embedded multimedia
The embedded HTML5 <video>/<audio> and YouTube inline frames will automatically pause when you navigate away from a slide. This can be disabled by specifying a data-ignore attribute for your element.
Internal links
Linking between slides is easy. In the following example, the first link points to the index of another slide, and the second link points to the ID property of another slide (<section id="some-slide">):
Link to slide 4Overview and full screen mode
Click the "Esc" or "o" key to switch the overview mode. When you are in this mode, you can still navigate between slides.
Just press the »F« button on your keyboard to enter full screen mode. Press the »ESC« button to launch the full screen mode.
Embed pictures and links
Click to view tutorial