我写了一个脚本,改变BG的位置,当你向下滚动,它的工作良好的左和右位置,但我似乎无法达到的语法,将允许我视差背景位置的顶部或底部-而不是右和左。
下面是我的代码:function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position',(scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
css属性background-position
有两个值,#horizontal #vertical。参见:http://www.w3.org/wiki/CSS/Properties/background-position
考虑如下内容:
function parallax(){
var scrolledTop = $(window).scrollTop();
var scrolledLeft = $(window).scrollLeft();
$('section.intro .custombg').css('background-position',(scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
而且,这似乎会在每次调用视差方法时添加滚动事件。要纠正这个错误,您可以尝试:
function parallax(top, left) {
$('section.intro .custombg').css('background-position',(left * -0.2) + 'px ' + (top * -0.2) + 'px');}
} // end function
$(document).ready(function() {
$(window).scroll(function(e) {
parallax($(window).scrollTop(), $(window).scrollLeft()); // call the method
});
});
这都是错误的,每次使用$(window).scroll()时都要设置一个事件处理程序。你只需要做一次。试试这个。
var scrolledTop,
scrolledLeft,
background_position,
$custom_bg;
function parallax(){
scrolledTop = window.scrollY,
scrolledLeft = window.scrollX,
background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');
console.log('background_position', background_position);
$custom_bg.css('background-position', background_position);
}
$(function() {
$custom_bg = $('section.intro .custombg');
$(window).on('scroll', parallax);
});
try
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position','center ' + (scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
如果你想做更多的视差和改变其他属性,我强烈推荐Skrollr库(https://github.com/Prinzhorn/skrollr)。
当你滚动时,你几乎可以改变任何CSS属性,给你更多的选择,而不仅仅是背景位置或其他东西。它可能比您期望的要多,但它非常轻量级,并且还支持移动设备(如果没有一个开发良好的库,您可能会遇到麻烦)。希望能有所帮助!
例如,如果你想移动背景图像的背景位置,你可以简单地做下面的操作:初始化skrollr(在本例中没有选项,但可以设置一些参数)
<script type="text/javascript">
var s = skrollr.init();
</script>
然后,您可以使用简单的数据标记来告诉Skrollr哪些元素需要花哨,哪些不需要。在您的情况下,您可以模糊地执行如下操作:
(任何你想使用视差的元素)
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
WOOOT
</div>
但是,您可以将background-color替换为background-position
<div data-0="background-position: 0px 0px" data-700="background-position: 0px 100px"> </div>
或
<div data-0="background-position: top center" data-700="background-position: bottom center"> </div>
您可以使用任何接受的CSS background-position
关键字。
有用:https://github.com/Prinzhorn/skrollr