Scale hero section on scroll

index.html

<div class="hero">
  <h1>Get scrollin'</h1>
  <div class="down">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
  </div>
</div>
<div class="content">💙</div>

scale-hero-section-on-scroll.markdown

Scale hero section on scroll

A Pen by Traf on CodePen.

License.

script.js

// Built by @traf
// https://tr.af

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $(".hero").css({
    transform: 'translate3d(0, +'+(scroll/100)+'%, 0) scale('+(100 - scroll/100)/100+')'
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.css

@import url('https://rsms.me/inter/inter.css');

html,
body {
  background: #000;
}

body {
  font-family: 'Inter', sans-serif;
  letter-spacing: -1px;
  text-align: center;
  font-size: 20px;
  height: 100vh;
  color: #fff;
  margin: 0;
}

.hero {
  background: url('https://images.unsplash.com/photo-1550353127-b0da3aeaa0ca') no-repeat center center;
  justify-content: center;
  background-size: cover;
  flex-direction: column;
  border-radius: 10px;
  align-items: center;
  position: fixed;
  display: flex;
  height: 100vh;
  width: 100%;
}

.down {
  text-align: center;
  position: absolute;
  opacity: 0.6;
  height: 40px;
  width: 100%;
  bottom: 0;
}

.content {
  box-shadow: 0 0 100px rgba(0,0,0,0.4);
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 40px;
  position: relative;
  background: #000;
  height: 2000px;
  display: flex;
  top: 100vh;
}