Post
Ask Question

Make animated background on click event using JavaScript

Here I am going to tell you how to make animation of color on click event using JavaScript. Using CSS and JavaScript in HTML we can make our page very attractive.
 
HTML CODE
  1. <html>  
  2.   
  3.   <head>  
  4.     <title>animation</title>  
  5.     <style>  
  6.       #box {  
  7.         background: #36C;  
  8.         width: 640px;  
  9.         height: 480px;  
  10.       }  
  11.   
  12.       h1 {  
  13.         color: #FF0;  
  14.         padding-top: 180px;  
  15.         padding-left: 150px;  
  16.       }  
  17.   
  18.       h3 {  
  19.         color: #009;  
  20.         padding-left: 150px;  
  21.       }  
  22.  
  23.       #form {  
  24.         padding-left: 150px;  
  25.       }  
  26.   
  27.     </style>  
  28.     <script type="text/javascript">  
  29.     function changeBG(el, clr) {  
  30.       var elem = document.getElementById(el);  
  31.       elem.style.transition = "background 2.0s";  
  32.       elem.style.background = clr;  
  33.     }  
  34.     </script>  
  35.   </head>  
  36.   
  37.   <body>  
  38.     <h3>CLICK ON ANY BUTTON</h3>  
  39.     <form id="form">  
  40.       input type="button" value="megenta" onClick="changeBG('box','#F0F')"/>  
  41.       <input type="button" value="green" onClick="changeBG('box','#0c0')" />  
  42.       <input type="button" value="black" onClick="changeBG('box','#000')" />  
  43.     </form>  
  44.     <div id="box">  
  45.       <h1>Hello i am Sanjay Singh</h1>  
  46.     </div>  
  47.   </body>  
  48.   
  49. </html> 
Output
 
When we click on the magenta button and here I also set this default color
 
 
Now if we click on the green button
 
 
Now if we click on the black button