web presentation framework

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

The HTML Presentation Framework

hakimel/reveal.js

Folders and files.

Name		Name
3,143 Commits

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 786k.

Contributors 323

JavaScript 59.4%

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

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.

Beautiful HTML Presentation Plugin with jQuery - reveal.js

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

7 Best JavaScript Timeago Plugins For Human-readable Datetime Format

Top 100 Best Free jQuery Plugins From 2013

7 Best Youtube Lazy Loaders To Improve Page Speed (2024 Update)

10 Best JavaScript Dark Mode Solutions (2024 Update)

Top 100 Best Free jQuery Plugins From 2014

10 Best Free GDPR Cookie Consent Banner Plugins In JavaScript

Add Your Review

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!

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 ;)

Session Replay
Product Analytics
Performance Monitoring
Co-Browsing
Customer Support
Research & Design
Try Cloud Free
Self-Host Try Cloud

Create Incredible Web Presentations with Reveal.js

Feb 24, 2023 · 12 min read

Create Incredible Web Presentations with Reveal.js

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

Top 6 React state management libraries for 2022

0 Dependencies
117 Dependents
38 Versions

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

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support , syntax highlighted code and much more.

Get Started

Documentation

The full reveal.js documentation is available at revealjs.com .

Online Editor

Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at Slides.com . It's made by the same people behind reveal.js.

MIT licensed

presentation

Package Sidebar

npm i [email protected]

Git github.com/hakimel/reveal.js

revealjs.com

Unpacked Size

Total files, last publish.

5 months ago

Collaborators

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.

Like what you're reading?

Virtual presentation framework: Your guide to presenting online

Get your team on prezi – watch this on demand video.

Michael Lee March 01, 2021

By now, virtual presentations are a staple in the way many organizations conduct business. But just because most people are used to presenting online doesn’t mean they’re any good at it. The best virtual presentations require more than just appearing on screen or sharing content. To really connect with your audience, you need to follow the virtual presentation framework : Establish credibility, build trust, and appeal to your audience’s emotions.

This presentation framework serves as an online presentation guide to help you make sense of the most common elements of successful online interactions. As you get more comfortable with all the elements, you’ll be able to use the presentation framework as a digital toolbox of sorts, calling on the right skills at the right time.

The virtual presentation framework will help you with presenting online.

It’s important to note that these segments are not mutually exclusive, but should work together. After all, you can be credible without earning trust, and you can be informative without eliciting any emotion. The best online presenters and speakers will apply the presentation framework as a whole to both their content and delivery. Read on for a more detailed look at each segment in the virtual presentation framework.

Presentation framework: Establish credibility

Credibility is a measure of how qualified you are (or at least, how qualified you seem) to speak on your topic. Basically, do you look like you know what you’re doing? On virtual presentations, you’ll need to consider:

How you set up your space

It may seem like a minor detail next to everything else you have to do for your presentation, but your home studio setup can greatly impact audience perceptions. If your face is dimly lit or your audience can’t hear you, it’ll make your entire presentation feel less professional.

Position your light source in front of you (whether it’s a window or a lamp). Also, test out different microphones to find the one with the best audio quality. You’ll also want to avoid distracting your audience with busy backgrounds. Though, don’t be afraid to show more personality than a blank white wall! Even small, inexpensive adjustments can make a big difference.

Get more tips from Jessica Chen , the founder, and CEO of Soulcast Media and an Emmy Award-winning journalist:

How you present yourself

Any online presentation guide will tell you that to deliver an engaging presentation, you’ll need to practice. While one of the benefits of virtual presentations is the ability to include presenter notes , you also don’t want to look like you’re reading the entire time. Practice speaking with confidence, paying particular attention to your pacing and volume. Also, try cutting out filler words like “um” and “like.” Lorraine Lee , the Managing Editor here at Prezi, shares how standing while you present and projecting your voice can help:

How well do you know your material?

It can sometimes be painfully obvious when someone speaks on a topic they don’t actually know much about. If you’re giving a virtual presentation, it means you’ve had the time to prepare and pick your topic. Make sure you’re speaking to your subject matter expertise, whether it’s for a keynote, webinar, sales pitch, or just an internal presentation.

Richard Mulholland , a global speaker and founder of presentation agency Missing Link , highlights the benefits of finding your “area of authority” and then focusing the vast majority of your attention on that subject:

Presentation framework: Build trust

While trust may seem very similar to credibility, there’s a key difference. Credibility determines if your audience finds you qualified to speak about your topic. However, trust determines whether they’ll actually believe what you say. To build trust with your audience on virtual presentations, you should:

Appear on the screen

Body language and facial cues are crucial in conveying meaning, which is why it’s necessary to appear on-screen if you want your audience to trust what you’re saying. This also applies to screen sharing. If your camera’s on, but nobody can see you, then you’re going to lose out on opportunities to connect with your audience.

Vanessa Van Edwards , a keynote speaker and Lead Investigator at Science of People , explains that hands act as “trust indicators.” That’s why you should use tools like Prezi Video to bring your content on-screen with you, so that you can show your content while still using hand gestures to keep your audience engaged . Watch Vanessa’s video to learn more and to see these principles in action:

Back up your claims

With enough practice, you can say anything with confidence, but empty promises and hyperbole will only erode your audience’s trust. Make sure you use trusted sources while researching, and present facts and data as necessary.

For example, see how Brian Xu , a Senior Data Scientist at LinkedIn , uses data to analyze the economic impacts of COVID-19:

Respect your audience

Don’t forget that while you’re the one presenting, your audience is also investing their time and attention into your content. Make sure your content is tailored and relevant, and be mindful of sticking to your allotted time.

You may also want to consider employing a more conversational approach to your virtual presentation. In a remote sales pitch , for instance, you don’t have to go through all of your content from start to finish. Instead, find out what your buyers are most interested in and only focus on those topics.

Presentation framework: Appeal to emotions

Even if your content is well-researched and expertly presented, it ultimately won’t matter if your audience can’t remember any of it. Part of what makes content impactful and memorable is having it resonate on an emotional level. Be sure to include these elements in your virtual presentations:

Displaying a wall of text on the screen is only going to result in glazed eyes. Use visual communication to help your message resonate with your audience — whenever possible, replace text with images, videos, and charts.

In this webinar with Tiffani Bova , the Global Growth and Innovation Evangelist at Salesforce , she uses both photos and designed graphics, and clever placement of her visuals, to support her message. When illustrating the divide between sellers and buyers, she puts photos on either side of her screen. This creates a more visceral and memorable message than a bullet point:

Interactivity

Because you’re working with limited screen real estate on virtual presentations, you’ll need to work harder to keep your audience invested and engaged. That means you should avoid becoming a static talking head or hiding behind your screen share. Take advantage of Prezi Video to add some interactivity to your presentation. With Prezi Video, you can point at graphics you want to focus on or emphasize your message with gestures.

Plus, there are currently a wealth of tools that can help you better connect with your audience. Take advantage of the chat, poll, and Q&A functions on your video conferencing tools, or use third-party apps like Slido to create impactful conversations .

Storytelling

Stories are still one of the best ways to connect with your audience. They can take complex ideas and recontextualize them in a way that feels relevant and evokes emotions. And, our brains are already wired for stories (which is why they make up two-thirds of our daily conversations).

Try starting your virtual presentation with a story or anecdote to capture your audience’s attention quickly. Elena Valentine , the CEO, and co-founder of workplace media company Skill Scout Films , explains how stories and anecdotes can make you seem more human instead of just “the expert,” and why that works in your favor:

Using the virtual presentation framework

This virtual presentation framework is by no means comprehensive. However, it can serve as a useful guide to online presentations. As you start putting content together for your next presentation, refer to the framework to pinpoint areas that you’re still missing and start incorporating them. You can also get even more advice and insights from our Virtual Presentation Innovators .

If you’re speaking at an upcoming virtual conference or event , drop us a line at [email protected] for a chance to work together on a virtual presentation that your audience won’t forget.

Give your team the tools they need to engage

Like what you’re reading join the mailing list..

Prezi for Teams
Top Presentations

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

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

it’s quicker to add a few HTML tags than use a WYSIWYG interface
you can update a presentation using a basic text editor on any device
files can be hosted on the web; you need never lose a PPT again
you can easily distribute a presentation without viewing software
it’s not PowerPoint and your audience will be amazed by your technical prowess.
you require web coding skills
positioning, effects and transitions are more limited
few systems offer slide notes (it’s a little awkward to show them separately)
it’s more difficult to print handouts
S5 — A Simple Standards-Based Slide Show System ( download )
CSSS — CSS-based SlideShow System ( download )
Slides ( download )
HTML5Rocks (no direct downloads, but you can copy the source)

What are the key features to look for in an HTML5 presentation system?

When choosing an HTML5 presentation system, consider features such as ease of use, customization options, and compatibility with various devices. The system should have an intuitive interface that allows you to create presentations without any coding knowledge. Customization options are important for personalizing your presentation to match your brand or style. Additionally, the system should be compatible with different devices, including desktops, laptops, tablets, and smartphones, to ensure your audience can view your presentation without any issues.

How does HTML5 improve the presentation experience compared to traditional methods?

HTML5 enhances the presentation experience by offering interactive and dynamic content. Unlike traditional methods, HTML5 allows for the integration of multimedia elements like videos, audio, and animations directly into the presentation. This makes the presentation more engaging and interactive for the audience. Additionally, HTML5 presentations are web-based, meaning they can be accessed from any device with an internet connection, providing convenience and flexibility for both the presenter and the audience.

Are HTML5 presentations compatible with all browsers?

HTML5 presentations are generally compatible with all modern web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, there may be slight variations in how different browsers render HTML5 content. Therefore, it’s always a good idea to test your presentation on multiple browsers to ensure it displays correctly.

Can I use HTML5 presentation systems for professional purposes?

Yes, HTML5 presentation systems are suitable for a variety of professional purposes. They can be used for business presentations, educational lectures, product demonstrations, and more. The ability to incorporate multimedia elements and interactive features makes HTML5 presentations a powerful tool for conveying complex information in an engaging and understandable way.

How can I make my HTML5 presentation accessible to all users?

To make your HTML5 presentation accessible, ensure that all content is readable and navigable for users with different abilities. This includes providing alternative text for images, captions for videos, and using clear and simple language. Additionally, make sure your presentation is responsive, meaning it adjusts to fit different screen sizes and orientations.

Can I convert my existing PowerPoint presentations to HTML5?

Yes, many HTML5 presentation systems offer the ability to import and convert PowerPoint presentations. This allows you to leverage your existing content while benefiting from the enhanced features and capabilities of HTML5.

Do I need to know how to code to use HTML5 presentation systems?

While having some knowledge of HTML5 can be beneficial, many HTML5 presentation systems are designed to be user-friendly and do not require any coding skills. These systems often feature drag-and-drop interfaces and pre-designed templates to help you create professional-looking presentations with ease.

Can I share my HTML5 presentations online?

Yes, one of the major advantages of HTML5 presentations is that they can be easily shared online. You can publish your presentation on your website, share it via email, or even embed it in a blog post or social media update.

Are HTML5 presentations secure?

HTML5 presentations are as secure as any other web content. However, it’s important to follow best practices for web security, such as using secure hosting platforms and regularly updating your software to protect against potential vulnerabilities.

Can I track the performance of my HTML5 presentations?

Yes, many HTML5 presentation systems include analytics features that allow you to track viewer engagement and behavior. This can provide valuable insights into how your audience interacts with your presentation, helping you to improve and refine your content over time.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

Components · Classes .
WebSlides on Codepen .
WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

Background images: Unsplash .
CSS animations: Animate.css .
Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript. Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

The tiniest presentation framework

I did roughly 50 talks over the years, and for almost all of them, I used Reveal.js . I like it because it's HTML-based. I have complete control of everything and can easily publish the slides online. However, one thing bugs me every single time - the size of my content. I want to use all the available space. This becomes very important when I'm showing code to people. That's why I wrote SimPre . It's a 10KB HTML presentation framework that properly scales and positions my content.

A demo presentation could be seen here simpre.vercel.app .

Let me list all the framework features and see if I can sell them to you.

It's just a HTML file

So, first, we want a quick start. With SimPre you only need a single HTML file:

Of course, to ensure yourself, you may download that HTML file with the necessary JavaScript and CSS files. It's here .

Next, every <section> tag is a slide. The framework is minimalistic. There are no nested slides. Even though I used this feature a lot, I preferred to leave it out from the initial implementation.

The scaling

The most important code that I wrote is the one that scales up the slide, so it takes all the available space. This is done after the slide becomes visible. SimPre checks the current viewport size and applies CSS transformation. Here's my naive solution:

It uses the good old technique where we calculate the ratio between width and height and then nail the optimal sizing.

The code snippets

Another "problem" that I have had so far was the need to put all my code samples in one place. It becomes messy with 30+ slides. I decided to load and render the snippets on the fly to solve this problem. The technique that I used is described in this article "Here is how call-to-action widgets probably work" . The usage is down to adding a <script> tag:

Where data-file attribute points to the snippet.

For the syntax highlighting, I picked Prism . In fact, most of that 10 KB is Prism's JavaScript and CSS.

Smart selection

There is a "smart" selection mode. When showing code, I often want to emphasize or hide part of it. To help myself in this direction, I did a little feature that you can turn on and off via the Shift key. I select part of the text on the page, and if I press the Shift key SimPre changes the styling of the selection. Check out here https://simpre.vercel.app/#5 , for example. Select some part of the text and press Shift.

Final touches

The last two things I did were a progress bar at the bottom of the page. It mimics the Reveal.js one. Just a line that grows from left to right. And, of course, the hash-based routing to copy/paste a URL to a specific slide.

Wrapping up

I recently used the frame for an online event , and it worked pretty well. I'm quite happy with the minimalism. So, check it out on github.com/krasimir/simpre or view the demo at simpre.vercel.app .

12 Impressive JavaScript & HTML5 Presentation Frameworks

The growth of websites is somewhat perpetual. Today there is hardly a single business that does not have some form of website coverage. Now, more and more people are becoming website designers. Website development is in continuous flux and new techniques are also being introduced. There are many businesses that strongly require the implementation of presentations on their websites. Presentation can be defined as organized, visual details engineered to create an overall impression; usually positive one way or another.

Languages like Javascript , HTML5 , and others help to embed features into various web pages. But these languages can be time consuming, so web developers have found a flexible way to use them within web pages. That flexible method works through the aide of frameworks. WordPress is a well-known open source platform, providing the flexibility to use presentations within web pages.

There are lots of JavaScript and HTML5 presentation frameworks available for creation of modern layouts for web pages requiring presentation features. These frameworks are the simplest way to create presentations for browsers and facilitate web development in an easier way.

Below is a review of 12 JavaScript and HTML5 presentation frameworks:

1) Presentation Framework – Deck.js

Deck js is one of the most advanced HTML Presentation Frameworks. It has new features and functionality.

Slides come from basic HTML and the deck core module keeps track of them. Deck instructs how to transition between slides. Meanwhile extensions use core events and methods, allowing the freedom to add what’s wanted and leave out what isn’t. Included are themes and templates.

2) Presentation Framework – Tacion.js

Tacion is A jQuery Mobile framework for making real-time presentations. It has features like syncing and uses Pusher to create a sync channel. Moving arrows or swiping allows transition between slides.

Syncing is a means by which the presenter and his audience remain in sync. Syncing is a distributed sort of presentation that can engage the audience in new ways.

tacion-javascript-presentation-premework

3) Presentation Framework – Fathom.js

This .js presents JavaScript in its native environment. You can write your slideshow in HTML, fashion it with CSS, and control it with JavaScript. When finished, it allows you to easily and quickly sync the video of your presentation. It comes with built-in keyboard, mouse, and scroll bar navigation.

fathomjs-javascript-presentation-framework

4) Presentation Framework – Impress.js

This is an impressive HTML and JavaScript presentation framework with a stylish interface and creative functionality. If you’re bored using slides-based presentations, impress your audience with stunning visualization.

5) Presentation Framework – Reveal.js

This is an HTML presentation framework, providing modern slides that help create a unique slideshow. If you don’t know code, that isn’t a problem. There’s a full-feature visual editor. For Point of View, just press ESC to enter the slide overview. There are many more impressive features.

6) Presentation Framework – Presenteer.js

Presenteer.js an HTML5 presentation tool that works in a single line of code. It works like VAR presentation. You can create the HTML and style it with CSS, then on page load make instances for all presentations.

7) Presentation Framework – Jmpress.js

Jmpress is a very good presentation framework. It can pan, rotate and scale with most modern browsers. Some of the more impressive features include: nested steps, animations, printable options, presenter notes, templates, ajax-loaded steps, keyboard controls, routing, zoomable steps and plugins.

8) Presentation Framework – DZ Slides

One can create slides with HTML5 and CSS3 using DZ ; slides made of text, images or videos. Slides behave like transitions with independent resolution: CSS3 can do that. DZ slides are a single HTML file; an HTML template. These bring together all the features in order to transform a simple HTML5 page into a presentation.

9) Presentation Framework – slides

Presentation Framework allows creation of an impressive slideshow and presentation with HTML. You just make slides in plain old HTML, and the framework presents them for you. You can create themes and layouts with CSS.

10) Presentation Framework – Slides Google Code

This is the presentation everyone is talking about today. It’s an interactive slide deck written completely in HTML5 , and showing off many of HTML5’s features.

Google-developer-framework

This is a starting point for building wonderful multi-device web experiences. You can begin your project with a Web Starter Kit; though you’ll need to follow the Web Fundamentals Guide. The web Starter Kit is an easy way to embark on a new project.

11) Presentation Framework – Perkele.js

This is a JavaScript slide framework. It features WPO Basics.

12) Presentation Framework – HTML Slidy

HTML Slidy comes with an accompanying style sheet. If you happen to be a member of the W3C staff, you must include a W3C icon. Features include a single consolidated file for less editing complication. An up/down/left/right arrow for traversing backwards and forwards is also provided. Slidy gives a good contrast between foreground and background.

There are many slide framework programs to choose from. All have good features and are mostly easy to use. Slides can really make the difference, turning an ordinary, lackluster website into an impressive, interesting and dynamic user experience.

Editor’s Note: This post was originally published in February 2014 and has been revamped and updated for accuracy and comprehensiveness.

Recommended for you

25+ Best Free Product Packaging Mockup PSD Templates

15+ Best Responsive HTML5 Frameworks

20 Best Free IDEs and Editors for Programmers

8 Best Machine Learning Cheat Sheets

100 Best Cheat Sheets for Designers and Developers

100 Best Cheat Sheets for Web Developers and Designers

25 Highly Useful AngularJS Tools for Web Developers

jQuery Date Time Pickers: 31 Options for You to Try

Free PHP, HTML, CSS, JavaScript editor (IDE) – Codelobster PHP Edition

12 Best MySQL GUI Tools for Developers 2015

github page

FsReveal allows you to write beautiful slides in Markdown and brings C# and F# to the reveal.js web presentation framework.

Write your slides in Markdown or .fsx files
Automatically updates the browser in edit mode on every save
Syntax highlighting for most programming languages including C#, F# and LaTeX
Speaker notes; Shows the current slide, next slide, elapsed time and current time
Built in themes
Horizontal and vertical slides
Built in slide transitions using CSS 3D transforms
Slide overview
Works on mobile browsers. Swipe your way through the presentation.

Getting started

Read the getting started tutorial
Checkout the formatting docs to learn how to style your slides.

Check out what others have created. Submit a PR if you have something to add to the list.

Markdown example by @kimsk (source)
.fsx example by @kimsk (source)
Paket - Intro by @sforkmann (source)
FAKE - Intro by @sforkmann (source)
RPG F# Workshop by @troykershaw (source)
F# on the Web - 0 to production in 12 weeks by @panesofglass (source)

More samples can be found in the formatting docs .

Contributing and copyright

The project is hosted on GitHub where you can report issues , fork the project and submit pull requests on the develop branch. If you're adding new public API, please also consider adding samples that can be turned into a documentation. You might also want to read library design notes to understand how it works.

The library is available under MIT license, which allows modification and redistribution for both commercial and non-commercial purposes. For more information see the License file in the GitHub repository.

Getting Started
Formatting docs
Source Code on GitHub
Release Notes

GEOG 585
Open Web Mapping

Geography Department Penn State

Orientation
Instructor Information
Program Home Page
Library Resources
Getting Help

JavaScript libraries and web presentation frameworks

Working with web pages is not always easy, especially when it's not your main area of expertise. Code for laying out the page, iterating through elements, toggling classes, etc., can get clunky and bloated in a hurry. Browsers can interpret the same pieces of HTML and JavaScript differently, and debugging the pages can be a mysterious process involving multiple code files and complex hierarchies of stylesheets and overrides.

There is no magic solution for these challenges; however, there are some JavaScript helper libraries that can simplify your life and your code if you make the effort to learn them. Your pages will probably also become more functional and attractive. Some of these libraries offer mainly back-end functions, others specialize in front-end elements, and others offer both.

JavaScript libraries

Many web developers like to use special JavaScript libraries that have been developed to simplify common functions and abstract away some of the idiosyncrasies between web browsers.

For example, if you select a few web pages at random and look at the source code, chances are pretty good that you'll see someone using the jQuery library. jQuery provides functions to simplify navigating and manipulating the DOM elements on your page. For example, using jQuery you can populate a dropdown list or change the CSS class of an HTML element on the fly without writing a bunch of HTML markups.

Similar alternatives to jQuery are Prototype and the Dojo toolkit , although the latter also offers some UI elements such as menus, buttons, and charts. All these libraries are build with the goal of simplifying JavaScript coding and reducing the work for you to handle differences between browsers.

Web presentation frameworks

In the previous lesson examples, you've learned how to embed your map in a web page. In the Lesson 7 walkthrough, you also briefly saw how to use the innerHtml property to manipulate a DOM element and thereby change a label on a page. But how do you craft a nice looking page around your map without devoting hundreds of hours to web design study? This is where a web presentation framework can come in handy.

Web presentation frameworks consist of JavaScript libraries, stylesheets, and "widgets" that work together to give you some convenient building blocks for nice looking pages. Some of these goodies include headers, buttons, calendar date pickers, menus, etc.

Web development frameworks are typically engineered so that your page works in a similar manner across browsers. They may also give you a head start with making your page easily localizable (i.e., flexible enough to be offered in various languages such as Spanish, Arabic, Chinese, etc.).

An example of a popular web presentation framework is Bootstrap , distributed by the Twitter development team under an open source license. In the Lesson 8 walkthrough, you'll use Bootstrap to put a nice header on your application and divide your page into sections. You'll also get the benefit of the Bootstrap stylesheets.

Similar frameworks to Bootstrap include Groundwork , Zurb's Foundation , and Yahoo's Pure . The latter used to be called YUI (yoo'-ee) and this name is still often seen in the web world. Take a few minutes and follow some of the above links to see the different styles offered by these frameworks.

Some JavaScript libraries such as the Dojo toolkit and Sencha Ext JS also offer layout elements that serve a web design function. The project jQuery UI offers a helpful set of user interface elements such as buttons, menus, date pickers, etc.

Even more powerful, we have web application frameworks for supporting the design and implementation of complex web applications and services, like the popular Python-based Django and JavaScript-based React , which also contain web presentation components.

You should be aware that web presentation frameworks sometimes require and use jQuery or other libraries to accomplish their functions.

Choosing a framework

When evaluating a web presentation framework for your project, you might consider:

How easy is it to get started with the framework?
How many online examples are available on the framework and is there an active community posting to forums, etc.?
How easy is it to customize the framework if I don't like the default choices or examples?
Is the framework hosted on a CDN or do I have to host it myself? Hosting yourself is often required anyway if you want to customize or slim down any portion of the framework, but it does take more work.
What are the terms of use for this framework, including attribution and licensing requirements? Just like other kinds of software, there are FOSS frameworks and proprietary ones.

A web presentation framework can help produce a nicer end product than you might be able to concoct on your own; however, a framework also introduces another level of complexity. You may have to override some of the framework's stylesheets in order to get other libraries (like Leaflet or OpenLayers) to behave in the expected way. Debugging such issues often involves multiple levels of stylesheets and a lot of time in the weeds. If you just need a very simple app, you might leave the framework aside and create your own stylesheet, or at least try to select the most simple framework available for the functionality you need.

We provide convenient mechanics for autoplaying and lazy loading HTML media elements and iframes based on slide visibility and proximity. This works for <video> , <audio> and <iframe> elements.

Add data-autoplay to your media element if you want it to automatically start playing when the slide is shown:

If you want to enable or disable autoplay globally, for all embedded media, you can use the autoPlayMedia configuration option. If you set this option to true ALL media will autoplay regardless of individual data-autoplay attributes. If you set it to autoPlayMedia: false NO media will autoplay.

Note that embedded HTML <video> / <audio> and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a data-ignore attribute.

Lazy Loading

When working on presentations with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the viewDistance configuration option.

To enable lazy loading all you need to do is change your src attributes to data-src as shown below. This is supported for image, video, audio and iframe elements.

Lazy Loading Iframes

Note that lazy loaded iframes ignore the viewDistance configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.

When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.

You can override this behavior with the data-preload attribute. The iframe below will be loaded according to the viewDistance .

You can also change the default globally with the preloadIframes configuration option. If set to true ALL iframes with a data-src attribute will be preloaded when within the viewDistance regardless of individual data-preload attributes. If set to false , all iframes will only be loaded when they become visible.

Using iframes is a convenient way to include content from external sources, like a YouTube video or Google Sheet. reveal.js automatically detects YouTube and Vimeo embed URLs and autoplays them when the slide becomes visible.

If you add an <iframe> inside your slide it's constrained by the size of the slide. To break out of this constraint and add a full page iframe, you can use an iframe slide background .

Iframe Post Message

reveal.js automatically pushes two post messages to embedded iframes. slide:start when the slide containing the iframe is made visible and slide:stop when it is hidden.

Slides.com — the reveal.js presentation editor.

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

Here’s how you know

U.S. Department of Health and Human Services
National Institutes of Health

Whole Person Health: What It Is and Why It's Important

.header_greentext{color:greenimportant;font-size:24pximportant;font-weight:500important;}.header_bluetext{color:blueimportant;font-size:18pximportant;font-weight:500important;}.header_redtext{color:redimportant;font-size:28pximportant;font-weight:500important;}.header_darkred{color:#803d2fimportant;font-size:28pximportant;font-weight:500important;}.header_purpletext{color:purpleimportant;font-size:31pximportant;font-weight:500important;}.header_yellowtext{color:yellowimportant;font-size:20pximportant;font-weight:500important;}.header_blacktext{color:blackimportant;font-size:22pximportant;font-weight:500important;}.header_whitetext{color:whiteimportant;font-size:22pximportant;font-weight:500important;}.header_darkred{color:#803d2fimportant;}.green_header{color:greenimportant;font-size:24pximportant;font-weight:500important;}.blue_header{color:blueimportant;font-size:18pximportant;font-weight:500important;}.red_header{color:redimportant;font-size:28pximportant;font-weight:500important;}.purple_header{color:purpleimportant;font-size:31pximportant;font-weight:500important;}.yellow_header{color:yellowimportant;font-size:20pximportant;font-weight:500important;}.black_header{color:blackimportant;font-size:22pximportant;font-weight:500important;}.white_header{color:whiteimportant;font-size:22pximportant;font-weight:500important;} what is whole person health.

Whole person health involves looking at the whole person—not just separate organs or body systems—and considering multiple factors that promote either health or disease. It means helping and empowering individuals, families, communities, and populations to improve their health in multiple interconnected biological, behavioral, social, and environmental areas. Instead of just treating a specific disease, whole person health focuses on restoring health, promoting resilience, and preventing diseases across a lifespan.

Multilevel Whole Person Health Framework

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Why is whole person health important?

Health and disease are not separate, disconnected states but instead occur on a path that can move in two different directions, either toward health or toward disease.

On this path, many factors, including one’s biological makeup; some unhealthy behaviors, such as poor diet, sedentary lifestyle, chronic stress, and poor sleep; as well as social aspects of life—the conditions in which people are born, grow, live, work, and age—can lead to chronic diseases of more than one organ system. On the other hand, self-care, lifestyle, and behavioral interventions may help with the return to health.

Chronic diseases, such as diabetes, cardiovascular disease, obesity, and degenerative joint disease, can also occur with chronic pain, depression, and opioid misuse—all conditions exacerbated by chronic stress. Some chronic diseases increase the immediate and long-term risks with COVID-19 infection. Understanding the condition in which a person has lived, addressing behaviors at an early stage, and managing stress can not only prevent multiple diseases but also help restore health and stop the progression to disease across a person’s lifespan.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Is whole person health being used now in health care?

Some health care systems and programs are now focusing more on whole person health.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} U.S. Department of Veterans Affairs (VA) Whole Health Approach

The VA’s Whole Health System of Care and Whole Health approach aims to improve the health and well-being of veterans and to address lifestyle and environmental root causes of chronic disease. The approach shifts from a disease-centered focus to a more personalized approach that engages and empowers veterans early in and throughout their lives to prioritize healthy lifestyle changes in areas like nutrition, activity, sleep, relationships, and surroundings. Conventional testing and treatment are combined with complementary and integrative health approaches that may include acupuncture, biofeedback, massage therapy, yoga, and meditation.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} U.S. Department of Defense Total Force Fitness Program

The Total Force Fitness program arose within the U.S. Department of Defense Military Health System in response to the need for a more holistic approach—a focus on the whole person instead of separate parts or only symptoms—to the demands of multiple deployments and the strains on the U.S. Armed Forces and their family members. The focus extends the idea of total fitness to include the health, well-being, and resilience of the whole person, family, community, and U.S. military.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Whole Health Institute

Established in 2020, the Whole Health Institute’s Whole Health model helps people identify what matters most to them and build a plan for their journey to whole health. The model provides tools to help people take good care of their body, mind, and spirit, and involves working with a health care team as well as tapping into the support of family, friends, and communities.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} North Carolina Department of Health and Human Services

The North Carolina Department of Health and Human Services has incorporated a whole person health approach into its health care system by focusing on integrating physical, behavioral, and social health. The state has taken steps to encourage collaborative behavioral health care and help resolve widespread inequities in social conditions, such as housing and nutritious food access.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Ornish Program for Reversing Heart Disease

The Ornish Program for Reversing Heart Disease is an intensive cardiac rehabilitation program that has been shown to reverse the progression of coronary heart disease through lifestyle changes, without drugs or surgery. The program is covered by Medicare and some health insurance companies. The program’s lifestyle changes include exercise, smoking cessation, stress management, social support, and a whole-foods, plant-based diet low in total fat. The program is offered by a team of health care professionals who provide the support that individuals need to make and maintain lasting changes in lifestyle.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} What does research show about whole person health?

A growing body of research suggests the benefits of healthy behaviors, environments, and policies to maintain health and prevent, treat, and reverse chronic diseases. This research includes several large, long-term epidemiological studies—such as the Framingham Heart Study, Nurses’ Health Study, and Adventist Health Studies—that have evaluated the connections between lifestyle, diet, genetics, health, and disease.

There is a lack, however, of randomized controlled trials and other types of research on multicomponent interventions and whole person health. Challenges come with conducting this type of research and with finding appropriate ways to assess the evidence. But opportunities are emerging to explore new paths toward reliable and rigorous research on whole person health.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Will the National Center for Complementary and Integrative Health (NCCIH) fund research on whole person health?

Yes, NCCIH plans to fund research on whole person health . (Details can be found in the NCCIH Strategic Plan FY 2021–2025: Mapping a Pathway to Research on Whole Person Health . )

By deepening the scientific understanding of the connections that exist across the different areas of human health, researchers can better understand how conditions interrelate, identify multicomponent interventions that address these problems, and determine the best ways to support individuals through the full continuum of their health experience, including the return to health.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} For More Information

Nccih clearinghouse.

The NCCIH Clearinghouse provides information on NCCIH and complementary and integrative health approaches, including publications and searches of Federal databases of scientific and medical literature. The Clearinghouse does not provide medical advice, treatment recommendations, or referrals to practitioners.

Toll-free in the U.S.: 1-888-644-6226

Telecommunications relay service (TRS): 7-1-1

Website: https://www.nccih.nih.gov

Email: [email protected] (link sends email)

Know the Science

NCCIH and the National Institutes of Health (NIH) provide tools to help you understand the basics and terminology of scientific research so you can make well-informed decisions about your health. Know the Science features a variety of materials, including interactive modules, quizzes, and videos, as well as links to informative content from Federal resources designed to help consumers make sense of health information.

Explaining How Research Works (NIH)

Know the Science: How To Make Sense of a Scientific Journal Article

Understanding Clinical Studies (NIH)

A service of the National Library of Medicine, PubMed® contains publication information and (in most cases) brief summaries of articles from scientific and medical journals. For guidance from NCCIH on using PubMed, see How To Find Information About Complementary Health Approaches on PubMed .

Website: https://pubmed.ncbi.nlm.nih.gov/

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Key References

Aggarwal M, Ornish D, Josephson R, et al. Closing gaps in lifestyle adherence for secondary prevention of coronary heart disease. American Journal of Cardiology. 2021;145:1-11.
Centers for Medicare & Medicaid Services. Decision Memo for Intensive Cardiac Rehabilitation (ICR) Program—Dr. Ornish’s Program for Reversing Heart Disease (CAG-00419N). Accessed at https://www.cms.gov/ on April 26, 2021.
Deuster PA, O’Connor FG. Human performance optimization: culture change and paradigm shift. Journal of Strength and Conditioning Research. 2015;29(suppl 11):S52-S56.
Gaudet T, Kligler B. Whole health in the whole system of the Veterans Administration: how will we know we have reached this future state? Journal of Alternative and Complementary Medicine. 2019;25(S1):S7-S11.
Malecki HL, Gollie JM, Scholten J. Physical activity, exercise, whole health, and integrative health coaching. Physical Medicine and Rehabilitation Clinics of North America. 2020;31(4):649-663.
National Center for Complementary and Integrative Health. NCCIH Strategic Plan FY 2021–2025: Mapping a Pathway to Research on Whole Person Health. National Center for Complementary and Integrative Health website. Accessed at https://www.nccih.nih.gov/about/nccih-strategic-plan-2021-2025 on May 14, 2021.
North Carolina Department of Health and Human Services website. Healthy Opportunities and Medicaid Transformation. Accessed at https://www.ncdhhs.gov/about/department-initiatives/healthy-opportunities/healthy-opportunities-pilots/healthy on April 26, 2021.
Military Health System website. Total Force Fitness. Accessed at https://health.mil/Military-Health-Topics/Total-Force-Fitness on April 26, 2021.
Tilson EC, Muse A, Colville K, et al. Investing in whole person health: working toward an integration of physical, behavioral, and social health. North Carolina Medical Journal. 2020;81(3):177-180.
U.S. Department of Veterans Affairs website. Whole Health. Accessed at https://www.va.gov/wholehealth/ on April 26, 2021.
U.S. Department of Veterans Affairs website. Whole Health Library. Accessed at https://www.va.gov/wholehealthlibrary/ on April 26, 2021.
Vodovotz Y, Barnard N, Hu FB, et al. Prioritized research for the prevention, treatment, and reversal of chronic disease: recommendations from the Lifestyle Medicine Research Summit. Frontiers in Medicine (Lausanne). 2020;7:585744.
Whitehead AM, Kligler B. Innovations in care: complementary and integrative health in the Veterans Health Administration Whole Health System. Medical Care. 2020;58(9S)(suppl 2):S78-S79.

.header_greentext{color:green!important;font-size:24px!important;font-weight:500!important;}.header_bluetext{color:blue!important;font-size:18px!important;font-weight:500!important;}.header_redtext{color:red!important;font-size:28px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;font-size:28px!important;font-weight:500!important;}.header_purpletext{color:purple!important;font-size:31px!important;font-weight:500!important;}.header_yellowtext{color:yellow!important;font-size:20px!important;font-weight:500!important;}.header_blacktext{color:black!important;font-size:22px!important;font-weight:500!important;}.header_whitetext{color:white!important;font-size:22px!important;font-weight:500!important;}.header_darkred{color:#803d2f!important;}.Green_Header{color:green!important;font-size:24px!important;font-weight:500!important;}.Blue_Header{color:blue!important;font-size:18px!important;font-weight:500!important;}.Red_Header{color:red!important;font-size:28px!important;font-weight:500!important;}.Purple_Header{color:purple!important;font-size:31px!important;font-weight:500!important;}.Yellow_Header{color:yellow!important;font-size:20px!important;font-weight:500!important;}.Black_Header{color:black!important;font-size:22px!important;font-weight:500!important;}.White_Header{color:white!important;font-size:22px!important;font-weight:500!important;} Other References

Alborzkouh P, Nabati M, Zainali M, et al. A review of the effectiveness of stress management skills training on academic vitality and psychological well-being of college students. Journal of Medicine and Life. 2015;8(4):39-44.
Bisht K, Sharma K, Tremblay M-È. Chronic stress as a risk factor for Alzheimer's disease: roles of microglia-mediated synaptic remodeling, inflammation, and oxidative stress. Neurobiology of Stress. 2018;9:9-21.
Buettner D, Skemp S. Blue Zones: lessons from the world’s longest lived. American Journal of Lifestyle Medicine. 2016;10(5):318-321.
Chen T-L, Chang S-C, Hsieh H-F, et al. Effects of mindfulness-based stress reduction on sleep quality and mental health for insomnia patients: a meta-analysis. Journal of Psychosomatic Research. 2020;135:110144.
Conversano C, Orrù G, Pozza A, et al. Is mindfulness-based stress reduction effective for people with hypertension? A systematic review and meta-analysis of 30 years of evidence. International Journal of Environmental Research and Public Health. 2021;18(6):2882.
Katz DL, Karlsen MC, Chung M, et al. Hierarchies of evidence applied to lifestyle medicine (HEALM): introduction of a strength-of-evidence approach based on a methodological systematic review. BMC Medical Research Methodology. 2019;19(1):178.
Kruk J, Aboul-Enein BH, Bernstein J, et al. Psychological stress and cellular aging in cancer: a meta-analysis. Oxidative Medicine and Cellular Longevity. 2019;2019:1270397.
Levesque C. Therapeutic lifestyle changes for diabetes mellitus. Nursing Clinics of North America. 2017;52(4):679-692.
Ni Y, Ma L, Li J. Effects of mindfulness-based stress reduction and mindfulness-based cognitive therapy in people with diabetes: a systematic review and meta-analysis. Journal of Nursing Scholarship. 2020;52(4):379-388.
Ornish Lifestyle Medicine website. The Ornish Reversal Program: Intensive Cardiac Rehabilitation. Accessed at https://www.ornish.com/intensive-cardiac-rehab/ on April 26, 2021.
Schneiderman N, Ironson G, Siegel SD. Stress and health: psychological, behavioral, and biological determinants. Annual Review of Clinical Psychology. 2005;1:607-628.
Seal KH, Becker WC, Murphy JL, et al. Whole Health Options and Pain Education (wHOPE): a pragmatic trial comparing whole health team vs primary care group education to promote nonpharmacological strategies to improve pain, functioning, and quality of life in veterans—rationale, methods, and implementation. Pain Medicine. 2020;21(suppl 2):S91-S99.
Tamashiro KL, Sakai RR, Shively CA, et al. Chronic stress, metabolism, and metabolic syndrome. Stress. 2011;14(5):468-474.
Whayne TF Jr, Saha SP. Genetic risk, adherence to a healthy lifestyle, and ischemic heart disease. Current Cardiology Reports. 2019;21(1):1.
Whole Health Institute website. Accessed at https://www.wholehealth.org/ on May 19, 2021.

Acknowledgments

NCCIH thanks Mary Beth Kester, M.S., and Helene M. Langevin, M.D., NCCIH, for their review of this publication.

This publication is not copyrighted and is in the public domain. Duplication is encouraged.

NCCIH has provided this material for your information. It is not intended to substitute for the medical expertise and advice of your health care provider(s). We encourage you to discuss any decisions about treatment or care with your health care provider. The mention of any product, service, or therapy is not an endorsement by NCCIH.

IMAGES

Download Framework Presentation Template Slide
Web Application Framework PowerPoint Template
Web Application Framework PowerPoint Presentation Slides
Web Application Framework PowerPoint Template
10 Best Web Development Framework You Should Use
Web Application Framework PowerPoint Template Ppt PowerPoint

VIDEO

Mastering ASP.NET Core MVC: Build Dynamic Websites!
Live Edit: Reveal-JS The HTML Presentation Framework
Demo
The Supreme Presentation Framework
.Net Core Web App
AP: What is a Framework and Why Would Access Developers Use One? with John Colby

COMMENTS

The HTML presentation framework
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.
GitHub
MIT license. 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 ...
Top 10 JavaScript frameworks to create 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.
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.
Build and Publish a Presentation with RevealJS and Github
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 ...
Reveal JS
Today I'm starting a series of short videos on Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this first video, we'll l...
Flowtime.js
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.
Create Incredible Web Presentations with Reveal.js
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.
reveal.js
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. Check out the live demo. The framework comes with a broad range of features including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX support, syntax ...
Mastering reveal.js
Mastering reveal.js. Mastering reveal.js Introduction. Watch on. This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js. We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting ...
impress.js
impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
Virtual presentation framework: Your guide to presenting online
Our virtual presentation framework breaks down everything you'll need to keep your audience engaged when presenting online.
Reveal JS
This series of short videos explores Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this fourth video, we'll look at ad...
Markup
The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the body element. If you're including multiple presentations on the same page each presentations .reveal element will act as their viewport. The viewport is always decorated with a reveal-viewport class reveal ...
reveal.js
HTML Presentations Made Easy Created by Hakim El Hattab/ @hakimel Heads Up reveal.js is a framework for easily creating beautiful presentations using HTML. support for CSS 3D transforms to see it in its full glory. Oh hey, these are some notes.
How to Create Beautiful HTML & CSS Presentations with WebSlides
Ivaylo Gerchev guides you step by step as you create a beautiful HTML and CSS web presentation using WebSlides, a fantastic framework for this kind of task.
5 of the Best Free HTML5 Presentation Systems
I have a lot of respect for Microsoft PowerPoint, but.. all PowerPoint presentations look the same. Here are the best HTML5 presentation systems I've found.
WebSlides: Create Beautiful HTML Presentations
WebSlides is the easiest way to make HTML presentations. Just choose a demo and customize it in minutes. 120+ slides ready to use. Good karma.
The tiniest presentation framework
The tiniest presentation framework / I did roughly 50 talks over the years, and for almost all of them, I used Reveal.js. I like it because it's HTML-based. I have complete control of everything and can easily publish the slides online. However, one thing bugs me every single time - the size of my content. I want to use all the available space. This becomes very important when I'm showing code ...
12 Impressive JavaScript & HTML5 Presentation Frameworks
These frameworks are the simplest way to create presentations for browsers and facilitate web development in an easier way. Below is a review of 12 JavaScript and HTML5 presentation frameworks:
FsReveal
FsReveal FsReveal allows you to write beautiful slides in Markdown and brings C# and F# to the reveal.js web presentation framework.
JavaScript libraries and web presentation frameworks
Web presentation frameworks consist of JavaScript libraries, stylesheets, and "widgets" that work together to give you some convenient building blocks for nice looking pages. Some of these goodies include headers, buttons, calendar date pickers, menus, etc. Web development frameworks are typically engineered so that your page works in a similar ...
Media
When working on presentations with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the viewDistance configuration option. To enable lazy loading all you need to do is ...
Top Best JavaScript Frameworks: Build Modern Web Apps With Ease
Using JavaScript frameworks helps in organizing the construction of Web applications by presenting a set of frameworks, tools, and community support. Altogether, with the most popular JavaScript frameworks, you get simple codes that are easy to maintain and increase the quality of every project.
Whole Person Health: What It Is and Why It's Important
The Total Force Fitness program arose within the U.S. Department of Defense Military Health System in response to the need for a more holistic approach—a focus on the whole person instead of separate parts or only symptoms—to the demands of multiple deployments and the strains on the U.S. Armed Forces and their family members.

Navigation Menu

Saved searches

hakimel/reveal.js

Repository files navigation

Getting started

Releases 47

Contributors 323

Top 10 JavaScript frameworks to create presentation slides

Common features

You might also like

jQuery Script - Free jQuery Plugins and Tutorials

The Best HTML Presentation Framework

Table of contents:

Best jQuery HTML Presentation Frameworks

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

jQuery Plugin To Create Amazing Presentations - mb.disclose

Responsive Web Presentation Plugin For jQuery - sectionizr

Best Vanilla JS HTML Presentation Frameworks

Fullscreen Scrolling Presentation In JavaScript – Pageable

Amazing Presentation Framework With CSS3 - impress.js

Shower HTML presentation engine

Conclusion:

You Might Also Like

Add Your Review

Build and Publish a Presentation with RevealJS and Github

You may also like...

What is it?

Compatibility and Support

Touch Devices Support

Mastering the Navigation

Navigation Keys and default behaviours:

Alternate Navigation Control

Some Other Keys

Overview Mode.

Navigating the Overview

Navigate via Links or Javascript API

Navigate With History

Progress Indicator

Fragments Support

Fragments Unleashed

Default HTML Structures

1 st Level Heading

Ordered Lists

Theme and Styling

Fluid Layout

Image Management

Stacked Images

Centered Stacked Images

About the Centered Stack

Native Parallax Support

The Invaders from Audiogalaxy

This Page Is Just for Testing the Parallax

Code Snippets Highlight

Events and Custom Implementations

Some Examples

More Examples

Use It! It’s Free

Create Incredible Web Presentations with Reveal.js

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

Alternatives to Reveal.js

Getting Started

Installations

Folder Structure

Starter Template

Backgrounds

Session Replay for Developers

Customization

Transitions

Vertical Slides

Auto-Animate

Slide Numbers

Useful hints and guidelines for Reveal.js

Gain Debugging Superpowers

More articles from OpenReplay Blog

Top 7 PostHog Alternatives for 2024

Top 6 React state management libraries for 2022

Documentation

Online Editor

Package Sidebar