WEB DİZAYN

Arka Alan Uygulaması

Bu uygulama diğerlerine nispeten çok daha kolay fakat çok kullanışlı çünkü bu animasyonu flash'ta yapmak belli bir yük getirmektedir. Bu da sayfanın açılmasını çok daha ağır şekilde açılmasını sağlar. Fakat jQuery sayesinde bu maaliyet inanılmaz şekilde azalmakta ve internet sayfanız daha performanslı bir şekilde çalışmaktadır. HEAD kısmına bu kodu eklememiz yeterli


< style type="text/css" media="screen">
body{
background-color: #000;
}
#wrapper{
width:920px;
margin:0 auto;
}
#header{
height:300px;
background: #000 url(background.jpg) repeat-y scroll left top;
text-align:center;
}
#header div{
width:920px;
height:300px;
background: transparent url(overlay.png) no-repeat scroll left top;
}
#header h1{
padding-top:125px;
font-family: Arial, "MS Trebuchet", sans-serif;
color:white;
}
#body{
background-color:#efefef;
height:500px;
}
#nav{
height:35px;
background-color: #111;
}
< /style>

Aşağıdaki koduda BODY kısmına eklememiz yeterli olacaktır.


< div id="wrapper">
< div id="header">
< div>
< h1>HarekeTLi Arkaalan Animasyonu< /h1>
< /div>
< /div>
< div id="nav">
< /div>
< div id="body">
< /div>
< /div>

Aşağıdaki koduda BODY'nin bitiminde yada başlamadan kısmına eklememiz yeterli olacaktır.


< script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8">< /script>
< script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageHeight = 4300;
var headerHeight = 300;
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position","0 "+current+"px");
}
var init = setInterval("scrollBg()", scrollSpeed);
< /script>