CreativityDenより、jQueryで作る太陽が上るアニメーションのスクリプトの紹介です。
設置方法は、下記が参考例です。
HTML
<body>
<div id="mountains"></div>
<div id="ground"></div>
<div id="trees_left"></div>
<div id="trees_right"></div>
<div id="river"></div>
<div id="clouds_left_shadow"></div>
<div id="clouds_right_shadow"></div>
<div id="clouds_left"></div>
<div id="clouds_right"></div>
<div id="sun"></div>
</body>CSS
body {
margin: 0;
padding: 0;
background: #1a76ba url(images/sky.png) top left repeat-x;
}
#mountains {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 249px;
padding-bottom: 60px;
background: transparent url(images/mountains.png) top center repeat-x;
}
#ground {
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
height: 283px;
background: transparent url(images/ground.png) bottom center repeat-x;
}
#trees_left {
position: absolute;
bottom: 5%;
left: 30%;
z-index: 2;
width: 427px;
height: 246px;
margin: -123px 0 0 -213px;
background: transparent url(images/trees_left.png) bottom center no-repeat;
}
#trees_right {
position: absolute;
bottom: 5%;
right: 20%;
z-index: 2;
width: 296px;
height: 246px;
margin: -123px -148px 0 0;
background: transparent url(images/trees_right.png) bottom center no-repeat;
}
#river {
position: absolute;
bottom: 0;
left: 50%;
z-index: 1;
width: 340px;
height: 219px;
margin-left: -170px;
background: transparent url(images/river.png) bottom center no-repeat;
}
#clouds_left {
position: absolute;
top: 40%;
left: 25%;
z-index: -1;
width: 441px;
height: 131px;
margin: -65px 0 0 -220px;
background: transparent url(images/clouds_left.png) bottom center no-repeat;
}
#clouds_right {
position: absolute;
top: 40%;
right: 25%;
z-index: -1;
width: 450px;
height: 122px;
margin: -61px -225px 0 0;
background: transparent url(images/clouds_right.png) bottom center no-repeat;
}
#clouds_left_shadow {
position: absolute;
bottom: 10%;
left: 25%;
z-index: 1;
width: 365px;
height: 112px;
margin: -56px 0 0 -182px;
background: transparent url(images/cloud_left_shadow.png) bottom center no-repeat;
}
#clouds_right_shadow {
position: absolute;
bottom: 10%;
right: 25%;
z-index: 1;
width: 300px;
height: 114px;
margin: -57px -150px 0 0;
background: transparent url(images/cloud_right_shadow.png) bottom center no-repeat;
}
#sun {
position: absolute;
top: 80%;
left: 50%;
z-index: -2;
width: 182px;
height: 183px;
margin: -91px 0 0 -91px;
background: transparent url(images/sun.png) bottom center no-repeat;
}
[Click to open the Cleeki menu] jQuery
$(document).ready(function(){
$("#sun").animate({top:"20%"}, 3000);
});
コメントする