Easily create beautiful CSS3 presentations with JaCSS



    I want to start with the fact that I’m terribly tired of presentations with a standard layout: there’s a heading with a theme on the top, then a set of points, on the bottom footer and on the right and / or in the center there may be some kind of diagram or diagram.

    Boring!

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


    History


    To get started, I tried a thing like Prezi (And that's what happened). Yes, unusual. But I was terribly surprised by the complexity and the practical impossibility of customization - there are no themes, fonts, animations ... unless you add a video. But the concept was very interesting, although it embarrassed the “whirl” of transitions - I’m already dizzy when you launch a presentation on a large projector. Although then my performance, judging by the reviews, went well.

    This year I was invited to speak again (this time at JEEConf ) and I again faced the question of how I would show what I was going to talk about (almost a verse). And again I wanted an unusual :)

    At first I decided to do something like Prezi, but on GWT and use the full power of HTML. But in the process of development, another idea somehow came up slowly: why not use CSS3-Transitions for animation and CSS3-2D-Transforms for turns? After all, then with minimal effort you can make beautiful transitions between the “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 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 for some element two classes will be set (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 to learn CSS.

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

    First pancake


    In order to “run around” the idea, I wrote a small piece of jQuery code that did all that was adding a class when moving to the next “slide” and deleting it when it was necessary to return to the previous one.

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

    In the end, the slide setup code looked like:
    	if (stage>current_stage) {
    	   for (current_stage++;current_stage<=stage;current_stage++) {
    		$("#cont").addClass("s"+current_stage);
    	   }
    	   current_stage--;	
    	} else if (stagestage;current_stage--) {
    		$("#cont").removeClass("s"+current_stage);
    	   }
    	}
    

    After that, I focused mainly on the content.

    As a result, I made such a presentation at JEEConf: CQRS + GAE + GWT

    Stage 2: JACSS


    After the report, which, incidentally, was quite interesting to conduct, I wanted to somehow streamline this, so to speak, technology so that the next report would be easier to prepare.

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

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

    As a result, I got this project: JaCSS (like 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. The handler for the keys of the stitches and the space bar hangs on the window (which switch the "slides")
    3. The handler for changing the "hash" url hangs (for the correct processing of the "back" / "forward" navigation of the browser)
    4. Looks at the url hash, and if there is something trying to go to the slide specified in the url hash

    When switching slides:
    1. Adding and removing classes of the form “s N ”, where N is the number of the slide. Thus, if the current slide was the fifth, then when navigating to the 7th, classes s6 , s7 will be added . And when navigating to 2, there will be an attempt to remove the classes s5 , s4
    2. the url hash will be set equal to the new "current" slide


    The most interesting thing is that later I will tell you about my proposed use of this "library". In fact, the structure of HTML and CSS files can be radically different from mine. Moreover, I would even ask good web designers to think and offer more convenient options for centering and positioning content. My examples can be considered as proof of concept, on the basis of which it is already possible to make "normal" decisions.

    In general, I suggest my option:

    How to create your presentation with JACSS



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

    with the html code, for this I ask here: github.com/olostan/jacss/tree/master/examples/simple

    In html we connect jacss- ovskie js / css. Then we configure it (the maximum number of "slides") and set the actual text:
    Example

    I must say right away that if you use my jacss.common.css (which is not necessary), then the identifiers of the content blocks should begin with the letter "t".

    In CSS, we first set the initial position of the content. When using my style set, each content is initially hidden (opacity: 0, visibility: hidden), in addition, the upper left corner is positioned approximately in the center. Total to initially center our text you need:
    #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 only record changes relative to the previous “slide”.

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

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

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

    What's next?



    And then everything is in your hands: fork for health! Indeed, only the concept is really ready so far, to which so much more can be screwed on:
    • Browser support (I mainly looked at Chrome / FF4). I see no reason why it should not work the same on Opera, IE9
    • Support for mobile devices (gestures). I checked on my iPad - it basically works, you just need to “sharpen” the CSS and add handlers for gestures
    • Try to screw LESS (http://lesscss.org/) with node.js as a no-end
    • A more beautiful navigation bar (maybe with auto-hyde), or different “skins” for it

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

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



    Linklist:
    My first
    JaCSS presentation on GitHub.
    Simplest demo on jacss.
    Slightly more complex demo on jacss.

    Also popular now: