How to create a page like a power point presentation

Powerpoint has been and probably forever will be an irreplaceable tool in many people’s toolkit. Why? Because it allows people to organize graphics and text neatly in one big canvas. This is especially great to summarize tough concepts while a presenter breaks it down. Fortunately, the web has evolved so much that you need not fear the day when Powerpoint is lost to time, because you can build one using just HTML, CSS and Javascript.

Getting started

This tutorial will primarily use the left and right arrow keys to move between sections, but the code can be easily changed to appropriately make use of the up and down arrow keys.

First, we have to write some markup, each section will contain a class of either active or hidden by default. We have decided to make the first section active by default just like powerpoint but you can easily change this by swapping the class with some other section.

What each section contains is up to you, we will simply throw in a heading to help us distinguish a section from other sections.

<main>
  <section class="active">
    <h1>Hello there!</h1>
  </section>
  <section class="hidden">
    <h1>Remember to wear a mask!</h1>
  </section>
  <section class="hidden">
    <h1>Bye bye!</h1>
  </section>
</main>
Code language: HTML, XML (xml)

Throwing in some styles

With the markup done, there’s just one more step before we start capturing keyboard events to make it more powerpoint-like. To make each section take up the entire height of the viewport (the visible part of a page), we will set the min-height property to 100vh. 100vh roughly translates to “take as much space as the full height of the viewport”.

We also make use of CSS3 Flexbox here to center the heading both vertically (align-items) and horizontally (justify-content), this is purely aesthetic and not a requirement for the effect so it is up to you to replace it with what you want.

body {
  font-family: sans-serif;
  margin: 0;
}
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section h1 {
  font-size: 3.5rem;
  text-align: center;
  color: white;
}
Code language: CSS (css)

If you’re interested in making the sections have a distinct color without having to use a class for each, you could make use of the nth-child selector. Here we make use of the odd and even values to quite literally give different a background-color for odd and even sections. If you’d rather style them individually, take a look at the nth-of-type() selector.

section:nth-child(odd) {
  background-color: crimson;
}
section:nth-child(even) {
  background-color: black;
}
Code language: CSS (css)

Lastly, we need a class to hide all of the sections that are currently not “active”. .hidden when added will overwrite the display of the section it was added to none from flex.

.hidden {
  display: none;
}
Code language: CSS (css)

Breathing life to our pseudo-Powerpoint via arrow keys

Before working on the effect itself, it might be helpful to you to think of each section as a book and all the sections as a stack of books.

At any given point there is always at least one book in the stack, and when you press the right key you should hide that book by stacking a book on top of it and if you’ve run out of books to stack, then you should take all the books except the one at the bottom.

The only difference when you press the left key is that you take away a book each time and if you’ve reached the book at the bottom you should put back all the other books.

This way you more or less create a circle and you never run out of books in the stack. calculateNextIndex is the function that tells us which is the next book. It takes 2 arguments reverse which indicates which gives us an indication of which of the two keys is being used and hence which book comes next, and activeIndex which tells us the position of the top-most book in the stack.

const calculateNextIndex = (reverse, activeIndex) => {
  const sectionsLastIndex = sections.length - 1;
  if (reverse) {
    const nextIndex = activeIndex - 1 < 0 ? sectionsLastIndex : activeIndex - 1;
    return nextIndex;
  }
  const nextIndex = activeIndex + 1 > sectionsLastIndex ? 0 : activeIndex + 1;
  return nextIndex;
};
Code language: JavaScript (javascript)

Next, we have to actually hide and activate the sections appropriately, by removing .active from the section that has it and hiding it by adding .hidden and doing the opposite for the section that has to be activated. traverseSections moves the book that is meant to be moved next.

const traverseSections = (reverse = false) => {
  const currentlyActive = document.querySelector('.active');
  sections.forEach((section, index) => {
    if (section === currentlyActive) {
      const nextIndex = calculateNextIndex(reverse, index);
      const nextActive = sections[nextIndex];
      currentlyActive.classList.remove('active');
      currentlyActive.classList.add('hidden');
      nextActive.classList.remove('hidden');
      nextActive.classList.add('active');
      return;
    }
    return;
  });
};
Code language: JavaScript (javascript)

Finally, we have to capture the keyboard events and perform the correct operation. The keydown event fires an event object that contains the property keyCode. This property is what will help us identify which key has been pressed. Check out this link to take a look at other key codes.

const sections = document.querySelectorAll('section');
document.addEventListener('keydown', (evt) => {
  if (evt.isComposing || evt.keyCode === 229) {
    return;
  } else if (evt.keyCode === 39) {
    traverseSections();
  } else if (evt.keyCode === 37) {
    traverseSections(true);
  }
});
Code language: JavaScript (javascript)

Now, open up PowerPoint and see if what we created looks like it. If you don’t have it installed, don’t worry take a look at this codepen instead:

What can you do next? Try throwing in some transitions, and make it so that the speed of the transitions are customizable via an interface. Then proabably also make it your life-long goal to recreate PowerPoint in the web. I mean, someone is already at it.

Now if you are really serious about it or you enjoy effects like this, you could take a look at fullPage.js. It provides a lot more than what we’ve described here, like adding smooth animations when switching between sections, cross-browser compatibility, and well-written documentation regarding all kinds of ways you can customize the experience. It can be easily integrated with a WordPress website or a website written using a front-end framework like React or Vue.