Good day folks,
I'm currently doing a project which needs to be something like this http://wandaprint.com/home
This is what I've done so far. Can you give me some tips on how to do this one.
HMTL:
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#left").click(function(){
$("#left").animate({bottom:'100%'});
});
});
</script>
<script>
$(document).ready(function(){
$("#right").click(function(){
$("#right").animate({bottom:'100%'});
});
});
</script>
</head>
<body>
<div id="container">
<div id="left">
<div id="left1"></div>
<div id="left2"></div>
</div>
<div id="right">
<div id="right1"></div>
<div id="right2"></div>
</div>
<div>
</body>
</html>
CSS
#left {
height: 100%;
width: 50%;
float: left;
position: absolute;
}
#left1 {
height: 100%;
background: blue;
}
#left2 {
height: 100%;
background: green;
}
#right {
height: 100%;
width: 50%;
background: brown;
float: right;
}
#right1 {
height: 100%;
background: green;
}
#right2 {
height: 100%;
background: blue;
}
#container {
height: 100%;
}
body {
height: 500%;
overflow: hidden;
}
The animation is on the click event of the left div. Thanks in advance.