# Fixed Reveal

Whenever you'd like to create a fixed reveal effect, use [data-arts-fixed-reveal="true"] attribute for the element.

# Markup

<div 
  data-arts-fixed-reveal="true"
  data-arts-fixed-reveal-from="-20vh"
  data-arts-fixed-reveal-from-opacity="0"
  data-arts-fixed-reveal-disabled-at="max-width: 991px"
  >
  ...
</div>

# Attributes

  • data-arts-fixed-reveal-from=[ -20vh | CSS value] – a valid CSS distance in px, vh, % from which the element will start to animate.
  • data-arts-fixed-reveal-from-opacity=[ 0.0 | float] – initial opacity value. Remove this attribute if you don't need the opacity animation effect.
  • data-arts-fixed-reveal-disabled-at=[ max-width: 991px | CSS media query ] – if test for the specified CSS media query is true, then the effect will be disabled.

WARNING

If the section height is greater than the viewport height, then the effect will be forcefully disabled.

# Showcase

  • 📄 Portfolio pages 013 – 024.
  • 📄 All pages with footer.