Heading Reveal FX

Applies to certain elements in the webpage:

  • Only elements inside the 'main' element
  • H1s that don't have a modifier class to H3 or smaller
  • H2s that don't have a modifier class to H3 or smaller
  • Anything with a '.h1' or '.h2' modifier class
  • Anything with a '.heading-fx-item' modifier class

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

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

Heading FX with 'data-heading-fx="line-reveal-up"':

This is an H1 heading with a class of 'display-2'

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

This is an H1 heading

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

This is an H2 heading

Nullam leo elit, sodales vel purus et, maximus aliquam dolor. Integer laoreet sapien ante, ut porta dui aliquam id. Phasellus egestas quis magna ut ullamcorper.

Heading FX with 'data-heading-fx="word-reveal-up"':

This is an H1 heading with a class of 'display-2'

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

This is an H1 heading

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

This is an H2 heading

Nullam leo elit, sodales vel purus et, maximus aliquam dolor. Integer laoreet sapien ante, ut porta dui aliquam id. Phasellus egestas quis magna ut ullamcorper.

Heading FX with 'data-heading-fx="char-writer"':

This is an H1 heading with a class of 'display-2'

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

This is an H1 heading

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

This is an H2 heading

Nullam leo elit, sodales vel purus et, maximus aliquam dolor. Integer laoreet sapien ante, ut porta dui aliquam id. Phasellus egestas quis magna ut ullamcorper.