Я установил свойство scaleTop для окна 1920x1080, и оно хорошо работает при анимации прокрутки. Однако, когда я изменяю размер окна, значение scaleTop не работает должным образом из-за размера прокрутки. Например, в окне 1920x1080 установка scaleTop как 1500 немного сдвинется вперед. Однако при изменении размера окна до меньшего размера scaleTop as 1500 перемещается намного вперед. Итак, есть ли формула для расчета scaleTop для перемещения к цели независимо от размера окна?
$('a.FirstPage').click(function(){
$('html, body').animate({
scrollTop:1500, //setting scaleTop value
}, 2000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('left',(0-(scrolled*1.0))+'px');
}
CSS
#parallax-bg1 {
z-index: 1;
position: fixed;
width: 100%;
margin-top: 10px; /* 70px icon width + 10px margin */
padding-top: 56.25%;/* 16:9 Aspect Ratio */
left: 0%; /* align left edge with center of viewport */
}
#bg1-1 {
position: absolute;
top: 0;
left: 0%;
height: 100%;
width: 100%;
}
#bg1-2 {
position: absolute;
top: 0px;
left: 78%;
height: 100%;
width:
HTML
<div id="parallax-bg1">
<img id="bg1-1" src="img/c.png" />
<img id="bg1-2" src="img/c.png" />
</div>