¿Qué es?

Flowtime.js es un entorno para crear fácilmente presentaciones HTML o sitios web.

Está construido teniendo en cuenta los estándares web y un diseño de cuadrícula sólido de página completa.

Las animaciones se gestionan con transiciones CSS3 nativas y aceleradas. JavaScript se encarga del comportamiento de la navegación y agrega funcionalidades avanzadas y opciones de configuración.

Presiona Tecla abajo o Desliza hacia arriba to continue.

Compatibility and Support

Flowtime.js is fully compatible with real moderns browsers:

• Firefox
• Chrome
• Safari
• Opera
• Internet Explorer 10

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.

Touch Devices Support

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.

Mastering the Navigation

You can navigate in many ways. The most common way is using the keyboard.

Navigation Keys and default behaviours:

• Down Key goes to the next page or shows up the next fragment (we’ll see this later).
• Up Key goes to the previous page or hides the fragment.
• Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).
• Left Key goes to the adjacent page in the previous section.

Alternate Navigation Control

Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:

• Down Key goes to the next page skipping all the fragments.
• Up Key goes to the previous page skipping all the fragments.
• Right Key goes to the first page in the next section.
• Left Key goes to the first page in the previous section.

Some Other Keys

Because: the more, the better.

• Page Up Key goes to the first page of the current section.
• Page Down Key goes to the last page of the current section.
• Home Key goes to the first page of the first section.
• End Key goes to the last page of the last section.

Overview Mode.

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.

Navigating the Overview

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.

Navigate via Links or Javascript API

You can link 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.

Navigate With History

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.

Progress Indicator

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.

Fragments Support

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 Unleashed

Fragments can be more than just delayed piece of page.

Thanks to some special classes you can add a couple of useful custom behaviours.

• The .step fragment will partially fades out;
• The .shy fragment will completely hides itself;
• You can use this two special fragment types to easily create special effects.

This is a .shy example!

And this is a .step one!

Default HTML Structures

Flowtime.js comes with a default theme that styles the most common HTML structures, like:

1^st Level Heading

2^nd Level Heading

3^rd Level Heading

4^th, 5^th and 6^th Level Heading

Unordered Lists

• An item.
• Another item.
• Just another item.
• Ok, we get it!

Ordered Lists

1. One.
2. Two.
3. Three.
4. Four.

Definition Lists

One:

a single unit of everything.

Two:

the only even prime number.

Three:

without the “h” is a plant.

Four:

“Quattro” in italian.

Quotes and Citations

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.

Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute on HTML5 Doctor.

Theme and Styling

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).

Fluid Layout

Everything can be fluid, just use em, rem and % units if you want to make an element resizable.

Image Management

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.

Stacked Images

Native Parallax Support

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 data-parallax attribute.

For an example go to the next page; for more info read the documentation.

* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".

This Page Is Just for Testing the Parallax

In the previous page, from left to right:

Sax:

King Mix’s most trusted servant. After a diploma in the music conservatory in the…

King Mix:

son of the noble dynasty of the Mix of Censor, he soon shows his…

Tone:

the most feared space intruder on Mixer. He flunked the musical exam…

More info about this villains on www.genereavventura.com.

Code Snippets Highlight

Code highlight is a courtesy of Lea Verou’s Prism.
Because I really didn’t want to re-invent the wheel.
You can use what you want, it’s not a dependency (but it’s very smart and cool).

function saySomethingSmart()
{
	alert("The bad craftsman blames his tools!");
}

.is-not-water {
	display: inline-block;
}

<h1>The Bad Craftsman Blames His Tools!</h1>

Events and Custom Implementations

When navigated to a page Flowtime.js fires a custom flowtimenavigation event full of useful properties to customize or build your components or behaviours.

Read the documentation to learn more about this event and its properties.

Some Examples

You can take a look at some examples to explore some of the possibilities that Flowtime.js offers to customize your experience.

• Cross Direction
• Custom Fragment Animations
• Duplicated IDs
• Modal Overlay
• Page Titles in Navigation
• Scroll the Current Section Only
• Sub Pages Demo
• Video Embedding and Controls

Continues …

More Examples

• Default Behavior;
• gridNavigation(false);
• nearestPageToTop(true);
• rememberSectionsLastPage(true);
• rememberSectionsStatus(true);

If you need a specific example or if you have a question about a feature feel free to ask or open an issue.

Use It! It’s Free

This project is open source, feel free to contribute to the development on Github.

Feedbacks, suggestions and bug reports are welcomes.

Use it as you wish and build great things.
And when you have done so let me know the URL, I will appreciate it.

Thank You

Designed and coded by Marco Lago
Interaction/Experience/Game/Designer/Developer

You can find me on Twitter as @marcolago

If you like this work spread the word, you know how ;)

Have Fun

Demo de incrustación de video

Esta presentación es una prueba para incrustar videos de You Tube y Vimeo.

Video de Youtube

Vídeo de Vimeo

"LOAD" from Brian Sørensen on Vimeo.