fade out – fade in

@vinsaFeb 17.2004

Hi,
I need javascript for “fade out – fade in” effect for my page. Look the attached image. The effect who I need is in top and in bottom on the page and it must work when I scroll up and down. Is posible this effect with javascript?

~~[upl-file uuid=1475c1ab-6a0d-42fa-81e8-b77f56c6c44b size=50kB]~~fadeout_fadein.jpg[/upl-file]

to post a comment

JavaScript

@KorFeb 17.2004 — #Is it a good start something like this? (IE only, for the moment):

[code=php]
 <html>
 <head>
 <style type="text/css">
 <!--
 #fade {
 background-color: #FFFFFF;
 filter: alpha(Opacity=100, FinishOpacity=70, Style=3);
 z-index: 1;
 left: 0px;
 top: 0px;
 -moz-opacity :0.75;
 height: 80px;
 width: 100%;
 position: absolute;
 }
 body {
 margin: 0px;
 }
 -->
 </style>
 <script>
 function bla(){
 //alert (document.body.clientHeight);
 if (document.body.scrollTop<=1){
 document.getElementById('fade').style.pixelTop = 0;
 }
 else{document.getElementById('fade').style.pixelTop = document.body.scrollTop;
 }
 setTimeout('bla()',200);
 }
 </script>
 </head>
 <body onload = "bla()" bgcolor="#000099">
 <div id="fade"></div><br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 
 </body>
 </html>
 [/code]

@vinsaauthorFeb 17.2004 — #thanks,

but can you do this layer absolutly static, because he move, when I scroll up and down and the effect is not very good.

p.s. sorry for my english

@KorFeb 18.2004 — #
layer absolutly static, because he move,
[/quote]

It can not be done [b]absolutely[/b] static, as the only way to readjust the position according to the scroll move is to check and loop the function from time to time (in this particular ex 200 milisecs) so inevitable there will be a short "tremble'. modify the value , say 10 milisecs:

setTimeout('bla()',[color=red]10[/color]);

but as a result you rise the CU "usage", as the function is looping 20 times faster now. Find out your best value by yourself

effect is not very good.
[/quote]

You can adjust and modify the opacity as you want from CSS style proprieties. Check the Net for some CSS tutorials and lear about the CSS Alpha style.

@vinsaauthorFeb 18.2004 — #I think that is possible to be absolutly static but whit DHTML (with leyers). With your methos this is impossible.

@KorFeb 19.2004 — #But...My method [b]IS[/b] DHTML (getElementById() method + style on-the-fly changing way) and that [b]IS[/b] a layer (<div id="">).

?

You should learn a little bit more about it...

fade out – fade in

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

fade out – fade in

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴