Simple presentation engine demo. Added active / inactive classes to hide all but one slide at a time. Added position to show active slide in the middle and prev and next slides on the sides.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      .help {
        position: relative;
        top: 110px;
      }
    </style>
  </head>

  <body>
    <article>
      <section class="prev">
        <h2>Slide 1</h2>
        <p>This is the first slide</p>
      </section>
      <section class="active">
        <h2>Slide 2</h2>
        <p>Second slide</p>
      </section>
      <section class="next">
        <h2>Slide 3</h2>
        <p>Another slide</p>
      </section>
      <section class="inactive after">
        <h2>Slide 4</h2>
        <p>Last slide</p>
      </section>
    </article>

    <div class="help">
    <h1>Presentation demo</h1>
    <p>Small slide-based presentation engine
      showing how to use HTML and CSS3 transitions
      to create in browser experience similar
      to PowerPoint, Prezi, etc. For full implementation, check out
            <a href="http://glebbahmutov.com/slides-now">slides-now</a>
    </p>
    <p>To use: press right/left arrow key to go to the next/previous slide.</p>
    <p>
      Gleb Bahmutov       <a href="http://glebbahmutov.com">glebbahmutov.com</a>
    </p>
    </div>
  </body>

</html>

$(function () {
  'use strict';
  var currSlide = 1;
  var allSlides = $('section');

  $(document).on('keydown', function (event) {
    if (event.keyCode === 37 && currSlide) {
      console.log('prev slide');

      $(allSlides[currSlide - 2])
        .removeClass('inactive before')
        .addClass('prev');

      $(allSlides[currSlide - 1])
        .removeClass('prev')
        .addClass('active');

      $(allSlides[currSlide])
        .removeClass('active')
        .addClass('next');

      $(allSlides[currSlide + 1])
        .removeClass('next')
        .addClass('inactive after');

      currSlide -= 1;
    } else if (event.keyCode === 39 && currSlide < allSlides.length - 1) {
      console.log('next slide');

      $(allSlides[currSlide - 1])
        .removeClass('prev')
        .addClass('inactive before');

      $(allSlides[currSlide])
        .removeClass('active')
        .addClass('prev');

      $(allSlides[currSlide + 1])
        .removeClass('next')
        .addClass('active');

      $(allSlides[currSlide + 2])
        .removeClass('after inactive')
        .addClass('next');
      $(allSlides.slice[currSlide + 3])
        .addClass('after');
      currSlide += 1;
    }
    event.preventDefault();
  });
});

article {
		-webkit-perspective: 200px;
		-moz-perspective: 200px;
		-ms-perspective: 200px;
		-o-perspective: 200px;
		perspective: 200px;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		height: 110px;
		overflow-y: hidden;
}

section {
  -webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;

  display: table-cell;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  border-radius: 5px;
  padding-left: 1em;
  margin-left: 50%;
  left: -100px;
  position: absolute;

  -webkit-transition: -webkit-transform .7s ease, opacity .7s ease;
	-moz-transition: -moz-transform .7s ease, opacity .7s ease;
	-ms-transition: -ms-transform .7s ease, opacity .7s ease;
	-o-transition: -o-transform .7s ease, opacity .7s ease;
	transition: transform .7s ease, opacity .7s ease;
}

.before {
  -webkit-transform: translate3d(-220%, 0, 0);
  -moz-transform: translate3d(-220%, 0, 0);
  -ms-transform: translate3d(-220%, 0, 0);
  -o-transform: translate3d(-220%, 0, 0);
  transform: translate3d(-220%, 0, 0);
  opacity: 0.01;
}

.prev {
  -webkit-transform: translate3d(-110%, 0, 0);
  -moz-transform: translate3d(-110%, 0, 0);
  -ms-transform: translate3d(-110%, 0, 0);
  -o-transform: translate3d(-110%, 0, 0);
  transform: translate3d(-110%, 0, 0);
  opacity: 0.25;
}

.active {
  opacity: 1;
}

.next {
  -webkit-transform: translate3d(110%, 0, 0);
  -moz-transform: translate3d(110%, 0, 0);
  -ms-transform: translate3d(110%, 0, 0);
  -o-transform: translate3d(110%, 0, 0);
  transform: translate3d(110%, 0, 0);
  opacity: 0.25;
}

.after {
  -webkit-transform: translate3d(220%, 0, 0);
  -moz-transform: translate3d(220%, 0, 0);
  -ms-transform: translate3d(220%, 0, 0);
  -o-transform: translate3d(220%, 0, 0);
  transform: translate3d(220%, 0, 0);
  opacity: 0.01;
}

.inactive {
  visibility: hidden;
  opacity: 0;
}

# Tiny presentation demo

This demo shows how to make a slide-based
presentation engine similar to PowerPoint
using HTML5 and CSS3 transitions.

## author

Gleb Bahmutov

[@bahmutov](https://twitter.com/bahmutov),
[glebbahmutov.com](http://glebbahmutov.com/)