Well, this is cool uh? Just click on any navigation link at the top and all of these fade in between! Awesome? To implement this to your Yola site, follow these steps:


Step 1.) On each page of your site, put this code below into an HTML widget: (remember, on every page that users are able to get to)


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function({
    $("body").css("display""none");
 
    $("body").fadeIn(2000);
 
    $("a").click(function(event){
        event.preventDefault();
        linkLocation this.href;
        $("body").fadeOut(1000redirectPage);
    });
 
    function redirectPage({
        window.location linkLocation;
    }
});
</script>

<style type="text/css">
  /*
  If your page's background colors are white, then 
  just put in white below. If they're black, then simply 
  replace white with black
  */
  
  html {
    background-color:#45322B;
  }

  </style> 

Step 2.) Edit the background-color value to match all of your pages background colors. All of your pages need to have the same background-color for this to work properly. 

For example: If your page background is white, just change that HEX value to white like this:

html {
    background-color:white;
  }


3.) That's it! It should now work! If you need any assistance, please reply to this thread on the Yola Forum: Fade In/Out Page Loading Effect on Pages


I hope this works for you! :) 


Sincerely,

Nathan Johnson


CAUTION: Although I tried this out right here, you may have another HTML code on your site that may interfere with this. You should try this on a test page first to make sure it works. If you have any questions, please reply to this thread on the Yola Forum: Fade In/Out Page Loading Effect on Pages

 

Make a free website with Yola