Применение эффекта параллакса к тексту

Я применил эффект параллакса для фона, но я также хочу применить подобный эффект к тексту, чтобы он прокручивался независимо от остальных, например, быстрее, чем фон и сама страница. Вот код, который у меня есть:

 $(document).ready(function(){

var parall = document.querySelectorAll('.parall'),
    speed = -0.4;

window.onscroll = function(){
  [].slice.call(parall).forEach(function(el,i){

    var windowYOffsets = window.pageYOffset,
        elBackgrounPos = '50%' + (windowYOffsets * speed) + 'px';

    el.style.backgroundPosition = elBackgrounPos;

  });
};

});
.parall {
  background: url("https://www.tucado.com/images/marketing-solutions-bg.jpg") center top no-repeat;
  height: 275px;
  top: 0px;
  background-attachment: fixed !important;
}

.parall h1 {
  text-align: center;
  color: white;
  padding-top: 100px;
  font-size: 100px;
}

body {
  height: 1000px;
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parall">
  <h1 class="parallsec">TEXT</h1>
</div>

Я хочу, чтобы h1 (.parallsec) прокручивался независимо, но код jquery у меня работает только с фоном.

jsfiddle здесь

Спасибо за ваше время и помощь

0 ответов

Другие вопросы по тегам