I want to start by saying that I was terribly tired of presentations with a standard layout: a cap with a topic on top, then a set of points, a footer below and a picture or a diagram on the right and / or in the center.

Boring
')
Where is the creatinality? Do you really not want to just open your topic, but to make it so that even those who are not interested in the topic will be interested in the presentation of the material? Damn, we are web developers, so why do we create presentations in the left programs, and not where we are the best?

Story

For starters, I tried such a thing as Prezi (And that's what happened with me). Yes, unusual. But I was terribly surprised by the complexity and practical impossibility of customization - there are no themes of their own, fonts, animation ... except to add videos. But the concept was very interesting, although it embarrassed the "whirlwind" of transitions - my head is spinning when you start a presentation on a large projector. Although then my performance, judging by the reviews, went well.

This year I was again invited to speak (this time at JEEConf ) and before me again there was a question about how I would show what I was going to tell (almost verse). And again I wanted an unusual :)

At first I decided to do something like Prezi, but on GWT and use all the power of HTML. But in the process of development, another idea slowly emerged: why not use CSS3-Transitions to animate and CSS3-2D-Transforms for turns? After all, then it is possible with minimal effort to make beautiful transitions between slides.

Further more: I remembered that CSS is cascading styles. That is, if we have one definition, and then another, which partially or completely replaces some of the parameters of the first, then the browser will have to render according to the second definition.

That is, if there are two definitions

.class1 { left: 100px; } .class2 { left: 200px; } 

And some element will be set to two classes (class = "class1 class2") as a result, the browser will have to position the element with the left property equal to 200px. This property is familiar to anyone who has just started learning CSS.

And if the element had class1 and then we assign class2 to it, then left will change from 100 to 200. It will change. That is, if the element also had the css3 transition “turned on”, the browser would have to move the element smoothly from 100px to 200px. And this is exactly what we need!

First pancake

In order to “roll in” the idea, I wrote a small piece of code on jQuery, which did everything it did - it added the class when going to the next “slide” and deleted it when it was necessary to return to the previous one.

I placed all the content that appeared and disappeared in a container with a specific id (“cont”), which allowed changing the class (s) of this container to change content styles.

As a result, the slide installation code looked like:

  if (stage>current_stage) { for (current_stage++;current_stage<=stage;current_stage++) { $("#cont").addClass("s"+current_stage); } current_stage--; } else if (stage<current_stage) { for (;current_stage>stage;current_stage--) { $("#cont").removeClass("s"+current_stage); } } 

After that, I focused mainly on content.

As a result, at JEEConf I gave a presentation like this: CQRS + GAE + GWT

Stage 2: JACSS

After the report, which, by the way, was quite interesting to conduct, I wanted to somehow streamline this, so to speak, technology in order to make the next report easier to prepare.

First, I decided that jQuery in my case is not needed - there is a classList .

Secondly, it was necessary to make the minimum configuration - how many slides, where are the controls, etc. To do this, I brought these parameters into a separate object for configuration and used querySelectorAll

As a result, this project came out like this: JaCSS (as a mixture of Javascript and CSS).

Inside the code there is absolutely nothing complicated. After adding jacss does the following:

1. Exports two functions: jacss.next (), javss.prev () - switching "slides"
2. Hangs the handler of the keys of the small and spacers on the window (which switch "slides")
3. Hangs the url hash change handler (for correct handling of navigation "back" / "forward" browser)
4. Looks at the hash url, and if there is something there is trying to go to the slide specified in the hash url

When switching slides occurs:

1. Add-delete classes of the form “s N ”, where N is the slide number. Thus, if the current slide was fifth, then when navigating to the 7th, the classes s6 , s7 will be added. And when navigating to 2, there will be an attempt to delete the classes s5 , s4
2. will set the hash of the URL to the new “current” slide

The most interesting thing is that later I will tell you the option of using this “library” that I propose. In fact, the structure of HTML and CSS files can be completely different from mine. Moreover, I would even ask good web designers to think and offer more convenient options for centering and positioning content. My own examples can be considered as proof of concept, on the basis of which “normal” decisions can already be made.

In general, I suggest my option:

How to create your presentation with JACSS

The presentation is divided (not clearly, see below) into two parts: “contents” (text, pictures), and “behavior” (set of css definitions). For this we will create two files: simple.html and simple.css

Habraparser somehow cope with the html code, so please ask here: github.com/olostan/jacss/tree/master/examples/simple

In html we connect jsss js / css. Then we configure it (the maximum number of “slides”) and set the actual text:

 <span id='texample'>Example</span> 

I’ll say that if I use my jacss.common.css (which is not necessary), then the content blocks must start with the letter “t”.

In CSS, we first set the initial position of the content. When using my set of styles, each content is initially hidden (opacity: 0, visibility: hidden), besides the upper left corner is positioned approximately in the center. Total to place our text initially in the center:

 #texample { color: blue; font-size: 50px; left: -80px; top: -35px; } 

Then there are descriptions of the style (color, visibility, position) of the content for each “slide”:

 .s1 > #texample { opacity: 1; visibility: visible; } .s2 > #texample { left: -400px; top: 200px; } .s3 > #texample { top: -200px; color: red; } ..... 

We are recording only the changes from the previous “slide”.

The result can be seen here (or taken from the github).

A more complex example (with gradients, shadows, RGBA background, etc.) can also be viewed .

A few words about the separation between html and css: it is important to understand that our behavior is in css. That is, changes are recorded. What to do if you need to change the picture / text when changing the frame? If the picture is simple - you can put it on the background, then the text is more complicated. I found this solution: use pseudo-selectors: before,: after and "content" - see the change "Vasya" to "Kohl" here .

What's next?

And then everything is in your hands: fork for health! After all, only the concept is really ready, to which you can fasten so much more:

• Browser support (I mainly looked at Chrome / FF4). I see no reason why it should not work the same way on Opera, IE9
• Mobile device support (gestures). I checked on my iPad - basically it works, you just need to “sharpen” CSS and add handlers to gestures
• Try to tighten the LESS (http://lesscss.org/) with node.js as a non-end
• A more beautiful navigation bar (maybe with auto-hide), or different “skins” for it

I will gradually try to move on this checklist, but I welcome any help in the form of pull requests :) As well as suggestions, tips and comments.

Thank you and see you on the beautiful and fascinating reports!

Linklist:
My first presentation
JaCSS on github
The simplest demo on jacss
Slightly more complicated demo on jacss