Форум

yyyyuriyyyy · #1 (**permalink**) 26.05.2014, 15:32

Здравствуйте кодеры. Мне нужна помощь.

У меня есть фоновая картинка. Мне нужно сделать что бы при прокрутки страницы фон двигался с верху до низу и все. Ну типо как в пуске windows 8.

Короче: заходишь на страницу, оно показывает верхнюю чать фона, а когда прокручиваешь вниз, не смотря на размен страницы, фон прокручивался только до нижней части

Надеюсь вы поняли -_-

рони · #2 (**permalink**) 26.05.2014, 16:19

yyyyuriyyyy,

<!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>
	window.onload = function()
	{
	  var height = window.innerHeight; //Высота экрана пользователя
	  var scrollHeight = document.documentElement.scrollHeight;
	  var clientHeight = document.documentElement.clientHeight;
	  var scrollHeight = Math.max(scrollHeight, clientHeight); //Высота всей страницы
	  var bg = document.getElementById('bg');
	  var bgHeight = bg.height; //Высота изображения
	  window.onscroll = function()
	  {
	    var a = window.pageYOffset || document.documentElement.scrollTop;; //Получаем при каждой прокуртке позицию скроллинга
	    bg.style.top = -(bgHeight - height)*(a/(scrollHeight-height)) +"px"
	  }
	  window.onresize = function()
	  {
	    height = window.innerHeight; //Высота экрана пользователя
	    scrollHeight = document.documentElement.scrollHeight;
	    clientHeight = document.documentElement.clientHeight;
	    scrollHeight = Math.max(scrollHeight, clientHeight); //Высота всей страницы
	    bgHeight = bg.height; //Высота изображения
	    window.onscroll()
	  }
	}
</script>
</body>
</html>

yyyyuriyyyy · #3 (**permalink**) 26.05.2014, 16:46

Спасибо, большое спасибо

Форум

Справочник

Discord чат

Курсы javascript