Fade Out First Index Page

Look Demo

Fade out the first page of an index when scrolling down. This plugin uses code injection and works with Squarespace 7.0 (Brine template family).

How To Install

From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Footer Code Injection box.

<script>  
  var sectionName = document.querySelector(".Index-page:first-child");
  function getHeight() {
    return sectionName.clientHeight;
  }
  var gotHeight = getHeight();
  window.onscroll = function() {
    sectionName.style.opacity = 1 - (window.pageYOffset / (gotHeight - 125));
  };
</script>

Customize

You do not need to change any of the values or properties.

Please keep in mind that this targets only the first page within an index. It does not target general pages or banners.

License

This plugin comes with an Unlimited Use License. View License Terms