Эффект эффекта параллакса фонового центра наверх

Question

Я использую приведенный ниже код, чтобы обеспечить простой эффект параллакса на фоновое изображение. В идеале в css я хочу, чтобы изображение было сосредоточено (а не сверху). Однако, как только я начинаю прокручивать сценарий, он перескакивает вверх и начинает эффект. Я не могу разобраться, если можно изменить jquery, чтобы он начинался с центрированного изображения? может ли кто-нибудь помочь?

<div id="para" style="background-image: url('blah')" data-speed="8" data-type="background"> 
</div> 

#para { 
    height:500px; 
    float:left; 
    width:100%; 
    background-size:100%; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachemnt: fixed; 
} 

//Parallax 
$(document).ready(function() { 
    if ($(window).width() > 1025) { 
     // Cache the Window object 
     $window = $(window); 
     $('div[data-type="background"]').each(function() { 
      var $bgobj = $(this); 
      $(window).scroll(function() { 
       var yPos = -($window.scrollTop()/$bgobj.data('speed')); 
       var coords = '50% ' + yPos + 'px'; 
       $bgobj.css({ 
        backgroundPosition: coords 
       }); 
      }); 
     }); 
    } 
}); 

Answer 1

Вы не можете указать фоновое положение в процентах и ​​в пикселях. Это должно быть одно или другое. Используйте процентные единицы, а затем превратите свой $ window.scrollTop() в проценты. Поэтому умножьте его на 100, а затем разделите на $ window.height().

//Parallax 
$(document).ready(function() { 

    if ($(window).width() > 1025) { 
     // Cache the Window object 
     $window = $(window); 
     $('div[data-type="background"]').each(function() { 
      var $bgobj = $(this); 
      $(window).scroll(function() { 
       var yPos = 50 - ($window.scrollTop() * 100/$window.height()/$bgobj.data('speed')); 
       var coords = '50% ' + yPos + "%"; 
       $bgobj.css({ 
        backgroundPosition: coords 
       }); 
      }); 
     }); 
    } 
}); 

Ваш атрибут скорости передачи данных также должен быть ниже. Я нашел 0.5 хорошо.

<div id="para" style="background-image: url('blah')" data-speed="0.5" data-type="background">