我已经为背景应用了视差效果,但我也希望对文本应用类似的效果,因此它会独立滚动到其余部分,因此例如比背景和页面本身更快。这是我的代码:
$(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代码只适用于后台。
感谢您的时间和帮助