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!