вертикальный эффект

[artefakt777]

Нужно реализовать, чтобы при прокрутке скролинга страницы, ракета двигалась вверх. Я так понимаю это параллакс эффект. Как его реализовать?

 

[ZOLK]

Нужно реализовать, чтобы при прокрутке скролинга страницы, ракета двигалась вверх. Я так понимаю это параллакс эффект. Как его реализовать?

Вместо h1 запили ракету, в id title запили фон. П.с это приблизительно, просто почистил от лишнего чужой код, с позиционированием думаю разберешься, если нет, пиши

<div id="title" class="slide header">
  <h1>Pure CSS Parallax</h1>
</div>

===CSS===

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin:0;
  padding:0;
   perspective: 1px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito;
}

h1 {
  font-size: 250%
}

.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
   transform-style: inherit;
}

.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}

.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover; 
}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}

#title {
  background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
  background-attachment: fixed; 
}