jQuery-视差-正确更新背景位置 [英] jQuery - parallax - update background position correctly
问题描述
这是此问题的后续问题.
-
我正在尝试创建视差滚动效果.
视差容器的实现方式如下:
< div class ="parallax slide-1">< /div>
< div class="parallax slide-1" >< /div >
当容器滚动到视图中时,视差效果成功启动;当容器离开视图时,视差效果成功终止.
The parallax-effect successfully starts, when a container is scrolled into view and stops, when it has left the view.
不幸的是,当我在页面上更下方放置视差容器时,效果始于背景位置在错误的位置.
Unfortunately when I place a parallax-container further down on a page the effect starts with the backgroundposition in the wrong place.
我了解为什么会出现此问题,但不确定如何解决.
I understand why this problem shows up, but am not sure how to solve it.
我基本上需要的是这样:
What I need is basically this:
- 将视差容器滚动到视图中后开始效果:有效.
- 离开视图后立即停止效果:有效.
- 仅将背景位置进入视图后移动其距离.相对于页面顶部的距离没有滚动.
- Start the effect once a parallax-container is scrolled into view: works.
- Stop the effect once it has left the view: works.
- Only move the backgroundposition by the distance scrolled since it has entered the view. Not the distance scrolled relative to the top of the page.
对于视差容器,在页面下方:
For the parallax-container further down the page:
您可以看到图像的边缘.我正在寻找解决方案.
You can see the edges of the images. I'm trying to find a solution for that.
到目前为止,我的尝试基于这种思想,即仅获取一次视差容器到页面顶部的距离(不要每次滚动都更新它)并在计算中实现它.
So far my attempts where based around the idea to get the distance of a parallax-container to the top of the page only once (dont update it with each scroll) and implement it in the calculations.
但是我似乎无法使其正常工作.我想念什么吗?
But I cant seem to get it to work properly. Am I missing something?
一些进一步的澄清:
-
任何页面上都可以有多个视差容器.
There can be multiple parallax-container on any page.
每个人都可以设置自己的背景图片. (在CSS中)
Each can have their own background image set. (in the css)
我不知道一个页面上有多少个视差容器.
I dont know how many parallax-container will be on a page.
我不知道它们的放置位置.
I dont know where they are placed.
只有那些可见的移动.
Only those that are visible move.
代码
仅相关部分:
Code
Only the relevant parts:
$(window).scroll(function(){ // Bind window scroll event
$( ".parallax" ).each(function() {
if( $( this ).is_on_screen() ) { // Check if element is visible on screen after DOM loaded
// ANIMATE PARALLAX EFFECT
// If Parallax Element is scrolled into view do...
// Variables
var speed = 2.5;
var calc = (-window.pageXOffset / speed) + "px " + (-window.pageYOffset / speed) + "px";
var container = $( this );
// Function
container.css({backgroundPosition: calc});
} else {
// ...otherwise do nothing
}
});
});
推荐答案
我实际上是要对旧帖子进行编辑,但是由于您创建了一个新帖子,因此我将其添加到此处.
I was actually going to put an edit on my old post, but since you made a new one, I'll add it here.
看到您想对视差进行细化(即,可以看到2,但是1仅移动了10px和30px),因此您可以将速度选项存储在对象中,这样,速度运动将变得独立.这样:
Seeing as you want to get granular with your parallax (ie. 2 are in view, but 1 has only moved 10px vs 30px), what you could do is store the speed option inside of your object, so that way, the speed movement will become independant. As so:
$(window).scroll(function(){ // Bind window scroll event
$( ".parallax" ).each(function() {
if( $( this ).is_on_screen() ) { // Check if element is visible on screen after DOM loaded
// ANIMATE PARALLAX EFFECT
// If Parallax Element is scrolled into view do...
// set a starting speed for each this:
// $(this).speed = 2.5;
//
// Variables
var calc = (-window.pageXOffset / $(this).speed) + "px " + (-window.pageYOffset / $(this).speed) + "px";
var container = $( this );
// Function
container.css({backgroundPosition: calc});
} else {
// ...otherwise do nothing
}
});
});
如注释中所述,要设置速度,请尝试以下操作:
As discussed in the comments, to set the speed, try the following:
$(document).ready(function () {
$.fn.is_on_screen = function () {
//..do your on screen stuff
};
$( ".parallax" ).each(function() {
$(this).speed = 2.5;
};
});
这篇关于jQuery-视差-正确更新背景位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!