Skip to content

Instantly share code, notes, and snippets.

@mutukrish

mutukrish/index.html

Created October 7, 2012 09:42
Show Gist options
  • Save mutukrish/3847686 to your computer and use it in GitHub Desktop.
Save mutukrish/3847686 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<body>
<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div class="hills">
<div></div>
<div class="trees">
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
<ul class="pinetree">
<li>
</li><li>
</li><li>
</li></ul>
</div>
<div></div>
</div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>
</body
Raw
script.js
$(document).ready(function(){
$(function() {
$('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
$('#stars').animate({'opacity':1}, 5000,function(){
$('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
$('#sstar').animate({'opacity':1}, 300);
$('#sstar').animate({
'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
});
});
});
});
$('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
$('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
$('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
$('#night').animate({'opacity':0.8}, 20000);
});
});
Raw
style.css
body{
overflow:hidden;
}
#clouds, #sky, #night, #stars{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
}
#sky{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZGRlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2NhZTVmMyIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(183,221,239,1) 0%, rgba(202,229,243,0.6) 40%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,221,239,1)), color-stop(40%,rgba(202,229,243,0.6)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(183,221,239,1) 0%,rgba(202,229,243,0.6) 40%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(183,221,239,1) 0%,rgba(202,229,243,0.6) 40%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(183,221,239,1) 0%,rgba(202,229,243,0.6) 40%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(183,221,239,1) 0%,rgba(202,229,243,0.6) 40%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7ddef', endColorstr='#007db9e8',GradientType=0 ); /* IE6-8 */
z-index:1;
}
#sun_yellow{
position:absolute;
left:45%;
top:50%;
width:150px;
height:152px;
border-radius:150px;
background-color:yellow;
z-index:2;
}
#sun_red{
position:absolute;
left:45%;
top:50%;
width:150px;
height:152px;
border-radius:150px;
background-color:red;
z-index:2;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#clouds{
position:
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%) !important;
z-index:1;
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
top:10%;#9ACC40
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#night{
background-color:#000;
z-index:4;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#stars{
bottom:200px;
background:transparent url("http://i.imgur.com/z9cgn.png") repeat bottom center;
z-index:5;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#sstar{
position:absolute;
left:40%;
top:10%;
width:126px;
height:80px;
background:transparent url("http://i.imgur.com/jQiM1.png") no-repeat 80px -200px;
z-index:5;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#moon{
position:absolute;
left:45%;
top:60%;
width:168px;
height:168px;
border-radius:168px;
background-color:#ddd;
z-index:6;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.hills > div:nth-child(1) {
background-color: #B1D28F;
background-image: -moz-linear-gradient(center top , #B1D28F, #6AB567, #B1D28F);
background-image: -webkit-linear-gradient(center top , #B1D28F, #6AB567, #B1D28F);
left: -170px;
top: 77%;
z-index: 5;
}
.hills > div {
background: none repeat scroll 0 0 #54A246;
border-radius: 500px 500px 500px 500px / 250px 250px 250px 250px;
height: 700px;
position: absolute;
width: 70%;
}
.hills > div:nth-child(2) {
background-color: #4B9C44;
background-image: -moz-linear-gradient(center top , #4B9C44, #5FA84A, #4B9C44);
background-image: -webkit-linear-gradient(center top , #4B9C44, #5FA84A, #4B9C44);
background-image: -ms-linear-gradient(center top , #4B9C44, #5FA84A, #4B9C44);
right: -135px;
top: 77%;
z-index: 5;
}
.hills > div:nth-child(3) {
background-color: #72B451;
background-image: -moz-linear-gradient(center top , #72B451, #54A246, #72B451);
background-image: -webkit-linear-gradient(center top , #72B451, #54A246, #72B451);
background-image: -ms-linear-gradient(center top , #72B451, #54A246, #72B451);
top: 86%;
z-index: 5;
left:-202px;
}
.trees > ul.pinetree:first-child {
right: 40%;
top: -8%;
}
.pinetree {
background-image: -moz-linear-gradient(left center , #865D2C, #3A2712);
background-image: -webkit-linear-gradient(left center , #865D2C, #3A2712);
background-image: -ms-linear-gradient(left center , #865D2C, #3A2712);
background-position: center top;
background-repeat: repeat-y;
background-size: 10px 100%;
display: block;
height: 100px;
position: absolute;
width: 120px;
}
.pinetree li {
border-bottom-color: green;
border-bottom-style: solid;
border-left-color: transparent;
border-left-style: solid;
border-right-color: transparent;
border-right-style: solid;
height: 0;
position: absolute;
width: 0;
}
.pinetree > li:first-child {
border-bottom-width: 40px;
border-left-width: 20px;
border-right-width: 20px;
left: 40px;
top: -80px;
}
.pinetree > li:nth-child(2) {
border-bottom-width: 80px;
border-left-width: 50px;
border-right-width: 50px;
left: 10px;
top: -55px;
}
.pinetree > li:nth-child(3) {
border-bottom-width: 100px;
border-left-width: 60px;
border-right-width: 60px;
left: 0;
top: -25px;
}
.trees > ul.pinetree:nth-child(2) {
right: 44%;
top: -7%;
}
.trees > ul.pinetree:nth-child(3) {
right: 35%;
top: -5%;
}
.trees > ul.pinetree:nth-child(3) {
right: 35%;
top: -5%;
}
.trees > ul.pinetree:nth-child(4) {
right: 17%;
top: -4%;
}
.trees > ul.pinetree:nth-child(5) {
right: 31%;
top: -4%;
}
.trees > ul.pinetree:nth-child(6) {
right: 25%;
top: -3%;
}
.trees > ul.pinetree:nth-child(7) {
right: 13%;
top: -2%;
}
.trees > ul.pinetree:nth-child(8) {
right: 20%;
top: -1%;
}
li {
list-style-type: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment