Total Pageviews

Wednesday, January 21, 2015

Create a Html page Template which background color changes with time

Create a HTML page Template  which background color changes with time.


Click to Down lode changing color HTML template with source code







to create this page you need to 

1.download   jquery-2.0.0.min.js   jQuery 

2. Embed  above jquery  in your HTML page 

     <script src="jquery-2.0.0.min.js">

3. using script tag embed following java script in your page 

 .<script language="javascript">     

        $(document).ready(function(){

        $("#pramod").css('width','980px');
        $("#pramod").css('height','600px');

            var x=0;
            var y=0;   
            var z=0;
        setInterval(function(){
            $("#pramod").css('background-color','rgb(' +x+ ',' +y+','+z+')');
            setInterval(function() {
                             x+=10;
                y+=1;
                                z+=10;
                          },1000);
             },1000);
           
 
        });

        </script>


Explanation : 

in this tutorial we have used rgb( , ,) function to set background color to the HTML tag

 

What is rgb() function ?

as we know basic colors are three red , Green and Blue

all other color are developed by this three color. in rgb() is a function and it has three parameters we have to provide in numbers the minimum value is 0 and highest is 255

so if we set bgcolor= rgb(0,0,0);  then it will be black it may change on  monitor resolution .

in above task  x ,y ,z are three variable represent red, green and blue value in rgb as rgb(x,y,z);

using loop the value is increased using jquery time interval is set .

The you can download  Complete code by clicking following link









Click to Down lode changing color HTML template with source code

 


<html>
    <head>
        <title>sample</title>
        <script src="jquery-2.0.0.min.js"></script>
<script language="javascript">
     
        $(document).ready(function(){

        $("#pramod").css('width','980px');
        $("#pramod").css('height','600px');

            var x=0;
            var y=0;   
            var z=0;
       
            

                   setInterval(function(){
            $("#pramod").css('background-color','rgb(' +x+ ',' +y+','+z+')');
            setInterval(function() {
                             x+=10;
                y+=1;
                                z+=10;
                          },1000);
             },1000);
           
 
        });

        </script>
    
    </head>
       <body bgcolor="orange">

       <div id="pramod">
    </div>

    </body>
    </html>





 Solved by :Pramod Slave 
 MCA IMSCDR Ahmednagar
  HTML5 CSS3 Sesson



Popular Posts

Follow by Email