Creating Awesome Presentation using RevealJS..
Hi Guys so few we have seen we can design website using JavaScript but how about if we can design our own presentation using JavaScript.reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. It’s documentation is super awesome well described and easy to understand. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add our own custom behavior in our presentation. Reveal.js comes with a broad range of features including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes and syntax highlighted code.
How to start with RevealJS ?
To start with RevealJS , we have to create an empty folder ,after that open it with Visual Studio, after that clone the latest updated git repo of RevealJS.
$ git clone https://github.com/hakimel/reveal.js.gitMove to the reveal.js folder and install dependencies.
$ cd reveal.js && npm installNow we will go through the code base:
So the basic folder structure of RevealJS , the most awesome thing of RevealJS is that it comes with width range of third party plugins which are required for animation, code highlight and transition. css folder contains the scss styles , which we can use for our presentation’s styling. dist folder contains the css styles which are converted from scss to css. examples contains the example of several features provided by RevealJs as reference to the user, as I mention It’s boilerplate code makes RevealJS very user friendly. js is the folder which contains all the javascript code, components, controllers, utils contains all javascript code of features of RevealJS.config.js contains the default configuration of the RevealJS, we will discuss about it later.index.js does the Dom rendering part of the RevealJS, just like index.js file of React boilerplate.reveal.js integrates all the features of RevealJS logically. It actually constructs our presentation by adding features we choice to add. We used to add features to our presentation by :
<script>
Reveal.initialize({
hash: true,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
reveal.js actually config our reveal object or in simple word our presentation. We can refer to the documentation of RevealJS for more details. plugin contains the third party plugin setups like highlight for code highlight, markdown for creating slide using external markup files ,etc. node_modules will be created when we do npm i , demo.html is the html file , which contains a presentation on Reveal Js which is having all the features provides by Reveal.JS, It’s a good reference for starting with RevealJS. And We have created our code in index.html. Now we will see our index.html file.
So in index.html we are creating our presentation. Before going to the full detailed explanation of the code , We need to know some basic syntax of how we create each slides of our presentation. The presentation markup hierarchy needs to be .reveal > .slides > section where the section element represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slide. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence.
So inside html tag we have created the head tag which contains meta tag , for meta data, title for our project title, and link will contain all the css files we will be using in our presentation. reset.css contains browser specific styles, reveal.css contains presentation styles and Black.css is for theme styles, we want to keep the black as our theme color or background color .monokai.css is the styles for highlight plugin which is used for highlighting syntax code. Now comes body, As we mentioned .reveal>.slides>section , we have created a div with class name reveal, inside that slides and then section, each section will be a slide for our presentation.
So We are creating a presentation on Overview of Medium Profile, Actually I have created this presentation to cover all the features of RevealJS, In first slide there will be image , title and creator details. On the second we have added animation for including code highlights. Our second slide will be having sub category defined by 1/0/0 , initially It will show all the code line highlighted , when we click on the next arrow it will show 4th line , 8,9,10,11 lines highlighted.
<code class=”hljs” data-trim data-line-numbers=”|4,8–11">
</code>
this line actually means first highlight all the lines and then on the next slide it make only 4, 8,9,10,11 lines highlighted, RevealJS uses plugin called highlight for this feature. On the next slide we have implemented vertical slide , if we wrapper several section with a single section , those sections acts as a vertical slides and the main section will be the root slides. So there are two section inside a single section, means those section will act as vertical slides. We can add styles on animation by adding styles on data-auto-animate-easing parameter of section, these are all the pre-defined reveal classes ,for more details we can check the documentation. We have added animation to the next consecutive slides as well. We can also create slides using markdown text, we have to just add data-markdown property to the section tag .RevealJS also support creation of slides using external markdown files for that it uses markdown plugin. There is another feature called fragments, means the appearance of the text can be controlled by clicking on the next arrow or arrow controllers of our presentation. We can also add styles on the fragment , means we can also define how the text should appear on our presentation , from top , bottom, should fade out , fade in etc. We can change the style on transition in between of our presentation, like by default ,it sets to none ,on clicking on the options like Fade or Slide etc. we will append ?transition=slide#/transitions to our slide url , which will change transition style of our presentation. We can also add background color to our slides by passing color on the data-background props of section. In RevealJS we can also use image as our custom controller of the slide, like if we want to slide our presentation to down we will wrap it with anchor tag and add the class navigate-down. We can add background Image on slides, We can also repeat a image in our background of slides by adding data-background-repeat= ‘repeat’. And most significantly we can add video and website link as well in slide background by adding the links on the data-background-video and data-background-iframe props on section respectively. RevealJS also provides useful features for the presenter , It provides a special comments section for each slide which will be visible to presenter only while presenting, this feature is called notes features, RevealJS uses notes plugin for the implementation. A presenter can also pause presentation by pressing B and vice versa. Now let’s see the final Presentation:
This are few of the slides from the presentation, I will be sharing the github link of the code base, and documentation link of RevealJS. Till then please don’t stop explore new things. There are plenty of awesome libraries and packages out there which provides us cool feature for making wonderful websites and presentation . If you want to be more geeky while presenting our presentation , I will suggest you , you should always try such technical approach for creating presentation, where you write your own javascript code for creating presentation rather than using power point or any other software.
Documentation:
Code:
HAPPY CODING…:)
