Доброго времени суток!
Я недавно начал изучать создание сайтов, tml, css и javascript.
Делаю сайт с эффектом parallax, на сайте вверху идут три картинки, которые должны начать "уползать" при скроллинге с разной скоростью. Но после написания скрипта к для первой картинки она, оставаясь с самого начала (до скроллинга) в нужной позиции, при начале скроллинга резко прыгает вверх, и уже оттуда начинает плавное движение. Почему это происходит и как это исправить?
Я еще очень мало разбираюсь в javascript, этот скрипт использую по уроку, имея только общее представление о принципе его работы. Поэтому еще такой вопрос, правильный ли метод для parallax эффекта я использую?
Заранее большое спасибо!
HTML:
<!doctype: html>
<html>
<head>
<meta charset="utf-8">
<title>Кулдига</title>
<link type="text/css" rel="stylesheet" href="Pages/Kuldiga_Style.css" />
<script>
function parallax() {
var doma_1 = document.getElementById ("doma-1");
doma_1.style.top = -(window.pageYOffset / 2)+"px";
}
window.addEventListener("scroll",parallax,false);
</script>
</head>
<body>
<div id="main">
<div id="header">Заголовок</div>
<div id="doma">
<div id="doma-1"></div>
<div id="doma-2"></div>
<div id="doma-3"></div>
</div>
<div id="content">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="footer">Футер</div>
</div>
</body>
</html>
CSS:
|
Код:
|
body {
background: url(../Materials/Photo/Livia/fon.png);
background-repeat: repeat;
background-size: 500px;
background-attachment: fixed;
}
* {
padding:0;
margin:0;
}
#header {
font-style: italic;
height: 50px;
padding: 20px;
width: 90%;
margin: auto;
text-align: center;
}
#footer {
margin-top: 500px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#content {
position: absolute;
}
/*картинки */
#doma-1 {
position:fixed;
width: 100%;
height: 100px;
margin-top: 50px;
background: url(../Materials/Photo/Kuldiga/doma-1.png) repeat-x;
background-size: auto 100%;
}
#doma-2 {
position: fixed;
width: 100%;
height: 100px;
margin-top: 200px;
background: url(../Materials/Photo/Kuldiga/doma-2.png) repeat-x;
background-size: auto 100%;
}
#doma-3 {
position: fixed;
width: 100%;
height: 100px;
margin-top: 350px;
background: url(../Materials/Photo/Kuldiga/doma-3.png) repeat-x;
background-size: auto 100%;
} |
