将视差效果应用于文本

时间:2018-01-18 15:25:32

标签: jquery parallax

我已经为背景应用了视差效果,但我也希望对文本应用类似的效果,因此它会独立滚动到其余部分,因此例如比背景和页面本身更快。这是我的代码:

 $(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 here

感谢您的时间和帮助

0 个答案:

没有答案