Building nice, animated HTML5/CSS3
hand-crafted presentations
Valentyn Shybanov
http://olostan.name/
Cascade
Transitions
Transforms
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Move
Rotate
Scale
Crazy Matrix3D
Linear
Easing
Bézier
Just adding and removing
CSS classes!
2011
JaCSS: JavaScript library
70 lines, VanillaJS
http://github.com/olostan/jacss/
DaCSSlide: Dart library
No Dart or Angular needed
Only HTML and CSS
Done?
Create GitHub repository
Use peanut utility
push to GitHub
Done!
Check examples
Create own
Share one
Contribute
Thank you!
Hello, my name is Valentyn Shybanov.
Last 7 years I am doing lots of public talks about Web and Cloud technologies and I have noticed that people get much more interested about what you’re talking if you accompany your talk with nice presentation slides.
First, of course, I’ve tried tools that help to create non-standard presentations like Prezi.
I liked them, but I felt myself limited: there is always a trade off between ease of use and available features: more easy to use, more constrains you have.
As I am developer, I felt that I can do better. And I like to code! Moreover, there is a saying that any developer should build a framework, and any web developer should build also a framework for building a presentations
Mostly at that time, Google Chrome starts supporting big variety of CSS3 Features
So I though: what if I can combine main feature of CSS - Cascading, CSS3 Transitions and CSS3 Transforms?
Cascading in CSS allows to override node’s visual style when you add classes into class list of the node.
So if your node has class “Slide1” that defines that it should have blue colour
Adding class “Slide2” that defines node’s colour to green will change node's color from blue to green
And removing "slide2" cass will make node become blue back
CSS3 Transforms allows to move things, rotate, scale,
and even matrix3d ( http://codepen.io/fta/pen/ifnqH )
And CSS3 Transitions undertakes work with animation!
You can specify different easing functions
The most interesting part is that there mostly no need any javascript: the only code required is adding and removing classes.
That was my first implementation I’ve published 4 years ago ( https://github.com/olostan/jacss/blob/71603b8a1242978158375161c84e7e387ed70d3d/jacss.js ) source code was about 70 lines of VanillaJS code.
About 1 year ago, Google released first version of Dart, so I decided to port this library to Dart.
And use AngularDart. Why? Because it is fun!
So let me introduce DaCSSlide
Actually to use DaCSSlide (Dart version of JaCSS - implementation of idea I’ve just described) you don’t need to know Dart.
All you need to know is basic knowledge of CSS and HTML.
You can use «starter project» to start playing with DaCSSlide - https://github.com/olostan/dacsslide_starter
Presentation is set of “symbols” that are just simple HTML elements, so you can:
embed there images, videos, anything what you can put into Web Page
Style it as you can style any web element
Also you can put any Web Component or AngularDart component
DaCSSlide provide small additions to SASS format to make defining position and transforms easily.
After added symbol you can define transitions that would be applied when you switch slides.
After you set initial styling you can define show element should behave from slide to slide
With “show” and “hide” functions you can define lifecycle of the comment
When you’re done, you can very easily publish your presentation
Create an repository on GitHub
Use peanut utility to build presentation into ‚gh-pages’ branch
It will compile your presentation so it could be viewed on normal browser (not Dartium)
And push it into github
Your presentation is now online and you can share it with others!
As in any open source project I encourage you to check examples, create own presentations and share it with others
Thank you for watching!