Content Reveal FX

Applies to certain elements in the webpage:

  • Only elements inside the 'main' element
  • Elements with '.content-block' class

Uses 'content-fx' modifier class on the 'body' element, together with a 'data-content-fx' attribute to specify the reveal style.

Respects 'prefers-reduced-motion: reduce' by removing the parent class from the DOM.

Content FX with 'data-content-fx="fade"':

Promo panel area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

16:9 image

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum nec mauris ornare suscipit.

Panel CTA

16:9 image

This is another panel title

Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla.

Panel CTA

16:9 image

The third title

Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

Panel CTA

image title goes here

Split layout : Image right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

CTA button

Content FX with 'data-content-fx="fade-slide-up"':

Promo panel area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

16:9 image

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum nec mauris ornare suscipit.

Panel CTA

16:9 image

This is another panel title

Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla.

Panel CTA

16:9 image

The third title

Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

Panel CTA

image title goes here

Split layout : Image right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

CTA button

Content FX with 'data-content-fx="fade-scale-slide-up"':

Promo panel area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

16:9 image

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum nec mauris ornare suscipit.

Panel CTA

16:9 image

This is another panel title

Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla.

Panel CTA

16:9 image

The third title

Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

Panel CTA

image title goes here

Split layout : Image right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

CTA button