jQuery-视差-正确更新背景位置 [英] jQuery - parallax - update background position correctly

问题描述

这是此问题的后续问题.

1. 我正在尝试创建视差滚动效果.

视差容器的实现方式如下:

< 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:

1. 将视差容器滚动到视图中后开始效果:有效.
2. 离开视图后立即停止效果:有效.
3. 仅将背景位置进入视图后移动其距离.相对于页面顶部的距离没有滚动.

1. Start the effect once a parallax-container is scrolled into view: works.
2. Stop the effect once it has left the view: works.
3. 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?

一些进一步的澄清:

1. 任何页面上都可以有多个视差容器.

1. 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屋！