Parallax mountain

  <div class="background block"><span>Profidev</span></div>

@import url("https://fonts.googleapis.com/css?family=Montserrat:900");
html, body {
  margin: 0;
  padding: 0;
  height: 200vh;
  overflow-x: hidden;
  font-family: Montserrat, sans-serif;
}
span {
  font-size: 18rem;
  margin-top: 230px;
}
.background {
  background-image: url(https://images.unsplash.com/photo-1536264911542-668b0180d5a1?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a9a32743f06349efc39aeae90f047e9f);
  background-size: cover;
  background-position: 50% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  height: 200vh;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.background:before {
  content: "";
  background-image: inherit;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
}

h1 {
  position: absolute;
  text-align: center;
  width: 100%;
  color: #fefefe;
}

const background = document.querySelector('.background');

document.addEventListener('scroll', () => {
  const scrollY = window.scrollY;

  if (scrollY !== 0) {
    background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
  } else {
    background.style.backgroundPosition = '';
  }
});