CodePen Embed - Pixel Art

 <!doctype html>
<html>
  <head>
    <title>Kirby Super star Ultra</title>
    
  </head>
  <body>
    <header>
      
      <a href="#" class="logo">Pixel Arts</a>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
    <section >
      
      
        
      <img src="https://opengameart.org/sites/default/files/pixel_moon.png" alt="pixel moon" id="moon" >
      
        
      <h2 id="text">Arctic Monlight</h2>
      <a href="#" id="btn">Explore</a>
      <img src="https://opengameart.org/sites/default/files/Mountains%20Background.png" alt="pixel mountains" id="mountains_front">
      
      
    </section>
    <div class="sec" id="sec">
      <h2>Animacion Parallax Scrolling</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci cumque, rem consequuntur officia ab neque vero fugit soluta quaerat sequi quos asperiores fuga dolorum accusamus aliquam laboriosam officiis placeat! Voluptatum!. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint mollitia beatae fugiat minima nam reprehenderit similique vitae accusamus, sit corrupti dolorem a numquam maiores odit in iste quibusdam neque ipsa?. <br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit consequatur aliquid voluptas eveniet eaque ducimus dolorem ut aliquam ipsa, placeat recusandae a asperiores veritatis possimus itaque laudantium dolores debitis similique!.<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, reprehenderit sapiente earum cupiditate voluptas eum ab. Ducimus, odit eos provident saepe excepturi earum dolorem nemo possimus impedit adipisci molestias quod?<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, reprehenderit sapiente earum cupiditate voluptas eum ab. Ducimus, odit eos provident saepe excepturi earum dolorem nemo possimus impedit adipisci molestias quod? <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, reprehenderit sapiente earum cupiditate voluptas eum ab. Ducimus, odit eos provident saepe excepturi earum dolorem nemo possimus impedit adipisci molestias quod?<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, reprehenderit sapiente earum cupiditate voluptas eum ab. Ducimus, odit eos provident saepe excepturi earum dolorem nemo possimus impedit adipisci molestias quod?</p>
    </div>
  </body>
</html>

@import url('htttps://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

*{
  margin:0;
  padding: 0 ;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  scroll-behavior: smooth;
}

body{
  min-height: 100vh; 
  overflow-x: hidden;
  background: linear-gradient(#000000,#0A1172);
  
}

header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100000;
}

header .logo{
  color: #fff;
  font-weight: 700;
  text-decoration:none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

header ul{
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li{
  list-style: none;
  margin-left 20px;
}

header ul li a{
  text-decoration:none;
  padding:6px 15px;
  color: #fff;
  border-radius: 20px;
}

header ul li a:hover, header ul li a.active{
  background: #fff;
  color: black;
}

section{
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display:flex;
  justify-content: center;
  align-items: center;
}

section::before{
  content: '';
  position:absolute;
  bottom: 0;
  width: 100%;
  height:100px;
  background: linear-gradient(to top, #1261A0,transparent);
  z-index: 9999;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
  pointer-events:none;
}

section img#moon{
  mix-blend-mode: screen;
  width:200px;
  height:auto;
  transform: translateX(55em);
  top:0;
  
}
section img#mountains_front{

  z-index:10;
 
}

#text{
  position: absolute;
  color: #fff;
  white-space: nowrap;
  font-size: 7.5vw;

  z-index:9;
  transform: translateY(-250px);
}

#btn{
  text-decoration: none;
  display: inline-block;
  padding: 8px 30px;
  border-radius:40px;
  background: #fff;
  color: #2b1055;
  font-size: 1.5em;
  z-index: 11;
  transform: translateY(100px);
}
.sec {
  position: relative;
  padding: 100px;
  background: #1261A0;
}

.sec h2{
  font-size:3.5em;
  margin-bottom: 10px;
  color: #fff;
  
}

.sec p{
  font-size:1.2em;
  color:#fff;
}

let moon = document.getElementById('moon')
let mountains = document.getElementById('mountains_front')
let text = document.getElementById('text')
let btn = document.getElementById('btn')

window.addEventListener('scroll', function(){
  let value = window.scrollY;
  moon.style.top = value * 1.05 + 'px';
  text.style.marginRight= value* 4 +'px';
  text.style.marginTop= value* 1.5 +'px';
  btn.style.marginTop= value* 0.5 +'px';
  
})

This Pen is owned by bryanmax9 on CodePen.

See more by @bryanmax9 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.