impress.js - CSS3 presentations tearing up the template
Even good presentations that do not contain lists of twenty points as the eighth pin and which cause a gag reflex of pictures from free collections of the “meeting and partnership” clip art or “office life” follow the set standard long ago, unchanged and transferred to office packages from the world of old wide projectors. A presentation is always a collection of rectangular pictures of the same size and size. Sometimes transitions and animations are added between them, annoying no less than multi-colored inscriptions and senselessly smiling abstract office workers. The de facto standard for a good presentation has long been a sequence of static slides without any flickering, with very short text in large print and a few carefully selected photos or screenshots.Based on CSS3 transformations and transitions, a javascript framework for creating presentations impress.js goes beyond the concept of a “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 can watch a small demo here , and the rest - to create an example of an unusual presentation right now.
Impress.js currently supports only the latest desktop versions of Chrome and Safari, with the rest of the browsers - how lucky. Create a new page and connect the impress.js script to it, tweak a bit and tint with styles and add a div wrapper with the
id=”impress" attribute, inside which will be our presentation: <!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 block like
<div class=”step” … > , to which you can add attributes that define the position and scale. You can move between slides using the space bar or the arrows. The framework is still less than a month, 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> <div class="step"> </div> The second step. Move 1000 pixels to the right and down:
<div class="step" data-x="1000" data-y="1000"> <h1> - :</h1> <div class="step" data-x="1000" data-y="1000"> </div> The third step. Begin to change the scale:
<div class="step" data-x="3000" data-y="-1000" data-scale="4"> <h1> - :</h1> <div class="step" data-x="3000" data-y="-1000" data-scale="4"> </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> <div class="step" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40"> </div> Fifth step. 3D CSS Transformations:
<div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"> <h1> - 3D:</h1> <div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"> </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 rush that impress.js caused on Gitchub, we can hope for its rapid development. In addition to the obvious use for creating presentations, the concept of placing content in an unlimited three-dimensional space instead of a flat page of a fixed size may well find application in tablets with multitouch, as they naturally support zooming and scrolling in all directions. Reminds a scalable interface that Jeff Raskin dreamed about.
UPD: In the comments habrauzer smashercosmo suggested that there is already a port on jQuery with an emphasis on cross-browser and use in web design in general, and not just for percentations.
')
Source: https://habr.com/ru/post/136505/
All Articles