CSS

4D States (.past, .present and .future classes)

The .future class is added to all Step Elements that haven't been visited yet.

Example:

.future {
  display: none;
}

The .present class is added to the Step Element that is currently at the center of the camera. This is useful to create animations inside the step once the camera navigates to it.

Example:

.present .rotating {
  transform: rotate(-10deg);
  transition-delay: 0.25s;
}

The .past class is added to all Step Elements that have been visited at least once.

Example:

.past {
  display: none;
}

Current Active Step (.active class)

The .active class is added to the Step Element that is currently visible at the center of the camera.

Example:

.step {
  opacity: 0.3;
  transition: opacity 1s;
}
.step.active {
  opacity: 1
}

At the same time, the impress-on-* class is added to the body element, the class name represents the active Step Element id. This allows for custom global styling, since you can't match a CSS class backwards from the active .impress-on-overview .step { opacity: 1; cursor: pointer; } .impress-on-step-1, .impress-on-step-2, .impress-on-step-3 { background: LightBlue; }

Progressive Enhancement (.impress-not-supported class)

The .impress-not-supported class is added to the body element if the browser doesn't support the features required by impress.js to work, it is useful to apply some fallback styles in the CSS.

It's not necessary to add it manually on the body element. If the script detects that the browser lacks important features it will add this class.

It is recommended to add the class manually to the body element though, because that means that users without JavaScript will also get fallback styles. When impress.js script detects that the browser supports all required features, the .impress-not-support class will be removed from the body element.

Example:

.impress-not-supported .step {
  display: inline-block;
}