Применение эффекта параллакса к тексту
Я применил эффект параллакса для фона, но я также хочу применить подобный эффект к тексту, чтобы он прокручивался независимо от остальных, например, быстрее, чем фон и сама страница. Вот код, который у меня есть:
$(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 у меня работает только с фоном.
Спасибо за ваше время и помощь