Hello friends..
I think you like my previous post"How to change background color". This time I come here with an another Animation post using CSS & JAVASCRIPT in HTML.
In this post i tried to explain some effects which we can add in our websites and blogs.I have you all like this.
HTML CODE
<html>
<head>
<title>Animation 2</title>
<link rel="stylesheet" type="text/css" href="name.css">
<script type="text/javascript">
function fadeOut(el)
{
var elem=document.getElementById(el);
elem.style.transition="opacity 1s linear 0s";
elem.style.opacity=0;
}
function fadein(el)
{
var elem=document.getElementById(el);
elem.style.transition="opacity 1s linear 0s";
elem.style.opacity=1;
}
function slideClosed(el)
{
var elem=document.getElementById(el);
elem.style.transition="height 1s linear 0s";
elem.style.height="0px";
}
function slideOpen(el)
{
var elem=document.getElementById(el);
elem.style.transition="height 1s linear 0s"
elem.style.height="300px";
}
</script>
</head>
<body>
<strong><h3>CLICK ON BUTTON</h3></strong>
<input type="button" value="Fadeout" onClick="fadeOut('box')"/>
<input type="button" value="Fadein" onClick="fadein('box')"/>
<input type="button" value="Slide close" onClick="slideClosed('box')"/>
<input type="button" value="Slide open" onClick="slideOpen('box')"/>
<div id="box"><h2>THINK DIFFERENT</h2></div>
</body>
</html>
CSS CODE
#box
{
background:#3F0;
width:320px;
height:240px;
overflow:hidden;
}
h2
{
padding-left:100px;
color:#F00;
padding-top:50px;
}
h3
{
padding-left:100px;
}
Animation 2
I think you like my previous post"How to change background color". This time I come here with an another Animation post using CSS & JAVASCRIPT in HTML.
In this post i tried to explain some effects which we can add in our websites and blogs.I have you all like this.
HTML CODE
<html>
<head>
<title>Animation 2</title>
<link rel="stylesheet" type="text/css" href="name.css">
<script type="text/javascript">
function fadeOut(el)
{
var elem=document.getElementById(el);
elem.style.transition="opacity 1s linear 0s";
elem.style.opacity=0;
}
function fadein(el)
{
var elem=document.getElementById(el);
elem.style.transition="opacity 1s linear 0s";
elem.style.opacity=1;
}
function slideClosed(el)
{
var elem=document.getElementById(el);
elem.style.transition="height 1s linear 0s";
elem.style.height="0px";
}
function slideOpen(el)
{
var elem=document.getElementById(el);
elem.style.transition="height 1s linear 0s"
elem.style.height="300px";
}
</script>
</head>
<body>
<strong><h3>CLICK ON BUTTON</h3></strong>
<input type="button" value="Fadeout" onClick="fadeOut('box')"/>
<input type="button" value="Fadein" onClick="fadein('box')"/>
<input type="button" value="Slide close" onClick="slideClosed('box')"/>
<input type="button" value="Slide open" onClick="slideOpen('box')"/>
<div id="box"><h2>THINK DIFFERENT</h2></div>
</body>
</html>
CSS CODE
#box
{
background:#3F0;
width:320px;
height:240px;
overflow:hidden;
}
h2
{
padding-left:100px;
color:#F00;
padding-top:50px;
}
h3
{
padding-left:100px;
}
No comments:
Post a Comment