» » Reveal.js a - framework for doing web presentations

 

Reveal.js a - framework for doing web presentations

Author: bamboo06 on 3-04-2018, 13:57, views: 1568

6
Reveal.js is a tool that helps us easily create beautiful presentations using HTML, which is our common PPT slideshow. Reveal.js does not depend on any other javascript library and is an independent 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 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.

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
10 April 2018 02:38

Alexis Bowen

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
You have shared something after such a long time.I was just thinking yesterday that you haven't posted bestessays paper writing anything for so long and today you posted.

<
  • 0 Comments
  • 0 Articles
10 April 2018 13:51

replica omega watches

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The appearance of replica watches uk this watch is exquisite and exquisite, elegant style overflows with omega replica words. Whether it is day or night, its steel bracelet can shine on rolex replica watches the feminine feminine wrist. The 898A/1 automatic movement is built into the watch to replica watches provide 38 hours of power storage.

<
  • 1 Comment
  • 0 Articles
10 April 2018 22:07

ezifoxom

Reply
  • Group: Members
  • РRegistered date: 15.03.2018
  • Status: Currently Offline
 
Enjoy the new framework for the web presentations and the new approach for this. You can also get the help from the app administration and get the better concern with edusson.com.au to see the new aspects of the technology.

<
  • 0 Comments
  • 0 Articles
13 April 2018 12:59

MarkVeida

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
viagra levitra cialis ads
<a href="http://mylevitraok.com#">levitra 20mg</a>
levitra significado rae carruth
vardenafil 20mg
levitra sspl in mortgage

<
  • 1 Comment
  • 0 Articles
21 April 2018 19:53

ChrisGreenwelt

Reply
  • Group: Members
  • РRegistered date: 21.04.2018
  • Status: Currently Offline
 
Although this framework is new, but still this is used by many dissertation editing services in their websites so that they may embed all of the presentations in their websites.

<
  • 0 Comments
  • 0 Articles
24 April 2018 18:20

buy levitra

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hahahaha, what a comic this YouTube record is! I am still laughing, thanks to admin of this site who had posted at this web page.

If you want to obtain a good deal from this paragraph then you have to apply such methods to your won web site.

Hi there dear, me plus my mom are also watch humorous videos except after I done my homework

Information
Comment on the news site is possible only within (days) days from the date of publication.