Using JQuery and CSS you can easily produce a fade effect on an entire web page or just one element.
Download the JQuery library and upload to the site at /js folder.
Call the library to the page with <script type="text/javascript" src="/js/jquery.min.js"></script>
Add in <head> section of page: <script type="text/javascript">
$(document).ready(function()
{
// fade in content.
$( '.header' ).fadeIn(2500);
});
</script>
<style type="text/css">
.header
{
display:none;
}
</style>
Replace <div>s with
<script type="text/javascript">
<!--
document.write( '<div class="header">' );
</script>
and
<script type="text/javascript">
<!--
document.write( '</div><!-- content-wrapper -->' );
</script>
If only wanted on the index page [for example], put
<script type="text/javascript">
$(document).ready(function()
{
// fade in content.
$( '.header' ).fadeIn(2500);
});
</script>
<style type="text/css">
.header
{
display:none;
}
</style>
in /includes/fade.php and call it using the PHP code:
<? if ($_SERVER['PHP_SELF']=="/index.php")
{include 'includes/fade.php';}
?>
Comments