impress.js - CSS3 presentations tearing a template

Published on January 18, 2012

impress.js - CSS3 presentations tearing a template

  • Tutorial
Even good presentations that do not contain twenty-point lists with an eighth pin and cause a gag reflex of pictures from the free collections of “meeting and partnership” or “office life” clipart follow the long-established standard, which was transferred to office suites from the world of old slide projectors without changes. Presentation is always a set of rectangular pictures of the same format and size. Sometimes, transitions and animations are added between them, annoying no less than multi-colored inscriptions and meaninglessly smiling abstract office workers. The de facto standard for a good presentation has long been a sequence of static slides without flickering, with very short text in large print and a few carefully selected photographs or screenshots.

Based on CSS3 transformations and transitions, the impress.js javascript framework for creating presentations goes beyond the concept of “slide” and allows you to build presentations in an open, unlimited three-dimensional space. The source of inspiration for him was the service prezi.com . The impress.js repository on Github appeared less than a month ago, but has already become one of the most popular. Impatient ones can watch a small demo here , and the rest can create an example of an unusual presentation right now.

Impress.js currently only supports the latest desktop versions of Chrome and Safari, with other browsers - as luck would have it. We’ll create a new page and connect the impress.js script to it, trim it a bit and color it with styles and add a div wrapper with an attribute id=”impress"inside which our presentation will be:
<!doctype html>
<html>
<head>
   <title>Impress.js</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <style type="text/css">
        body  {
        background-color: #ed7;
        color: #400;
        font-size: 2em;
        }
        .step  {
        width: 1000px;
        }
        img  {
        margin-left: 450px;
        }
        .no-support-message  {
        display: none;
        }
        .impress-not-supported .no-support-message  {
        display: block;
        color: red;
        font-size: 2em;
        }
    </style>
</head>
<body>
<div id="impress">
    <div class="no-support-message">
        Увы! Impress.js пока поддерживает только Chrome и Safari.
    </div>
</div>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

Each slide, or rather, the animation step is represented by a view block <div class=”step” … >, to which you can add attributes that specify the position and scale. You can switch between slides using the space bar or arrows. The framework is still less than a month old, so the set of available attributes is still very limited:
  • data-x
  • data-y
  • data-z
  • data-rotate-x
  • data-rotate-y
  • data-rotate-z (or just data-rotate)
  • data-scale

So, the first step. All attributes are zero by default:
<div class="step">
    <h1>Первый шаг - без атрибутов:</h1>
    &ltdiv class="step"&gt
</div>

Second step. Move 1000 pixels to the right and down:
<div class="step" data-x="1000" data-y="1000">
    <h1>Второй шаг - трансляция:</h1>
    &ltdiv class="step" data-x="1000" data-y="1000"&gt
</div>

Third step. We begin to change the scale:
<div class="step" data-x="3000" data-y="-1000" data-scale="4">
    <h1>Третий шаг - масштаб:</h1>
    &ltdiv class="step" data-x="3000" data-y="-1000" data-scale="4"&gt
</div>

Fourth step. We make a half-barrel:
<div class="step" data-x="-6100" data-y="-3800" data-rotate="180" data-scale="40">
    <h1>Четвёртый шаг - поворот:</h1>
    &ltdiv class="step" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40"&gt
</div>

Fifth step. 3D CSS transforms:
<div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29">
    <h1>Пятый шаг - 3D:</h1>
    &ltdiv class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"&gt
</div>

Sixth step. The main thing is in the details:
<div class="step" data-x="7963.7" data-y="-8106.3" data-scale="0.04">
    <img src="img/small_nuance.png">
</div>

That's all. Given the excitement that impress.js caused on Github, one can hope for its rapid development. In addition to the obvious application for creating presentations, the concept of placing content in unlimited three-dimensional space instead of a flat page of a fixed size may well find application in tablets with multitouch, as they naturally and conveniently support zooming and scrolling in all directions. Recalls the scalable interface that Jeff Ruskin dreamed of .

UPD: In the comments, the smashercosmo habraiser suggested that there is already a jQuery port with emphasis on cross-browser support and use in web design in general, and not just for presentations.