Fade-In Image Effect

Discussion in 'Web Development and Programming' started by rangana, Apr 23, 2008.

  1. rangana

    rangana Regular Member

    Joined:
    Apr 12, 2008
    Messages:
    106
    Likes Received:
    0
    Location:
    Cebu City Philippines
    I have made a script wherein it gives your image a "Fade-In" effect ;)

    Logically, we could play with the opacity feature of CSS :)
    Combining it with JS could give us an effect similar to PPT's "Fade-In" effect:)

    Its full implementation could be seen with a complete script like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    img{
    filter:alpha(opacity=50);
    opacity:.50;
    text-align:center;margin:auto;}
    #wrap{width:500px;margin:20px auto;border:3px double #aaa;text-align:center;padding:5px;}
    </style>
    <script type="text/javascript">
    var iterate=1,fiterate=0.1,test;
    function rangfunc()
    {
    	var obj=document.getElementById('myimage');
    	obj.style.filter = 'alpha(opacity='+iterate+')';
    	obj.style.opacity=fiterate;
    	iterate+=2;
    	fiterate+=0.02;
    test=setTimeout('rangfunc()',50);
    }
    window.onload = function()
    {
    var obj=document.getElementById('myimage');
    obj.style.filter = 'alpha(opacity=1)';
    obj.style.opacity='0.1';
    rangfunc();
    }
    </script>
    </head>
    <body>
    <div id="wrap">
    [attach=full]17332[/attach]
    </div>
    </body>
    </html>
    
     

Share This Page