Parallax. Математическая задачка.
Здравия всем, уважаемые пользователи форума!
Прошу помощи в непростой задачке! На сайте расположено изображение, которое шириной растягивается на весь экран, а высота всегда больше высоты экрана. Само изображение фиксированное и служит как фон для сайта. <img alt="" src="/bg.jpg" id="bg" style="position:fixed; left:0%; top:0%; width:100%; z-index:-10" /> Задача следующая: Нужно при скроллинге сдвигать изображение вверх через margin-top. Но сдвигать нужно так: вычислить высоту изображения, вычислить высоту всей страницы, вычислить высоту окна браузера пользователя и относительно всем этим параметрам сдвигать изображение вверх при скроллинге, и когда страница прокручена до самого низа, то изображение должно быть в самом верху, тоесть например так: Высота изображения: 1000px, высота окна браузера 800px, и когда прокручена страница в самый низ, то изображение должно быть сдвинуто на 200px вверх, тоесть: margin-top:-200px. Надеюсь, суть понятна, буду очень благодарен за решение такой задачки, уже вторые сутки голову ломаю, но я не силён в математике.
var height = window.innerHeight; //Высота экрана пользователя
var scrollHeight = document.body.scrollHeight; //Высота всей страницы
var bg = document.getElementById('bg');
var bgHeight = bg.height; //Высота изображения
window.onscroll = function()
{
var a = document.body.scrollTop; //Получаем при каждой прокуртке позицию скроллинга
bg.style.marginTop = ??????
}
|
Ruslan_xDD,
Вариант для Google Chrome ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
height: 800px
}
</style>
</head>
<body>
<img alt="" src="http://pulson.ru/wp-content/uploads/2011/05/1286214958_94-695x990.jpg" id="bg" style="position:fixed; left:0%; top:0%; width:100%; z-index:-10" />
<script>
var height = window.innerHeight; //Высота экрана пользователя
var scrollHeight = document.body.scrollHeight; //Высота всей страницы
var bg = document.getElementById('bg');
var bgHeight = bg.height; //Высота изображения
window.onscroll = function()
{
var a = document.body.scrollTop; //Получаем при каждой прокуртке позицию скроллинга
bg.style.top = -(bgHeight - height)*(a/(scrollHeight-height)) +"px"
}
</script>
</body>
</html>
|
рони, спасибо за формулу, везде работает :)
window.onscroll = function()
{
var a = document.documentElement.scrollTop || document.body.scrollTop;
bg.style.marginTop = -(bgHeight - height)*(a/(scrollHeight-height))+'px'
}
|
| Часовой пояс GMT +3, время: 13:32. |