BOXED WIDTH ANIMATION
Step 1: Insert the following css code in the <HEAD> section of your page
<style type="text/css">
body
{
background:#000;
overflow:hidden;
margin:0;
padding:0;
}
.container
{
width:1000px;
height:500px;
margin:5% auto 0;
padding:20px;
background:#CCC;
}
.left-panel
{
background:#319400;
width:780px;
height:500px;
float:left;
margin:0 20px 0 0;
padding:0;
text-align:center;
position:relative;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
.left-panel:hover {
background: #ff7b29;
}
.right-panel-visible
{
background:#0065e2;
width:200px;
height:500px;
float:left;
margin:0;
padding:0;
}
.right-panel-hidden
{
background:#00a27a;
width:475px;
height:500px;
float:left;
margin:0;
padding:0;
border-radius:20px;
border:#fff 2px dotted;
text-align:center;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
.right-panel-hidden:hover {
background: #ff7b29;
}
.button, .button2
{
background:#666;
width:300px;
padding:10px;
border:none;
margin:0;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
cursor:pointer;
position:relative;
top:45%;
}
.button:hover, .button2:hover
{
background:#333;
}
.text {
color: #FFFFFF;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 60px;
line-height: 80px;
padding: 18% 0 0;
text-align: center;
width: 100%;
text-decoration:blink;
}
</style>
Step 1: Insert the following JS code in the <HEAD> section of your page
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.button').click(function(){
$('.left-panel').animate({width:'500px'}, 1000);
$('.right-panel-visible').fadeOut(1000);
$('.button').fadeOut(1000);
setTimeout(function(){$(".right-panel-hidden").fadeIn(1000)},1000);
setTimeout(function(){$(".button2").fadeIn(1000)},1000);
})
$('.button2').click(function(){
$('.left-panel').animate({width:'1000px'}, 1000);
$('.right-panel-visible').fadeOut(0);
$('.right-panel-hidden').fadeOut(0);
$('.button').fadeOut(0);
setTimeout(function(){$(".text").fadeIn(1000)},1000);
})
});//]]>
</script>
Step 2: Insert the below sample code into the <BODY> section of your page:
<div class="container">
<div class="left-panel">
<input name="" type="button" value="CLICK HERE FOR BOX ANIMATION" class="button" />
<div class="text" style="display:none;">
OK!<br />
WELL DONE
</div>
</div>
<div class="right-panel-visible"></div>
<div class="right-panel-hidden" style="display:none;"><input name="" type="button" value="CLICK HERE FOR BOX ANIMATION" class="button2" /></div>
</div>
Download Video Player | Windows Media Player | Best Media Player
ReplyDelete