Flowtime.js is fully compatible with real moderns browsers:
In older browsers degrades to a bi-directional scrolling navigation with anchor links.
On touch devices you can navigate through slides swiping in all directions.
By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.
You can navigate in many ways. The most common way is using the keyboard.
Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:
Because: the more, the better.
You can look at the entire presentation by pressing ESC Key.
When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.
Try it out!
WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview Mode; see the documentation for more info.
In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.
You can links every page by simply building the
href value using this schema:
<a href="#/[section data-id attribute]/[page data-id attribute]">
data-id attribute is an optional attribute you can add to every section or page.
I.e.: if you want to go to back to the first page click here (press backspace to come back to this page).
Take a look at the documentation if you want to learn more.
Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.
This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.
You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.
Look at the bottom right corner and you can see a miniature of the presentation structure.
Clicking on a page thumb will navigate to that page.
The built in fragments navigation allows to advance step by step inside a page.
Press down to try.
You can discover single elements or even a single part of an element, one at a time.
Fragments navigation is deeply customizable with some configuration options
You can learn how in the documentation.
Fragments can be more than just delayed piece of page.
Thanks to some special classes you can add a couple of useful custom behaviours.
.stepfragment will partially fades out;
.shyfragment will completely hides itself;
This is a
And this is a
Flowtime.js comes with a default theme that styles the most common HTML structures, like:
My favourite quotation:
The bad craftsman blames his tools.
Sotto un cespo di rose scarlatte dai al rospo the caldo col latte.
Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.
If you don’t like the default theme or you want to build your own (or both things),
or if you want to build a website on top of Flowtime.js,
you can write your own theme and replace the default one.
Theme and core css are in separate files so you can’t break the layout (unless you override some classes).
Everything can be fluid, just use em, rem and % units if you want to make an element resizable.
Images are fluid like all the other content.
You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.
Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide.
Look at the source code to learn how to write the markup.
You can center anything, not only images!
Just like this content.
Useful for splash pages and titles.
And you are not limited to stacks, you can center what you want.
By popular demand Flowtime.js includes native parallax support*.
Simply add a
parallax class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using
* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".
In the previous page, from left to right:
More info about this villains on www.genereavventura.com.