Fixed Reveal

To create a fixed reveal effect, use the [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, or % 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 the specified CSS media query is true, the effect will be disabled.

WARNING

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

Showcase

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