Flowtime.js is a framework for easily building HTML presentations or websites.
It’s built with web standards in mind and on top of a solid full page grid layout.
The animations are managed with native and accelerated CSS3 transitions.
Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.
Press Down Key or Swipe Up to continue.
Flowtime.js is fully compatible with real moderns browsers:
Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities will work.
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]">
Where 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).
You can also trigger every navigation behaviour using the Flowtime.js Javascript API.
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.