从现有的50％背景位置y开始的jquery视差效果

Question

I've been working on some parallaxing using a few different parallax plugins as well as some home built parallax code. My problems is that all the parallaxing code I've looked at adjusts the background-position-y by pixels. I'm trying to start off with my background image set to cover and an initial background-position as center center or "50% 50%". When the parallax code kicks in, I believe it's assuming it's starting from a background-position-y of 0px.

I would like to start my parallax from the current position of the background-image. This is difficult when that position is 50%. Any ideas how I might be able to do this? Here's some example code. Hope it makes sense.

using Ian Lunn's plugin: 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);

The plugin makes some calculations based on the container height and scroll position and uses the speed to calculate a new y position, only it doesn't take into account the existing y position (first of all), but that could easily be added in there. I just don't know how to do it if there is no exact Y position. The result is that there's a jump when you start scrolling as the original background-position-y of 50% is overridden with, say -10px.

make sense? Unfortunately, I don't have a working example to show. thanks

Answer 1

I amended calculation of var which controls background position by adding the difference (instead of top:0 top:50% ). First you need to get the 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

Then get the container height and the position of 50% in px:

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

Then add this to the stating position. Mine was:

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

Or use some other more flexible parallax script .