Mouse Hover Reveal

Since the mouse pointer is not present on mobile touch devices – this effect launches only on desktops. On mobiles there are simple images inside d-md-none wrapper.

Markup

<div
  class="js-list-hover"
  data-arts-hover-strength="0.3"
  data-arts-hover-scale-texture="1.2"
  data-arts-hover-scale-plane="0.33"
>
  <!-- List Item 1 -->
  <a
    class="js-list-hover__link"
    href="project-details-1-fullscreen-center.html" 
    data-arts-cursor="data-arts-cursor"
    data-arts-cursor-hide-native="true" 
    data-arts-cursor-scale="0.0" 
    data-pjax-link="listHover"
  >
    ...
    <!-- hidden AJAX transition image -->
    <div class="d-md-none">
      <div class="js-transition-img js-list-hover__cover">
        <div class="js-transition-img__transformed-el">
          <img
            class="of-cover"
            data-texture-src="img/assets/projects/project-1.jpg"
            src="#"
            alt=""
            />
        </div>
      </div>
    </div>
    <!-- - hidden AJAX transition image -->
    ...
  </a>
  <!-- - List Item 1 -->
  <!-- List Item 2 -->
  <a
    class="js-list-hover__link"
    href="project-details-1-fullscreen-center.html" 
    data-arts-cursor="data-arts-cursor"
    data-arts-cursor-hide-native="true" 
    data-arts-cursor-scale="0.0" 
    data-pjax-link="listHover"
  >
    ...
    <!-- hidden AJAX transition image -->
    <div class="d-md-none">
      <div class="js-transition-img js-list-hover__cover">
        <div class="js-transition-img__transformed-el">
          <img
            class="of-cover"
            data-texture-src="img/assets/projects/project-1.jpg"
            src="#"
            alt=""
            />
        </div>
      </div>
    </div>
    <!-- - hidden AJAX transition image -->
    ...
  </a>
  <!-- - List Item 2 -->
  ...
</div>
<!-- fixed canvas -->
<canvas
  class="js-list-hover__canvas"
  data-arts-scroll-fixed="data-arts-scroll-fixed"
></canvas>
<!-- - fixed canvas -->

Main container attributes

• js-list-hover class – required for the effect
• data-arts-hover-strength – defines the distortion offset amplitude that will be applied to the textures on mouse movement
• data-arts-hover-scale-texture - defines the maxium texture scaling
• data-arts-hover-scale-plane – defines the planes textures scaling against the browser viewport height.