Question

我一直在使用一些不同的视差插件以及一些家庭建造的视差代码来处理一些视频。我的问题是，我所看到的所有parallaxing代码都按像素调整背景位置y。我试图开始将我的背景图像设置为覆盖，并将初始背景位置设置为中心或“50％50％”。当视差代码启动时，我相信它假设它是从0px的背景位置y开始。

我想从背景图像的当前位置开始我的视差。当该位置为50％时，这很困难。我有什么想法可以做到这一点？这是一些示例代码。希望它有意义。

使用Ian Lunn的插件： http://www.ianlunn.co.uk/plugins/jquery-parallax/

    section {
        position: relative;
        width: 1900px;
        height: 834px;
        overflow: hidden;
        background: 50% 50% no-repeat fixed;
        background-size: cover;
        background-image: url("img/image_1.jpg");
     }

jquery的：

$('section').parallax("50%", .6);

该插件根据容器高度和滚动位置进行一些计算，并使用速度计算新的y位置，只是它没有考虑现有的y位置（首先），但这可能很容易在那里添加。如果没有确切的Y位置，我只是不知道该怎么做。结果是当你开始滚动时有一个跳跃，因为50％的原始背景位置y被覆盖，比如说-10px。

有意义吗？不幸的是，我没有一个可行的例子来展示。感谢

Answer 1

我修改了var的计算，通过添加差异（而不是top:0 top:50%）来控制背景位置。首先，您需要获得image height：

var path = $('#id').css('background-image').replace('url', '').replace('(', '').replace(')', ''); 

var tempImg = '<img id='tempImg' src='+path+' />';

$('html').append(tempImg);
$('#tempImg').hide(); //hide image
var height = $('#tempImg').height(); //get height
$('#tempImg').remove(); //remove from DOM

然后在px：

中获取容器高度和50％的位置

var contheight = $('#id').height();
var start = (-(height - contheight) / 2);

然后将其添加到说明位置。我的是：

var yPos = start + ( $(window).scrollTop()- $('#id').offset().top) * (1-ratio);

或使用其他more flexible parallax script。

jquery视差效应从现有的50％background-position-y开始

1 个答案: