You can take a look at the sample presentation to quick learn about the possibilities:
For more information check the wiki
Flowtime.js is the slide engine used by SlideCaptain. If you prefer a WYSIWYG editor or you feel not comfortable with plain HTML you can try SlideCaptain: a powerful web app for building well-structured presentations in your browser. SlideCaptain adds many features to Flowtime.js like MathJax™ support and PDF export tool .
SlideCaptain is developed by Engawa.
-
March 3 2014
- Added methods to enable and disable navigation logics at runtime.
- Added options to get alternative horizontal layout; sections are stacked vertically and pages are arranged horizontally.
- Added option to reconfigure key bindings for some wireless presenters. (#15)
-
May 12 2013
Full Page Fluid Layout Boilerplate.
Flowtime.js is designed to perfectly fit your viewport and is based on a solid display: inline-block;
foundation.
This frameworks doesn’t style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like.
But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files.
Alternate Horizontal Layout
The default layout for Flowtime.js has sections arranged side by side horizontally and pages stacked vertically in each section.
You can use the alternate layout where section stacked vertically and pages arranged horizontally by adding the class ft-cross
to the Flowtime element in the HTML document.
See How to Build the Markup section for an example.
Multiple Controls Navigation. You can navigate through pages via links, keyboard or deep-linking. Links are managed using the href value targeting a formatted hash destination; see the demos source code for more examples. Keyboard navigation is based on arrow keys with the Shift key as a modifier to jump over fragments or sections, see the command list:
- Down or Up Arrows: navigate to the previous or the next page. This is the main navigation input; the entire content is navigable using this keys only. If there are fragments in the page every input shows or hides a fragment.
- Shift + Down or Up Arrows: navigate to the prev o next page jumping all the fragments.
- Left or Right Arrows: navigate to the prev or next section. By default the destination will be the page at the same index of the starting point (if you are at page 3 in the section 2 you will go to the page 3 in the section 3). If the same index does not exist the destination will be the higher available index..
- Shift + Left or Right Arrows: Navigate to the first page of the previous or next section.
- Page Up: navigates to the first page of the current section.
- Page Down: navigates to the last page of the current section.
- Home: navigates to the first page of the presentation.
- End: navigates to the last page of the presentation.
- ESC: toggles the overview mode.
Fragments Support. Navigate step by step in a page or jump directly to the next or previous page. You can hide or show every single fragment with special behaviour managed and styled by CSS classes and you can even nest fragments.
Overview Mode. Overview mode allows you to look at the entire site/presentation structure in a single view or from a distant point of view (alternate version). When in overview mode you can navigate to a page by click on it or using the arrow keys and then press Return to go.
History Management. Flowtime.js is built on top of the HTML History APIs so you can navigate using the browser’s back and forward buttons and deep-link a page for sharing. Flowtime.js is a client side only framework so if you want to optimize SEO you have to add a server side logic to serve only the single page content to search engines. If the History APIs were not available the framework degrades well using the hashchange event.
Transitions. Flowtime.js animate the page transition using native CSS3 transitions. Where transitions were not available (IE9) the page change is immediate but works.
Parallax Support Integrated native parallax support based on CSS3 transformations and configurable by data- attributes.
Browser Support Flowtime.js is tested and works on every modern desktop browser and IE9 and above. Where the basic support is not available the framework degrades to a native scrolling with anchor links but the full page fluid layouts remains intact.
Markup for Flowtime.js is really simple and easy to learn.
All you have to do is wrap some divs in a parent <div class="flowtime">
, then, marking up the section with class="ft-section"
and the single page with class="ft-page"
.
To better understand the markup take a look at this snippet:
<div class="flowtime">
<div class="ft-section">
<div class="ft-page">Section 1 / Page 1</div>
<div class="ft-page">Section 1 / Page 2</div>
</div>
</div>
If you want to use the alternate layout you have to add the class ft-cross
to the Flowtime element and Flowtime.js takes care of the rest:
<div class="flowtime ft-cross">
<div class="ft-section">
<div class="ft-page">Section 1 / Page 1</div>
<div class="ft-page">Section 1 / Page 2</div>
</div>
</div>
Every single page is a full window view—or a single slide if you prefer—and it’s a relative formatting context. Even if you have only single slides ordered in a row you have to nest the pages in sections; take a look at this markup which creates two slides one aside the other:
<div class="flowtime">
<div class="ft-section">
<div class="ft-page">Section 1 / Page 1</div>
</div>
<div class="ft-section">
<div class="ft-page">Section 2 / Page 1</div>
</div>
</div>
Flowtime.js sets automatically the title in the browser’s tab on navigation reading it from the first h1
on the page. If you want to override a title or use a different string instead of the heading content you can set a data-title
attribute to the page.
You can add the data-title
attribute both to ft-section
and to ft-page
elements; if a data-title
attribute was found on a section it will be used to write the title in the browser tab with this schema:
<title> text content [ | data-title on ft-section ] | h1 text content or data-title on ft-page
A data-prog
attribute is added to every div marked as ft-section
or as ft-page
in order to manage the navigation.
If you want to customize the URL and the hashtag you can add some data attributes to any section or page.
You can add the data-id
attribute both to ft-section
and to ft-page
elements; if this attribute was found it will be used to build the page URL.
To better understand the use of data attributes here it is an example:
<div class="flowtime">
<div class="ft-section" data-id="section-1">
<div class="ft-page" data-id="page-1">
<h1>Heading Title</h1>
When navigating to this page the title will be "site name | Heading Title"
and the URL will be "http://site_URL/#/section-1/page-1/"
</div>
</div>
<div class="ft-section" data-title="Section 2 Title" data-id="section-2">
<div class="ft-page" data-title="Page 1 Title" data-id="page-1">
When navigating to this page the title will be "site name | Section 2 Title | Page 1 Title"
and the URL will be "http://site_URL/#/section-2/page-1/"
</div>
</div>
<div class="ft-section"data-id="section-3">
<div class="ft-page" data-title="Page Title" data-id="page-1">
When navigating to this page the title will be "site name | Page Title"
and the URL will be "http://site_URL/#/section-3/page-1/"
</div>
</div>
</div>
If you want to delay the showing and navigate single parts in a page just put the class ft-fragment
on the element you want to delay. Here it is an example.
<div class="flowtime">
<div class="ft-section" data-title="Section 1 Title" data-id="section-1">
<div class="ft-page" data-title="Page 1 Title" data-id="page-1">
<p>First Paragraph; this text is visible from start.</p>
<p class="ft-fragment">This paragraph shows up only when you navigate forward and disappears when you navigate back.</p>
</div>
</div>
</div>
You can also add some classes to trigger special behaviours for fragments.
The step
class partially fades out a fragment when the next one is selected; for example: <p class="ft-fragment step">
The shy
class completely hides a fragment when it lose the focus; for example: <p class="ft-fragment shy">
If you want to enable the parallax effect on some elements add a parallax
class to these elements and, optionally, sets the parallax distance value adding a data-parallax
attribute specifying the x
and y
values separated by a comma. If you doesn˙t specify a data-parallax
attribute will be used the default lengths.
<div class="flowtime">
<div class="ft-section" data-id="section-1">
<div class="ft-page" data-id="page-1">
<p class="parallax">Parallaxed element. Will use the default lengths.</p>
<p class="parallax" data-parallax="100,150">Parallaxed element. Will use the data-parallax attribute values.</p>
<p class="parallax" data-parallax="200">Parallaxed element. Will use the data-parallax attribute value; x and y will be the same length.</p>
</div>
</div>
</div>
Flowtime.js comes with configuration APIs useful for customizing the experience and the installation and with navigation APIs for controlling navigation and get the state of the application.
Flowtime.start();
Starts the application logic. This method is optional unless you change some configuration parameters.
If you doesn’t call the start()
method Flowtime.js starts itself but some configuration parameters will be applied only after the first navigation action.
You can pass as optional parameters the same parameters that are accepted by the gotoPage
method (see below) to let the presentation navigating to a specific page at start.
Flowtime.updateNavigation();
Force the update of the navigation object which stores the data about every possibile destination in the site (the sub pages). If you change the number of sub pages at runtime call this method after the DOM manipulation.
Flowtime.showProgress(Boolean show);
Default false
. Show the default progress when in page mode (the standard content navigation mode).
The default progress is a miniature of the structure placed in the lower left corner with the current page highlighted.
Clicking on a page thumb in the default progress indicator triggers the navigation to that page.
The default value is false, so if you wanto to show the progress you have to call Flowtime.showProgress(true);
and then start the presentation.
Calling this API during the navigation cause the progress to appear or disappear manipulating the DOM so watch out for performance issues.
You are not limited to the default progress indicator. If you want to buil your own progress bar or another indicator with a custom logic you can listen for the navigation events and use the event properties (check out the event section).
Flowtime.fragmentsOnSide(Boolean show);
Default false
. Enable the fragments navigation also on section navigation (left and right arrows) and no only on page navigation.
If true it also set fragmentsOnBack
on true
.
Flowtime.fragmentsOnBack(Boolean show);
Default true
. Shows or hide the fragments when navigating back from a section to a page with fragments inside.
Flowtime.useHistory(Boolean use);
Default true
. Enable or disable the use of HTML History API;
If History API is not used Flowtime.js fallbacks on the hashchange event.
Flowtime.slideInPx(Boolean usePx);
Default false
. If true performs the calculation for the container translation in pixels and not in % values.
Use true if you want to alter the default placement of the sections (i.e. setting vertical-align
different from top
) or in any case the pages does not perfectly fit the viewport (i.e. Safari for Windows with the font-size: 0;
bug).
Flowtime.sectionsSlideToTop(Boolean toTop);
Default true
. Set to false if you want to customize the fragment animation with a more complex behaviour. This methd enables or disables the animation only and not the internal fragments counter logic. See the event section for more info on how manage a custom fragment navigation.
Flowtime.gridNavigation(Boolean useGrid);
Default false
. Just a proxy for Flowtime.sectionsSlideToTop
but with reversed value; if true
sets Flowtime.sectionsSlideToTop
to False
. Implemented just because the more semantic and easy to understand naming.
Flowtime.useOverviewVariant(Boolean use);
Default false
. Uses a built in overview variant which does not show all the pages in a single view but center the current page in the available space scroualtirlling the view when navigating with the arrows.
In Webkit browsers the default overview mode can cause rendering problems if the pages are too much; using the variant you can minimize the problem.
Flowtime.defaultParallaxValues(Number x, [Number y]);
Sets the default values for parallax elements so you doesn’t have to set the values for every single element.
If you only pass the x
value the y
value will be the same.
Flowtime.parallaxInPx(Boolean usePx);
Default false
. By default all the parallax length are computed in % units. If true the lenght expressed in defaultParallaxValues
and in data-parallax
attributes will be computed in pixels.
Flowtime.autoplay(Boolean status, [Number delay], [Boolean autostart], [Boolean skipFragments]);
Sets the status of the autoplay feature.
status
parameter sets the autoplay flag to true
or false
, if true
you can use play()
and pause()
functions to start and stop the autoplay.
delay
sets the time between the page navigation in milliseconds; the default value is 10 seconds (10000 milliseconds).
If autostart
is true
the autoplay feature starts just right after this call (default true
).
skipFragments
allows to go to the next page skipping all the fragments on the page (default false
).
Flowtime.loop(Boolean loop);
Default false
. If true you can loop the navigation both for the sections and for the pages so you can back to the start of the presentation navigating forward from the last page.
javascript
Flowtime.clicker(Boolean clicker);
If passed `true` PageUp and PageDown keys are reconfigured to go to the previous and next page instead to the first and the last page of the section.
This option useful if you use some wireless presenter like the Logitech R400; see issue ([#15](https://github.com/marcolago/flowtime.js/issues/15)) for more information.
```javascript```
Flowtime.setCrossDirection(Boolean cross);
Force the cross direction layout for sections and pages at runtime.
Pass true
to use the optional horizontal layout or pass false
to use the standard vertical layout.
Every related option will be automatically reconfigured.
Related options are keyboard bindings, touchpad and touch gestures and pages coordinates cache.
javascript
Flowtime.setDebouncingDelay(Number value);
Set the debouncing delay time in milliseconds to trigger the event used for the scroll handler.
### Navigation API
```javascript
Flowtime.prevSection([Boolean top]);` and `Flowtime.nextSection([Boolean top]);
Navigate to the previous or the next section.
If the optional top
parameter is true
the section starts at the first page; if the top
parameter is false
the section starts at the page with the same index than the previous section or, if the index does not exist, at the last page available.
Flowtime.prev([Boolean jump]);` and `Flowtime.next([Boolean jump]);
Navigate to the previous or the next page or, if there are fragments, to the previous or next fragment.
If the optional jump
parameter is true
all the fragments will be jumped.
Flowtime.prevFragment();` and `Flowtime.nextFragment();
Navigate to the previous or the next fragment.
Flowtime.gotoHome()
Navigate to the first page of the presentation.
Flowtime.gotoEnd()
Navigate to the last page of the presentation.
Flowtime.gotoTop()
Navigate to the first page of the current section.
Flowtime.gotoBottom()
Navigate to the last page of the current section.
Flowtime.gotoPage(Number sectionIndex, Number pageIndex)
Navigate to the section/page pair.
Flowtime.gotoPage(String sectionId, String pageId)
Navigate to the section/page pair.
Flowtime.gotoPage(HTMLElement target)
Navigate to the page element.
Flowtime.toggleOverview([Boolean back]);
Toggles the overview mode switching between overview and page mode.
If the optional back
paramerter is true
toggling the overview mode when in overview does not navigate to the highlighted page but will returns to the active page; default false
.
Flowtime.play();
Starts the autoplay timer with the configured values (see Flowtime.autoplay()
method) or with the default ones.
Flowtime.pause();
Pauses the autoplay timer without resetting the delay.
Flowtime.stop();
Stops the autoplay timer resetting the delay.
You can disable all the navigation logics together or selectively one by one via some API’s methods.
Flowtime.enableNavigation(Boolean links, Boolean keyboard, Boolean scroll, Boolean touch);
Enables the navigation logic. If you pass true
for a parameter the navigation will be enabled for that input type.
You can also use the shorthand Flowtime.enableNavigation();
instead of Flowtime.enableNavigation(true, true, true, true);
.
Flowtime.disableNavigation(Boolean links, Boolean keyboard, Boolean scroll, Boolean touch);
Disables the navigation logic. If you pass true
for a parameter the navigation will be disabled for that input type.
You can also use the shorthand Flowtime.disableNavigation();
instead of Flowtime.disableNavigation(true, true, true, true);
.
Flowtime.setLinksNavigation(Boolean enable);
Enables (true
) or disables (false
) the links navigation logic. If you disable the links navigation you will not be able to change slide via anchor links.
Flowtime.setKeyboardNavigation(Boolean enable);
Enables (true
) or disables (false
) the keyboard navigation logic. If you disable the links navigation you will not be able to change slide via arrow keys.
Flowtime.setScrollNavigation(Boolean enable);
Enables (true
) or disables (false
) the links navigation logic. If you disable the links navigation you will not be able to change slide via mouse scrollwheel or trackpad scroll gestures.
Flowtime.setTouchNavigation(Boolean enable);
Enables (true
) or disables (false
) the links navigation logic. If you disable the links navigation you will not be able to change slide via touch swipe gestures.
Flowtime.getSection();
Gets a reference to the current section HTML Element.
Flowtime.getPage();
Gets a reference to the current page HTML Element.
Flowtime.getSectionIndex();
Gets the index starting at 0
of the current section.
Flowtime.getPageIndex();
Gets the index starting at 0
of the current page.
Flowtime.getPrevSection();
Gets a reference to the previous section HTML Element.
Flowtime.getNextSection();
Gets a reference to the next section HTML Element.
Flowtime.getPrevPage();
Gets a reference to the previous page HTML Element.
Flowtime.getNextPage();
Gets a reference to the next page HTML Element.
When navigating Flowtime.js dispatches a flowtimenavigation
event useful for create custom behaviours and callbacks.
You can register the event using Flowtime.addEventListener("flowtimenavigation", callback, useCapture);
API.
The callback receive an event
parameter with some custom properties useful to manage the navigation status.
Here it is the list of the properties, supposing the event parameter is named e
:
e.section
The HTMLElement reference to the current section.
e.page
The HTMLElement reference to the current page.
e.sectionIndex
The current section index starting at 0.
e.pageIndex
The current page index starting at 0.
e.pastSectionIndex
The previous visited section index starting at 0.
e.pastPageIndex
The previous visited page index starting at 0.
e.prevSection
Boolean value, if true
there is a previous section.
e.nextSection
Boolean value, if true
there is a next section.
e.prevPage
Boolean value, if true
there is a previous page.
e.nextPage
Boolean value, if true
there is a next page.
e.fragment
If the navigation targets a fragment returns the fragment itself as HTMLElement, otherwise returns undefined
.
e.fragmentIndex
Returns the index of the current fragment starting at 0; otherwise returns -1
.
e.isOverview
Boolean value, true
if the overview mode is on, false
if the overview mode is off.
e.progress
The current page sequential index number starting at 0.
e.total
The last page sequential index.
e.isAutoplay
The status of the autoplay feature.
e.isLoopable
true
if Flowtime.js is configured for looping.
As said before Flowtime.js comes with some default components like the two overview variants and a progress indicator. You can change the way this parts appears editing or overwriting some CSS properties.
In the flowtimenavigation
event handler calculate the progress in % using this formula:
function navigationHandler(e)
{
var value = Math.round(e.progress * 100 / e.total);
console.log('Completion: ' + value + '%');
}
The first page of the first section ever returns 0 as progress value.
progress
and total
values does not consider fragments.
Every animation in Flowtime.js is managed with native CSS3 transitions so if you would customize the fragment animation (and you want to do this on a website, I know) just edit the following CSS classes to override the transitions or set the default value of the opacity
to 1
.
.ft-fragment {
opacity: 0;
-o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
-ms-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
-moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
-webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
}
.ft-fragment.revealed, .ft-fragment.revealed-temp {
opacity: 1;
}
.ft-overview .ft-default-progress {
opacity: 0;
pointer-events: none;
}
To customize the way the thumbnails in overview mode look when idle, hovered and higlighted edit or override this CSS classes:
/* default progress page thumb */
.ft-page-thumb {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1rem;
height: 0.7rem;
margin-right: 1px;
margin-bottom: 1px;
background-color: rgba(0,0,0,0.7);
cursor: pointer;
-o-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}
.ft-page-thumb:hover {
background-color: rgba(255,255,255,0.7);
}
.ft-page-thumb.actual {
background-color: rgba(255,255,255,0.5);
border: 1px solid #ffffff;
}
/* overview mode page highlighting */
.ft-overview .ft-page.actual {
opacity: 0.3;
}
.ft-overview .ft-page.hilite {
opacity: 1;
}
.ft-overview .ft-page:hover {
opacity: 1;
}