<div class="js-cover-image cover-image">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3409/seaside.jpeg" alt="The Sea" />
</div>

<div class="wrapper">
  <div class="article">
    <h1>Tornis is rad</h1>
    
    <a href="https://tornis.robbowen.digital/" target="_blank" rel="noopener noreferrer">Learn more about Tornis.</a>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloremque voluptatem totam fugit dolores optio, odit quod placeat eaque eius quam sapiente dignissimos accusantium. Mollitia impedit iusto nobis dolor atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corrupti, nihil possimus nemo quo, mollitia dolore officiis consectetur esse a voluptatem harum quos vero perferendis, suscipit nostrum itaque doloremque corporis!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat a sunt reprehenderit. Neque est nemo exercitationem? Perferendis velit minus praesentium, culpa labore exercitationem cumque. Quaerat maxime porro hic optio?
    Omnis fugiat nam ad quo, quae dignissimos cupiditate beatae, illum quasi nemo minima similique doloremque aperiam amet provident! Aperiam quam suscipit sapiente optio nesciunt, sequi porro consequuntur inventore quaerat quisquam.
    Fugiat dignissimos nobis modi, ab obcaecati facilis nesciunt eum temporibus aut fuga, harum consectetur odit culpa nemo illum, tempora voluptas. Similique, minima! Nesciunt deleniti vitae, facilis illum suscipit vero praesentium?</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, repudiandae! Aliquid numquam provident similique architecto eum ipsa, eveniet maxime repellat quos est earum laboriosam, iste nisi tenetur. At, earum molestias!
    Alias neque, nisi corporis voluptate inventore modi doloribus ab quia ratione saepe corrupti harum fugiat incidunt est cupiditate! Nostrum, nihil sint! Nisi quisquam sapiente cum dolor dolore quasi ratione quo?
    Debitis voluptatum eaque rem qui culpa soluta consequatur ullam omnis, iste ea cum, quae molestiae, beatae blanditiis incidunt voluptatibus. Ut quisquam accusamus accusantium earum dolorem ea quasi deleniti quidem commodi!
    Consectetur consequatur corrupti corporis mollitia nihil officia natus cupiditate, deserunt, nostrum nam eum iusto veniam amet optio doloremque omnis eos laborum neque sunt minima error. Similique commodi accusamus deleniti velit.
    Minus alias inventore voluptates consequuntur sapiente perferendis assumenda tempora voluptas voluptatem doloribus consectetur eos quo aut, distinctio non a pariatur dolorum! Similique, sit nulla doloremque rem a tempore omnis sapiente!
    Sed voluptate voluptatum distinctio omnis placeat debitis vero magni, ad eligendi, magnam non modi illo suscipit numquam et alias, impedit voluptatibus delectus libero accusamus sit. Harum, officia molestiae? Fugit, quos.
    Veniam, nihil! Dolorem commodi, aut mollitia accusamus alias debitis corporis, modi sed et voluptatum delectus reprehenderit iusto asperiores nemo error ratione, illum laborum eligendi ab? Molestias laboriosam nihil vero quisquam?
    Incidunt eius temporibus voluptatum. Quibusdam nesciunt a iure minus alias asperiores nam sed! Dolore, quibusdam, consequatur alias sequi at natus dolorem iure atque nostrum ullam error quo qui perspiciatis facilis!
    Quasi a voluptatum ipsa culpa voluptate cum accusamus sunt inventore, velit repellat vel consectetur libero est tempore molestiae fugit. Numquam provident cum accusantium voluptate iure quae. Quisquam molestiae placeat nisi.
    Impedit sequi aliquam sit hic culpa doloremque nostrum soluta minus, suscipit tempora dignissimos odio amet accusamus, tenetur eligendi odit dolore fugit necessitatibus dicta ab? Dignissimos voluptate fugiat iusto laboriosam aut!
    Ab, minima velit molestiae laborum fuga voluptate architecto obcaecati eos quod quo praesentium omnis itaque! Similique dolor inventore nam accusamus consequuntur repellat, molestias, placeat necessitatibus alias quae distinctio! Quasi, est.
    Suscipit dolore asperiores quos, aliquid fuga perspiciatis odio autem at velit eligendi. Iste libero beatae ad illum explicabo voluptas, recusandae dolorum? Minima, ullam. Sapiente explicabo ad, quo dolorem odio commodi?
    Illo laudantium corporis perferendis corrupti inventore atque dicta qui, sunt minus cupiditate, et fugit tempora repellendus illum vel dolores recusandae quas fuga commodi sequi aut. Incidunt eligendi nemo facere vel.
    Ipsa delectus dignissimos culpa ex sed incidunt quibusdam? Sint, necessitatibus! Sint ratione doloremque deserunt aut temporibus aperiam recusandae cumque nisi illo explicabo hic consequatur totam, fugiat magnam eos eius eveniet.
    Dignissimos repudiandae impedit odit ex explicabo. Quibusdam esse reiciendis nemo, omnis dicta perspiciatis in sequi rem ad hic aliquam fuga necessitatibus a ipsam et possimus nam laudantium? Ad, libero recusandae?
    Modi quae iste ratione rem necessitatibus accusantium eum ducimus, quasi commodi distinctio quidem veniam minus nesciunt. Cupiditate quo accusantium inventore est rem, perferendis aut, facere reiciendis consequatur placeat ad? Ratione!
    Veritatis neque officiis rem fuga corrupti quod eveniet rerum quisquam animi fugit voluptatum, maiores quos autem sint minus laborum ut, deserunt similique consequatur facere at earum. Sed neque laborum ipsum?
    Veniam vel expedita at, reprehenderit consequatur eius! Magnam, facilis provident? Perspiciatis hic rerum sunt tempora natus dignissimos quis magnam! Cum temporibus, tenetur quo sequi amet quaerat natus voluptate sunt quas!
    Maiores assumenda quaerat suscipit deleniti esse unde quia at voluptate autem impedit, inventore, neque velit? Dolorum, voluptatem magnam? Quibusdam eveniet consequuntur commodi eaque omnis ad laboriosam eius praesentium! In, nostrum.
    Ipsam iure tempore harum, deserunt assumenda sed fugiat totam neque repudiandae nulla magnam quam adipisci eius iste. Incidunt recusandae omnis facilis dolores voluptatum. In sed mollitia sequi, aliquam quibusdam reiciendis!</p>
  </div>
</div>

.wrapper {
  position: relative;
  z-index: 1;
  background-color: white;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-image {
  position: sticky;
  top: 0;
  height: 240px;
  overflow: hidden;
  filter: blur(calc(var(--scrollY) * 10px));
  transform: translate(0, calc(var(--scrollY) * -30px));
}

.article {
  max-width: 65ch;
  margin: 0 auto;
  padding: 40px 25px;
}

h1 {
  margin-top: 0;
}

const { watchViewport } = tornis
const coverImage = document.querySelector('.js-cover-image')

const updateValues = ({ scroll }) => {
  if (scroll.changed) {
      let scrollOffset = scroll.top / coverImage.clientHeight

      scrollOffset = scrollOffset < 0 ? 0 : scrollOffset
      scrollOffset = scrollOffset > 1 ? 1 : scrollOffset
      document.body.style.setProperty('--scrollY', scrollOffset)
    }
}

function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(() => {
  watchViewport(updateValues)
})