Я пытаюсь создать простую страницу параллакса с тремя «слайдами», используя stellar.js (у которой, как я слышал, есть свои проблемы). В идеале, вторые две страницы содержат элемент изображения, находящийся в центре-внизу, а текст плавает над ним в центре-в центре. При разных размерах браузеров и в разных браузерах все эти элементы выравниваются по-разному.
Вот моя разметка для последних двух слайдов (первый слайд не проблема):
<!--Slide 2-->
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="wrapper">
<img src="images/slide2/slide2.png" data-stellar-ratio="3" data-stellar-vertical-offset="-20"alt="">
</div>
<span class="slideno"> Here is the layover text. </span>
<a class="button" data-slide="3" title=""></a>
</div
<!--Slide 3-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="wrapper">
<img src="images/slide3/slide3.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-20"alt="">
<span class="slideno">Text for slide 3</span>
</div>
И вот CSS для этого:
/******************************
SLIDE 2
*******************************/
#slide2{
background-color:#f0e9d3;
}
#slide2 img:first-child{
position:absolute;
top:50%;
left:50%;
margin-bottom:-449.5px;
margin-left:-375px;
height:899px;
width:750px;
}
/******************************
SLIDE 3
*******************************/
#slide3{
background-color:#d9dddf;
}
#slide3 img:first-child{
position:absolute;
top:50%;
left:50%;
margin-top:-254px;
margin-left:-506px;
height:1012px;
width:508px;
}
Любая помощь будет оценена, спасибо!
