make presentation with javascript

Top 9 JavaScript frameworks to create beautiful presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal ( 64.2k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress ( 37.3k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Sli dev ( 27.3k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.1k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.5k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.2k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.1k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.3k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

PptxGenJS ( 2.1k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Table of contents:

• jQuery HTML Presentation Frameworks
• Vanilla JS HTML Presentation Frameworks

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

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.

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 your own custom behavior using our JavaScript API.

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

• 10 Best Mobile-friendly One Page Scroll Plugins
• Prev: Weekly Web Design & Development News: Collective #330
• Next: Weekly Web Design & Development News: Collective #331

You Might Also Like

10 Best JavaScript Plugins To Paginate Large HTML Table (2024 Update)

10 Best Mega Menu Systems In JavaScript And Pure CSS (2024 Update)

10 Best Rating Systems In JavaScript & Pure CSS (2024 Update)

10 Best Marquee-like Content Scrolling Plugins In JavaScript (2024 Update)

10 Best Tag Cloud Generators In JavaScript (2023 Update)

7 Best Github Style Calendar Heatmap Plugins In JavaScript

Add Your Review

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

• Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

• Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

• Open index.html
• Change the CSS import to reflect the theme you want to use

The theme files are:

• solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

• Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
• Create a new  .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
• Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be  .css , not  .scss .
• Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

• Title Font: Viga
• Content Font: Open Sans
• Code Font: Courier New
• Cursive Font: Great Vibes
• Yellow Color: #F9DC24
• Add a  .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of  !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the  !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

• fade-in-then-out
• fade-in-then-semi-out
• highlight-current-blue
• highlight-red
• highlight-green
• highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

• Location Stockholm
• Education Siena College
• Work Software Engineer at Spotify
• Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

• Location Antibes, France
• Work Senior Software Engineer at Spotify
• Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

• Location Lake Villa, IL
• Education Bachelor in Electronics Engineering
• Work Computer & Technology Enthusiast
• Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

• Location Singapore
• Work Web Developer at FirstCom Solutions
• Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

• Email [email protected]
• Location Indianapolis, IN
• Education Purdue University
• Pronouns he/him
• Work Senior Frontend Engineer at Whatnot
• Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

• Location Saratoga Springs,NY
• Education BA, University of Michigan
• Work Documentarian
• Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

• Location Palm Bay, FL
• Education FullSail University
• Work Developer Relations Manager at MetaMask
• Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

• Email [email protected]
• Location Abuja Nigeria
• Work Project Manager Techibytes Media
• Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

• Email [email protected]
• Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

• Copy an existing presentation folder
• Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

• Location Los Angeles
• Education Engineering, Physics, and Math
• Joined Sep 6, 2018

Fantastic post. I just loved it.

• Location France
• Work Co-Founder of Depot
• Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Gustavo H. J. - Apr 28

Earth Day Celebration Landing Page

Nic - Apr 27

How to Print to Browser Console from Razor View Page in ASP.NET MVC

Shekhar Tarare - Apr 27

Managing View State and Client-side Routing in SPAs

Karson Kalt - May 1

We're a place where coders share, stay up-to-date and grow their careers.

Create Incredible Web Presentations with Reveal.js

Feb 24, 2023 · 12 min read

Reveal.js is an open-source HTML presentation framework. Anyone with a web browser can use it to make attractive presentations for free. The program allows anyone with a web browser to create fully-featured and interactive presentations that support CSS 3D transforms , nested slides, and a variety of other capabilities. It is recommended for those interested in programmable techniques and web technology.

It has lots of benefits. Some of these consist of the following:

• Responsive design: Reveal.js presentations scale to fit the user’s screen, making them compatible with a wide range of devices.
• Interactive elements: Reveal.js supports these elements, which can improve user experience and make presentations more interesting. Interactive elements include links, images, and videos.
• Themes can be readily modified to reflect the user’s brand or tastes to make a presentation look more attractive when the theme matches the content in a slide.
• Simple and intuitive user interface: Reveal.js enables users to build and edit presentations with minimal technical expertise.
• Open-source: Reveal.js is free to use, and its source code is available for users to examine and edit.

React Reveal vs. Reveal.js: what’s the difference?

The distinction between React Reveal and Reveal.js will be demonstrated in this section:

• HTML, CSS, and JavaScript are the foundations on which Reveal.js is constructed, but React Reveal requires React.
• Reveal.js is the way to go if you want to make static presentations and need to deal with a vanilla JavaScript-based project. React Reveal is the greatest option for creating interactive presentations if you are working with React.
• You can make interactive slides with Reveal.js, which has a number of features like slides and transitions. You can also make interactive slides with React Reveal, but you can also do so while using React components .
• Additional capabilities offered by React Reveal include a higher degree of customization and support for animations.

Alternatives to Reveal.js

Many Reveal.js alternatives may be utilized to make engaging presentations with eye-catching visuals. Several well-liked choices include:

• Impress.js , a JavaScript library that enables the creation of 3D presentations with a range of transitional effects.
• Prezi : An online presentation tool that lets users zoom in and out of slides to make dynamic, interactive presentations.
• PhotoSwipe : An open-source JavaScript picture gallery and lightbox, PhotoSwipe. It is modular, independent of frameworks, and made for desktop and mobile devices.
• Owl Carousel 2 : Owl Carousel 2 is a jQuery carousel plugin with full customization and touch and drag functionality.
• FlexSlider is a fantastic, totally responsive jQuery slider plugin. It offers designers and developers a quick way to launch a slideshow, carousel, or image slider.
• Keynote : Apple’s PowerPoint-like presentation software for Mac and iOS devices.
• Haiku Deck : A web-based application that enables users to design minimalistic presentations with spectacular visual effects.

Getting Started

In this session, we’ll use Reveal.js to create spectacular presentations by utilizing JavaScript. In this section, we’ll learn everything we need to know to get Reveal.js running on our project. To write code to create stunning presentations, let’s first understand the basic setup and installations before using Reveal.

Installations

The best way to install Reveal.js is to clone the source code on GitHub. Utilizing this is extremely simple for you. Just use the code below in your terminal to clone the GitHub repository.

Run the following command to install all the necessary packages and start Reveal.js after you’ve cloned the repository for it in your working directory.

Furthermore, once Reveal.js has been successfully installed in your project, you must start the Reveal.js server on port 8000 (the default port) by executing the following code:

Please use the code below if you decide to run the Reveal.js server on a different port:

You can easily install Reveal.js manually using npm or yarn if you don’t want to clone the GitHub repository:

You may easily include the Reveal.js file as an ES6 module once it has been installed in your front-end framework, such as React:

Folder Structure

This section will go over Reveal.js’ folder structure. When changes are made, the folder structure might change, but this won’t affect how Reveal.js is utilized in our project.

Since we are not the original developers, we won’t be explaining every file in Reveal.js. I’ll go over the most significant directories and files first:

• CSS files that describe how a presentation should appear and be organized are stored in the CSS folder.
• The JS folder houses the JS files that provide interaction and other functionality.
• The presentation begins with a file called index.html that also contains the HTML markup for the slides.
• A reveal.js file contains reveal.js’ setup parameters.

Reveal.js’s folder structure is shown in the image below:

As you can see in the screenshot above, I installed Reveal.js in the opened terminal and launched it by typing npm start .

Starter Template

The starter template is just what is loaded in the index.html page of the Reveal.js folder structure, which we mentioned in the section labeled “Folder Structure” above.

Launch your browser and navigate to the following URLs: http://localhost:8000 The link takes you to the active running page where our presentations will appear in the browser:

This section will concentrate on the contents of Reveal.js. On Reveal Web Presentation, the contents are the components of a responsive presentation. We can use Reveal.js on any project once we have worked with all the components that go into making responsive, stunning presentations, covering Markup, Markdown, Backgrounds, Media, Code Math, Fragments, Links, and Layout.

Markup is the first step in getting started with Reveal.js, and you must use the section element to build markups in Reveal.js. Please remember that the parent class will have the class name . reveal , and the reveal class div will have a child element with the class name .slide . If you place the section element line by line, as in the code below, you will have a slider that moves horizontally.

To make a vertically moving slide, add sections within a section; this is a simple technique; see the code below:

Just use the up and down arrows to view the previous and next slides.

Please use the code below to add a horizontal and vertical sliding format. It’s really simple; the horizontal section of our code will stand alone and not be inside of any section; however, the vertical section will have sections inside of a section.

Backgrounds

It’s simple to add a background color to a slider in Reveal.js; all you have to do is include an attribute that initializes the color for a specific area. You can use the data-background-color attribute to add a background color to a section and specify the value to any color name you choose. View a responsible slider with background colors by referring to the code and outputs below.

Click here to read more about background colors in Reveal.js.

In Reveal.js, media can be used as a presentation. We’ll be showing a video as a presentation in this section. The data-autoplay autoplay attribute must be included in the video tag as an attribute to make the video play when its slide section is open. Code:

You can present codes on the slide and have the code highlighted using Reveal.js. Highlight.js is the only thing that powers the code highlight. You will always use the <code> element when presenting code in Reveal.js, and all you need to do to make HTML escape the default behavior and treat the content as genuine code. Add the data-line-numbers attribute to the <code> element and specify values that will represent the line of code that will be highlighted, as shown below.

In Reveal.js, mathematical expressions can be displayed. To use math in your presentation, you must include the RevealMath.KaTeX plugin, which will reflect the math in your presentation.

Let’s run The Lorenz Equations as a presentation:

The Lorenz equations are a set of partial differential equations that describe two-dimensional fluid flow. Please click here to learn more.

On a slide, fragments are utilized to draw attention to or gradually reveal specific parts. Before moving on to the next slide, each element with the class fragment will be stepped through.

Please include the data-fragment-index attribute and set its value to a number if you wish to use fragments. The number value indexed 1 will appear first, followed by the number 2, in that order.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data

Happy debugging! Try using OpenReplay today.

While watching slides, Reveal.js also simplified things for us. The following slide in a presentation can be easily reached by clicking a link , and the previous slide can likewise be reached by doing the same.

If you want to navigate to a slider, be sure that the portion of the slider you are visiting has an Id that matches the value of the “href” attribute on the HTML anchor element that is now being clicked.

To instantly navigate to the first page of the slide without passing through any intermediary sections, add ”#/0” (0 == first-slide) to the clickable link that will take you to the first page of the slide.

This section will go over the layout in Reveal.js. You can change the text size, and you can also construct a slide by showing an item on top of the previous item; this is known as staking.

Let’s practice stacking by simply laying images on top of one another.

Now that we understand how stacking works, let’s spend some time working with FIT TEXT. We’ll display some text in a responsive large format in this part under layout by simply utilizing the class name r-fit-text. Below is a code sample of big text applied to Session Replay:

Please note that you can move forward and backward with the arrow keys.

Customization

In this section, we’ll customize some of Reveal.js’s presentations, focusing on Themes and Transitions, the two most significant things to consider while working with Reveal.js.

Theming is essential for creating anything on the internet. In Reveal.js, you can integrate some theme collections supplied by Reveal.js developers.

To use a theme of your choice, import the theme’s CSS styles into your project. The default theme is black when you install reveal.js or clone the Reveal.js repository. A line of code for incorporating a theme into your project is provided below:

Look closely at the code above; you can see where I wrote theme-name ; please replace it with any of the theme names listed below:

• Black (default)

Below, I used a theme name titled sky on a slide:

Utilizing the dracula theme produces the theme below:

Now that we’ve learned more about theming , I’d like you to experiment with different theme names to see how they look on your web presentation slide.

Transitions

Reveal.js provides us with some amazing transition effects to use while making a presentation on the web. It is quite simple to use these transition effects , and some of these transition effects include:

To use these effects, insert a data-transition attribute into your HTML element and set the attribute’s value to the name of the transition effect listed above.

That’s all for transitions in this section; if you want to learn more about Reveal.js transitions, please click here .

We’ll go through presentation features in Reveal.js, such as vertical slides and auto-slide in this section, and since we’ve already covered the implementation largely on vertical slides, we’ll go over more in depth. Let’s get started.

Vertical Slides

Moving between slides by default employs a horizontal sliding transition. These horizontal slides are the main or top-level slides in your presentation. We can’t rely on just one direction in a presentation, and the usage of presenting on slide vertically is critical. We learned how to design a slide that uses vertical direction earlier in this article.

Below is a code sample on utilizing vertical slides:

Auto-Animate

Reveal.js supports auto animation . The auto animate plays a vital role in web presentation. Auto animation applies smooth transition to a slide content, which is noticeable when viewing a presentation. For example, when you set margin-top: 40px to a section, you will see the smooth animation on how the second section comes down slowly. We’ll be implementing some examples here in this section.

To initiate the auto-animate to a section, add the data-auto-animate attribute to the two or multiple sections you want to integrate the auto-animate effect.

The code output above shows that we added margin-top: 100px to the section child (h1) using data-auto-animate , and you can see the effect applied smoothly and removing the default slide horizontal direction to a slightly vertical direction. Please remember that the element in this example is internally hidden but moved using the margin-top attribute. JavaScript will use a CSS transform to achieve fluid movement. Most CSS attributes may be animated and transitioned using the same technique, allowing you to modify positions, font-size, line-height, color, padding, and margin.

We’ll be working on auto-slide in a slide in this section. This is relatively straightforward to accomplish; simply look at our JavaScript code at the bottom of our HTML page and add the autoSlide duration as an integer and set the Boolean value of a loop to true :

JavaScript:

A play/pause icon can be found in the bottom left corner of the slide, as shown in the output above. A round loader describes the progress of the timing function in the icon. The following code is for the output presentation:

Slide Numbers

Numbering is important in slides, and you may add a slider number in two ways: obtain the current slide number and get the slide number and the overall slide count (X/X).

Set slideNumber to true in the config section at the bottom of the HTML page to obtain the real slide number.

Slide Code:

If you look closely at the output above, you will notice a page number counter in the bottom right corner of the screen. When I reached the vertical part while sliding horizontally, the counter format changed to 3.1, which indicates 3 represents the last horizontal slide page and 1 represents the first vertical slide.

To set a slide number in (X/X) format, set your config to the code below:

Please look closely at the bottom right corner of the screen; you will see the page numbering in X/X format. See the code for the output below:

Please, click here to learn more about slide numbers.

Useful hints and guidelines for Reveal.js

In this section, we’ll discover valuable hints and guidelines for working with Reveal.js, which will greatly improve our experience working with Reveal.js for presentation:

• Use keyboard shortcuts to navigate through slides: Use arrow keys or the space bar to move ahead and back through slides.
• Personalize the appearance and feel of your presentation: You can alter the theme, font, and background color of your slides with Reveal.js.
• To add background images to presentations, use the data-background attribute: You can change a slide’s background image by adding the data-background attribute to the slide’ element.
• To set the transition effect between slides, use the data-transition attribute: Transition effects such as ‘slide,’ ‘fade,’ ‘convex,’ and ‘concave’ are available.

I hope you enjoyed this article; we covered everything we needed to know to get started with Reveal.js. We also learned about how to use Reveal.js in our project. There are many more features in Reveal.js, and you can learn more by visiting Reveal’s official website . You may also begin integrating presentations into client’s projects or your project by using Reveal.js; this will help you grow your experience utilizing Reveal.js.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo

More articles from OpenReplay Blog

Apr 19, 2023, 4 min read

How to Use Attribute Inheritance in Vue 3

{post.frontmatter.excerpt}

Feb 13, 2023, 8 min read

How to use client and server-side web workers

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

The HTML Presentation Framework

hakimel/reveal.js

Folders and files, repository files navigation.

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com .

The framework comes with a powerful feature set including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX typesetting , syntax highlighted code and an extensive API .

Want to create reveal.js presentation in a graphical editor? Try https://slides.com . It's made by the same people behind reveal.js.

Hakim's open source work is supported by GitHub sponsors . Special thanks to:

Getting started

• 🚀 Install reveal.js
• 👀 View the demo presentation
• 📖 Read the documentation
• 🖌 Try the visual editor for reveal.js at Slides.com
• 🎬 Watch the reveal.js video course (paid)

Releases 47

Sponsor this project, used by 785k.

Contributors 322

• JavaScript 59.7%

A Presentation Framework by @marcolago

Press Down Key to continue Or Swipe Up if you prefer.

What is it?

Flowtime.js is a framework for easily building HTML presentations or websites.

It’s built with web standards in mind and on top of a solid full page grid layout.

The animations are managed with native and accelerated CSS3 transitions. Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.

Press Down Key or Swipe Up to continue.

Compatibility and Support

Flowtime.js is fully compatible with real moderns browsers:

• Internet Explorer 10

Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities will work.

In older browsers degrades to a bi-directional scrolling navigation with anchor links.

Touch Devices Support

On touch devices you can navigate through slides swiping in all directions.

By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.

Mastering the Navigation

You can navigate in many ways. The most common way is using the keyboard.

Navigation Keys and default behaviours:

• Down Key goes to the next page or shows up the next fragment (we’ll see this later).
• Up Key goes to the previous page or hides the fragment.
• Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).
• Left Key goes to the adjacent page in the previous section.

Alternate Navigation Control

Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:

• Down Key goes to the next page skipping all the fragments.
• Up Key goes to the previous page skipping all the fragments.
• Right Key goes to the first page in the next section.
• Left Key goes to the first page in the previous section.

Some Other Keys

Because: the more, the better.

• Page Up Key goes to the first page of the current section.
• Page Down Key goes to the last page of the current section.
• Home Key goes to the first page of the first section.
• End Key goes to the last page of the last section.

Overview Mode.

You can look at the entire presentation by pressing ESC Key . When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.

Try it out!

WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview Mode; see the documentation for more info.

Navigating the Overview

In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.

Navigate via Links or Javascript API

You can link every page by simply building the href value using this schema:

Where data-id attribute is an optional attribute you can add to every section or page. I.e.: if you want to go to back to the first page click here (press backspace to come back to this page) .

You can also trigger every navigation behaviour using the Flowtime.js Javascript API . Take a look at the documentation if you want to learn more.

Navigate With History

Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.

This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.

Progress Indicator

You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.

Look at the bottom right corner and you can see a miniature of the presentation structure.

Clicking on a page thumb will navigate to that page.

Fragments Support

The built in fragments navigation allows to advance step by step inside a page. Press down to try.

You can discover single elements or even a single part of an element, one at a time.

Fragments navigation is deeply customizable with some configuration options You can learn how in the documentation .

Fragments Unleashed

Thanks to some special classes you can add a couple of useful custom behaviours.

• The .step fragment will partially fades out;
• The .shy fragment will completely hides itself;
• You can use this two special fragment types to easily create special effects.

This is a .shy example!

And this is a .step one!

Default HTML Structures

Flowtime.js comes with a default theme that styles the most common HTML structures, like:

1 st Level Heading

2 nd level heading, 3 rd level heading, 4 th , 5 th and 6 th level heading, unordered lists.

• Another item.
• Just another item.
• Ok, we get it!

Ordered Lists

Definition lists, quotes and citations.

My favourite quotation: The bad craftsman blames his tools .

Sotto un cespo di rose scarlatte dai al rospo the caldo col latte. Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.

Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute on HTML5 Doctor.

Theme and Styling

If you don’t like the default theme or you want to build your own (or both things), or if you want to build a website on top of Flowtime.js, you can write your own theme and replace the default one.

Theme and core css are in separate files so you can’t break the layout (unless you override some classes).

Fluid Layout

Everything can be fluid, just use em , rem and % units if you want to make an element resizable.

Image Management

Images are fluid like all the other content.

You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.

Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide. Look at the source code to learn how to write the markup.

Stacked Images

Centered Stacked Images

About the Centered Stack

You can center anything, not only images!

Just like this content. Useful for splash pages and titles.

And you are not limited to stacks, you can center what you want.

Native Parallax Support

By popular demand Flowtime.js includes native parallax support*.

Simply add a parallax class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using data-parallax attribute.

For an example go to the next page ; for more info read the documentation .

* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".

The Invaders from Audiogalaxy

This Page Is Just for Testing the Parallax

In the previous page, from left to right:

Code Snippets Highlight

Code highlight is a courtesy of Lea Verou’s Prism . Because I really didn’t want to re-invent the wheel. You can use what you want, it’s not a dependency (but it’s very smart and cool).

Events and Custom Implementations

When navigated to a page Flowtime.js fires a custom flowtimenavigation event full of useful properties to customize or build your components or behaviours.

Read the documentation to learn more about this event and its properties.

Some Examples

You can take a look at some examples to explore some of the possibilities that Flowtime.js offers to customize your experience.

• Cross Direction
• Custom Fragment Animations
• Duplicated IDs
• Modal Overlay
• Page Titles in Navigation
• Scroll the Current Section Only
• Sub Pages Demo
• Video Embedding and Controls

Continues …

More Examples

• Default Behavior;
• gridNavigation(false);
• nearestPageToTop(true);
• rememberSectionsLastPage(true);
• rememberSectionsStatus(true);

If you need a specific example or if you have a question about a feature feel free to ask or open an issue .

Use It! It’s Free

This project is open source, feel free to contribute to the development on Github .

Feedbacks, suggestions and bug reports are welcomes.

Use it as you wish and build great things. And when you have done so let me know the URL, I will appreciate it.

Designed and coded by Marco Lago Interaction/Experience/Game/Designer/Developer

You can find me on Twitter as @marcolago

If you like this work spread the word, you know how ;)

Build and Publish a Presentation with RevealJS and Github

If you've ever given a presentation at a conference, meetup, or even a lunch and learn for your colleagues at work, you probably needed some slides to go along with your talk. The standard tools to make these are Microsoft PowerPoint, Apple Keynote, or Google Slides. These will get the job done, with PowerPoint and Keynote being more feature rich than the free Google Slides.

However, if you're a web developer, there is another option. RevealJS is a JavaScript framework that allows you to leverage your HTML, CSS, and JavaScript skills to build beautiful and polished presentations. Some benefits this has over the standard software packages include being able to use version control (since the presentation is just html, css, and js files rather than a proprietary binary format), collaborate with others, and the sheer joy of using your favorite web technologies and text editor.

This post will walk you through how to get started with RevealJS, build a simple presentation, and publish it to Github Pages so you can share it with the world. If you want a quick "reveal" so to speak, here is the sample presentation we're going to be building and the source .

Getting Started

The build tooling for RevealJS uses Node.js so make sure you have that installed. I like to be on the latest LTS version.

Start by cloning the RevealJS repo from Github, installing the dependencies, then run the dev server:

At this point, you should be able to navigate to http://0.0.0.0:8000 and view the simple presentation that comes with the repo. Use the left/right arrow keys to navigate back and forth, or click on the caret icons displayed on the bottom of the slide. As you navigate the slides, notice the url changes, eg: http://0.0.0.0:8000/#/1 and a blue progress bar animates across the bottom of the page. All these features are configurable as we'll learn later.

Now we're ready to start building the presentation.

Open the demo-presentation project (or whatever you called it in the Getting Started step earlier) in your editor of choice. I'll be using VS Code.

Open the file index.html - this is where you'll be making the majority of changes. The entire presentation is contained in a div with a class of slides , which is contained in another div with a class of reveal . Each <section>content...</section> element denotes a slide.

Right now it looks as follows:

Delete the two <section> elements that came with the repo, and replace them with some content as shown below:

As soon as you save the changes, the presentation should refresh in the browser. The auto-refresh feature is provided by the development server that comes with the project. At this point, there are still two slides but the content has changed. Notice the default styles that get applied for <h1> , <h2> , and <p> elements. Don't worry if you don't exactly like these styles, everything's customizable.

Also notice how everything is centered and pleasing to look at. Try resizing the browser window or use Device Mode in Chrome devtools. Mobile/responsive design is already built into the presentation styles, nice!

Vertical Slides

Generally a presentation progresses linearly from left to right across each slide. But sometimes, the content needs to go off on a tangent, say to explain some point in more detail before moving on with the rest of the presentation. Vertical slides are a great way to organize this type of content. To try this out, nest a <section> element inside another element like this:

Save the changes, then navigate to the third slide in the presentation. Notice there's now a down caret in addition to the left pointing caret. Click it (or press the down arrow), the slides will now start to transition according to the nested <section> elements. This only works one level deep, do not try to nest any deeper. At any point the usual left/right key or arrow navigation still works to move to the previous or next slides.

With a lot of vertical slides, it can be useful to jump out and get a bird's eye view of the entire presentation. To do this, press the o key from any slide. It should look something like this:

Press the esc key to return to regular slide mode.

To add images to the presentation, make an images directory in the project root and place any image(s) you'd like in this directory. Then simply use the standard html <img> tag to display the image centered in the slide, don't forget the alt tag:

Note: The framework is not opinionated about where the images are placed so feel free to name this directory anything you like or even to place the images in project root if there's not too many of them.

Of course you can also simply link to an image from the internet, for example:

Full Screen Background

By default, all the slide content is contained within a portion of the screen to fit any display and scale. But if you want to break outside of this container to use up the entire background, this can be done with the data-background attribute on any <section> element.

For example, to have an animated gif take up the entire slide:

Animate in Visibility

Fragments are used to animate content in a slide, one element at a time. This is useful when you don't want all the content to show up at once. A classic example is a bullet point list where you want to talk to each point one at a time. To add visibility animation to any element, simply add class="fragment" .

For example:

Use the left/right arrow keys to have the elements animate in, or click on the caret icon at the bottom of the presentation.

By default, fragments will animate in the same order that they appear in the DOM. The order can be controlled by adding data-fragment-index to any element that has a class="fragment" . For example, to display a list in reverse order:

The default animation is for elements to fade in. But there are a number of other animations available such as fade up, down, left, right, changing color etc. To use these other effects, add the appropriate class to the fragment. For example:

The RevealJS docs list all the possible fragment animation classes .

The framework comes with a lot of built in styles for headers, paragraphs, lists etc. It's possible to customize any of these by adding the data-state attribute to any <section> element.

The data-state attribute causes the value, in this example my-style to be added as a class on the <body> element. This allows for overriding of the framework styles by using a selector such as .my-style p .

One thing I couldn't find in the docs was where to place custom styles. The quickest way for now is to add a file in the dist dir such as dist/custom.css and then add a link to it in the <head> section of index.html , after all the framework css is loaded:

Now edit custom.css - adding a class for the value in data-state , for example, to make the paragraph text bright pink and pop out:

Speaker Notes

One really helpful feature when giving a talk is the ability to have speaker notes displayed in a separate window from the presentation. RevealJS makes it easy to add these. Add an <aside class="notes"> element anywhere in a <section> element (i.e. slide), then that content will not be displayed in the slide, for example:

From the browser where the presentation is being displayed, press s to reveal the speaker notes in a new browser window. This window also conveniently has a timer, and displays the current and upcoming slide to help keep you on track. It looks something like this:

By now you'll have noticed there's some common styling applied to all the slides such as a black background and blocky white text. These styles come from the black theme stylesheet that is referenced in the head section of index.html :

This can be changed to any of the built-in themes RevealJS comes with, which are listed in the dist/theme directory. To change, simply swap out black.css for any other theme, for example, I like moon theme, which has a dark blue background and thick grey text:

Here's one of the slides from our presentation now with moon theme applied:

It's also possible to create a custom theme .

Slide Transitions

Up until now, we've been dealing with the HTML and CSS. But to further customize the presentation, there's a <script> section at the bottom of index.html where the framework gets initialized. Here you can control many features of how the presentation will behave. For example, by default, the slides transition with a slide animation going from right to left. This can be changed by specifying the transition property of the object passed to the Reveal.initialize function.

For example, to use a convex transition:

Further Customization

Besides slide transitions, many more features of the framework can be controlled through configuration. Just to list a few examples:

Read about all the configuration options in the RevealJS docs.

Publish to Github Pages

It's time to share our presentation with the world. To do this, we'll use Github Pages , which is free static web site hosting provided by Github. In order to do this, we need to create a new git repository with a branch named gh-pages , then create a corresponding repository on Github, and push the project files to this branch.

Start in a terminal at the project root and run the following commands:

Now login to your Github account and create a new repository. At the time of this writing, the new repo menu button is located at the top right of the Github landing page, given that you're logged in:

Make the repository name the same as your project. For example, mine will is demo-presentation . Optionally add a description. Make sure Public option is checked. Leave all the other checkboxes blank because we're going to be pushing up the project files in the next step:

Now, Github will display a page with instructions for how to push your code up, normally you could just copy paste this, but that will create a default main branch. This case is a little different because we want gh-pages branch for static hosting. Run the following replacing yourGithubUserName and your-repo-name :

After the push has completed, go back to Github in your browser and refresh the project page. The code you just pushed should be displayed.

And now, to finally see your presentation published on the web, click on Settings from your repository page:

Then scroll down to the "GitHub Pages" section. It should show something like the following:

Go ahead and click on the "Your site is published at" link. The presentation is now publicly available at that url, which in general will look like https://yourGithubUserName.github.io/your-repo-name/ .

Of course you're not limited to Github Pages for deployment. Since the project is just html, css, and javascript, it can be deployed to any static web site host.

This post has just barely scratched the surface of all the features that RevealJS provides. Checkout the documentation to learn more about it. There's also a rich ecosystem of plugins in case you need some behavior that's not provided by the framework. I hope you'll give this a try next time you're giving a talk and good luck with your presentation!

You may also like...

Find Jira Tickets Faster

Access Chrome Bookmarks with Keyboard

View Localhost on Your Phone

Create PowerPoint presentations with JavaScript

The most popular powerpoint+js library on npm with 1,800 stars on github, works everywhere.

• Every modern desktop and mobile browser is supported
• Integrates with Node, Angular, React, and Electron
• Compatible with Microsoft PowerPoint, Apple Keynote, and many others

Full Featured

• All major objects are available (charts, shapes, tables, etc.)
• Master Slide support for academic/corporate branding
• Animated gifs, SVG images, YouTube videos, RTL text, and Asian fonts

Simple And Powerful

• The absolute easiest PowerPoint library to use
• Learn as you code using the built-in typescript definitions
• Tons of sample code comes included (75+ slides of demos)

Export Your Way

• Exports files direct to client browsers with proper MIME-type
• Other export formats available: base64, blob, stream, etc.
• Presentation compression options and more

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Image Backgrounds

Repeated image backgrounds, background transitions.

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide" .

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

• Try the online editor
• Source code on GitHub
• Follow me on Twitter

BY Hakim El Hattab / hakim.se

How to Create a Slideshow with HTML, CSS, and JavaScript

A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.

For this tutorial you can create a slideshow by following these simple steps:

Write some markup

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

The first step to changing which slides show is to select the slide wrapper(s) and then its slides.

When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.

Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following this tutorial

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome , Safari or Firefox browser.

impress.js *

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

visualize your big thoughts

and tiny ideas

by positioning , rotating and scaling them on an infinite canvas

the only limit is your imagination

want to know more?

one more thing...

have you noticed it’s in 3D * ?

Use a spacebar or arrow keys to navigate. Press 'P' to launch speaker console.

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

How to Disable JavaScript on Tor Browser (and Whether You Should)

You can disable JavaScript in Tor Browser, but should you?

Quick Links

How to disable javascript in tor browser using the settings menu, how to disable javascript in tor browser using the advanced settings, should you disable javascript in tor browser, key takeaways.

• Disable JavaScript in Tor Browser for enhanced privacy.
• There are two easy ways to disable JavaScript: using the Settings or Advanced Settings menu.
• While disabling JavaScript is required by many Onion sites, it could cause regular websites to malfunction.

When using Tor Browser to access onion sites, privacy is the name of the game. That's why you may have noticed a pop-up notification or response from a website that says you must disable JavaScript before proceeding.

It's a simple task that only takes a moment or two to complete, and there are some good reasons to do so.

There are two methods to turn JavaScript off in Tor Browser. The first method uses the Tor Browser Settings panel.

• Press the hamburger menu in the top-right corner, then select Settings.
• Head to Privacy & Security , then scroll down until you find the Security section.
• Select Safest from the three options.

JavaScript is now disabled on all sites you visit while using Tor Browser.

The other way to turn-off JavaScript in Tor Browser is using the about:config Advanced Settings menu, which gives you access to all of Tor Browser's settings.

However, before proceeding, note that I don't advise you to fiddle with any other settings in this menu. Changing Tor Browser settings without understanding what they do can lead to privacy issues and make Tor Browser unsafe. Furthermore, while this backend option exists, manually disabling JavaScript could make your browser more unique (i.e., it may have a more notable fingerprint, which is part of what using Tor Browser is designed to avoid).

• In Tor Browser, input about:config in the address bar and press Enter.
• Press Accept the Risk and Continue on the warning screen.
• Now, in the search bar, input javascript.enabled , then press the toggle to switch it to False .

Close the about:config window, and you're good to go.

While some Onion sites require you to turn JavaScript off to gain access, whether you need to keep it switched off at all times is another question. It also closely relates to how you're using Tor Browser.

For example, if you're using Tor Browser to access regular websites, you'll quickly realize that most of the internet as we know it uses JavaScript in some way, and many of your favorite sites and services won't work without it. However, there are a couple of reasons why you should consider disabling JavaScript in Tor Browser.

First, it prevents certain Tor Browser exploits. Tor Browser exploits are rare, but they do happen, and JavaScript has previously been used to exploit the secure browser. For example, two JavaScript exploits affecting Mozilla Firefox (Tor Browser is a modified version of Firefox) were found at Pwn2Own 2024 , while another exploit from 2020 targeted a JavaScript vulnerability in the No Script extension, a crucial Tor Browser security feature.

Furthermore, disabling JavaScript should make it more difficult for tracking services to discern your unique browser characteristics, such as screen resolution, browser window size (Tor advises using the default window size!), and system fonts. However, some argue that disabling JavaScript could also make your Tor Browser more unique among other Tor Browser fingerprints, so it's a mixed bag.

You can also turn JavaScript on and off as required, which could be useful if you're using Tor Browser to access regular websites from locations with restricted internet access. Users in those places will want to remain as secure and anonymous as possible, but at times, accessing unrestricted, uncensored information is the most important feature of all.

• Get 7 Days Free

Hafnia’s Q1 2024 Financial Results Presentation to Be Held on 15 May 2024

Hafnia Limited (“Hafnia”, the “Company”, OSE ticker code: “HAFNI”, NYSE ticker code “HAFN”) will release its Q1 2024 results at approximately 07:30 CET on 15 May 2024 . In connection with this release, Hafnia will hold an investor presentation with Mikael Skov (CEO), Perry van Echtelt (CFO), Jens Christophersen (EVP), and Thomas Andersen (EVP).

The financial results presentations will be available via live video webcast via the following link: Click here to join Hafnia's Investor Presentation on 15 May 2024

Meeting ID: 364 498 305 350 Passcode: BkbxHb Download Teams | Join on the web Or Dial In (audio only): +45 32 72 66 19, 59584768 # Denmark Phone Conference ID: 595 847 68#

A recording of the presentation will be available after the live event on the Hafnia Investor Relations Page: https://investor.hafniabw.com/investing-in-hafnia/default.aspx

About Hafnia

Hafnia is one of the world's leading tanker owners, transporting oil, oil products and chemicals for major national and international oil companies, chemical companies, as well as trading and utility companies.

As Owners and Operators of over 200 vessels, we offer a fully integrated shipping platform, including technical management, commercial and chartering services, pool management, and a large-scale bunker desk. Hafnia has offices in Singapore, Copenhagen, Houston, and Dubai and currently employs over 4000 employees onshore and at sea. Hafnia is part of the BW Group, an international shipping group involved in oil and gas transportation, floating gas infrastructure, environmental technologies, and deep-water production for over 80 years.

This information is subject to disclosure requirements pursuant to Section 5-12 of the Norwegian Securities Trading Act.

For further information:

Mikael Skov, CEO Hafnia Limited +65 8533 8900

View source version on businesswire.com: https://www.businesswire.com/news/home/20240509963313/en/

Market Updates

5 things we learned from the q1 earnings season, after earnings, is palantir stock a buy, a sell, or fairly valued, what’s happening in the markets this week, can the fed declare victory on inflation, after earnings, is coinbase stock a buy, a sell, or fairly valued, after earnings, is albemarle stock a buy, a sell, or fairly valued, is servicenow stock a buy after earnings and its investor day, 3 stocks to buy and 3 stocks to sell after earnings, stock picks, today’s market volatility could provide tomorrow’s opportunities, 40 of the best investment picks, tech stock dividends are changing the face of dividend growth investing, roblox earnings: weakening engagement has weighed on growth, the best gaming stocks to buy, energy transfer earnings: m&a drives guidance increase in solid quarter, the best healthcare stocks to buy, going into earnings, is home depot stock a buy, a sell, or fairly valued, sponsor center.

MIT Technology Review

• Newsletters

Google helped make an exquisitely detailed map of a tiny piece of the human brain

A small brain sample was sliced into 5,000 pieces, and machine learning helped stitch it back together.

• Cassandra Willyard archive page

A team led by scientists from Harvard and Google has created a 3D, nanoscale-resolution map of a single cubic millimeter of the human brain. Although the map covers just a fraction of the organ—a whole brain is a million times larger—that piece contains roughly 57,000 cells, about 230 millimeters of blood vessels, and nearly 150 million synapses. It is currently the highest-resolution picture of the human brain ever created.

To make a map this finely detailed, the team had to cut the tissue sample into 5,000 slices and scan them with a high-speed electron microscope. Then they used a machine-learning model to help electronically stitch the slices back together and label the features. The raw data set alone took up 1.4 petabytes. “It’s probably the most computer-intensive work in all of neuroscience,” says Michael Hawrylycz, a computational neuroscientist at the Allen Institute for Brain Science, who was not involved in the research. “There is a Herculean amount of work involved.”

Many other brain atlases exist, but most provide much lower-resolution data. At the nanoscale, researchers can trace the brain’s wiring one neuron at a time to the synapses, the places where they connect. “To really understand how the human brain works, how it processes information, how it stores memories, we will ultimately need a map that’s at that resolution,” says Viren Jain, a senior research scientist at Google and coauthor on the paper, published in Science on May 9 . The data set itself and a preprint version of this paper were released in 2021 .

Brain atlases come in many forms. Some reveal how the cells are organized. Others cover gene expression. This one focuses on connections between cells, a field called “connectomics.” The outermost layer of the brain contains roughly 16 billion neurons that link up with each other to form trillions of connections. A single neuron might receive information from hundreds or even thousands of other neurons and send information to a similar number. That makes tracing these connections an exceedingly complex task, even in just a small piece of the brain..  

To create this map, the team faced a number of hurdles. The first problem was finding a sample of brain tissue. The brain deteriorates quickly after death, so cadaver tissue doesn’t work. Instead, the team used a piece of tissue removed from a woman with epilepsy during brain surgery that was meant to help control her seizures.

Once the researchers had the sample, they had to carefully preserve it in resin so that it could be cut into slices, each about a thousandth the thickness of a human hair. Then they imaged the sections using a high-speed electron microscope designed specifically for this project. 

Next came the computational challenge. “You have all of these wires traversing everywhere in three dimensions, making all kinds of different connections,” Jain says. The team at Google used a machine-learning model to stitch the slices back together, align each one with the next, color-code the wiring, and find the connections. This is harder than it might seem. “If you make a single mistake, then all of the connections attached to that wire are now incorrect,” Jain says. 

“The ability to get this deep a reconstruction of any human brain sample is an important advance,” says Seth Ament, a neuroscientist at the University of Maryland. The map is “the closest to the  ground truth that we can get right now.” But he also cautions that it’s a single brain specimen taken from a single individual. 

The map, which is freely available at a web platform called Neuroglancer , is meant to be a resource other researchers can use to make their own discoveries. “Now anybody who’s interested in studying the human cortex in this level of detail can go into the data themselves. They can proofread certain structures to make sure everything is correct, and then publish their own findings,” Jain says. (The preprint has already been cited at least 136 times .) 

The team has already identified some surprises. For example, some of the long tendrils that carry signals from one neuron to the next formed “whorls,” spots where they twirled around themselves. Axons typically form a single synapse to transmit information to the next cell. The team identified single axons that formed repeated connections—in some cases, 50 separate synapses. Why that might be isn’t yet clear, but the strong bonds could help facilitate very quick or strong reactions to certain stimuli, Jain says. “It’s a very simple finding about the organization of the human cortex,” he says. But “we didn’t know this before because we didn’t have maps at this resolution.”

The data set was full of surprises, says Jeff Lichtman, a neuroscientist at Harvard University who helped lead the research. “There were just so many things in it that were incompatible with what you would read in a textbook.” The researchers may not have explanations for what they’re seeing, but they have plenty of new questions: “That’s the way science moves forward.” 

Biotechnology and health

How scientists traced a mysterious covid case back to six toilets.

When wastewater surveillance turns into a hunt for a single infected individual, the ethics get tricky.

An AI-driven “factory of drugs” claims to have hit a big milestone

Insilico is part of a wave of companies betting on AI as the "next amazing revolution" in biology

• Antonio Regalado archive page

The quest to legitimize longevity medicine

Longevity clinics offer a mix of services that largely cater to the wealthy. Now there’s a push to establish their work as a credible medical field.

• Jessica Hamzelou archive page

There is a new most expensive drug in the world. Price tag: $4.25 million

But will the latest gene therapy suffer the curse of the costliest drug?

Stay connected

Get the latest updates from mit technology review.

Discover special offers, top stories, upcoming events, and more.

Thank you for submitting your email!

It looks like something went wrong.

We’re having trouble saving your preferences. Try refreshing this page and updating them one more time. If you continue to get this message, reach out to us at [email protected] with a list of newsletters you’d like to receive.

We provide an extensive JavaScript API for controlling navigation and checking the current state of a presentation. If you're working with a single presentation instance the API can be accessed via the global Reveal object.

Slide State

Dom elements, more reading.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.