Pen ID
Unlock Campus Themeforest adv


next: right next: up next: down next: scale-left next: scale-up next: scale-down next: fold-left next: fold-right next: fold-up next: fold-down next: fade next: scale next: none next: Transitions guidlines page

How it's done?

Transition guidelines:

  • Use transition attribute on page element to define incoming transition type.
  • Types of transitions:
    'left' (default), 'right', 'up', 'down',
    'scale-left', 'scale-right', 'scale-up', 'scale-down',
    'fold-left', 'fold-right', 'fold-up', 'fold-down',
    'fade', 'scale', 'none'
  • Example:
    <img src="photo.jpg" transition="fold-down"/>

Also, use configuration object to:

  • Define default project page transition type
  • Define default thumbnails page transition type
  • Define transition type between project and thumbnails section
Used event css helper class ".on-photo-fit-cover" 
to style elements when image fit is in cover mode. 
Rule excluded for last two pages: 16 & 17
Documentation: http://docs.foliodot.com/selectors#event
.on-photo-fit-cover:not(.on-page-16):not(.on-page-17) .project .page-caption,
.on-photo-fit-cover:not(.on-page-16):not(.on-page-17) .project .ui-button-next,
.on-photo-fit-cover:not(.on-page-16):not(.on-page-17) .project .ui-button-prev,
.on-photo-fit-cover:not(.on-page-16):not(.on-page-17) .project .ui-pagination {
  color: #fff;
 - Documentaion: http://docs.foliodot.com/options
 - This demo uses foliodot javascript which is subject 
   to the terms at https://foliodot.com/legal/eula

  project: {
    views : 'normal cover',
    transition: 'fade' //transition attribute on page element have priority
  thumbnails: {
    transition: 'up'
  content: {
    transition: 'fold-up'
Host Instantly Drag and Drop Website Builder



Out of the box page & section transitions with Foliodot (https://foliodot.com/) website starter template.
Mon, 11/27/2017 - 22:09

Related Codes

Pen ID
Pen ID
Pen ID