How to get your page to fade in! The code that actually works! :)

  • 1
  • Praise
  • Updated 8 years ago
Hi, since everyone seems to want to know the code for this (The one that actually works!) I have decided to post this topic about it! So, here are the instructions:

1. Drag and drop and HTML widget over to your page.

2. Paste this code in:

(Remember NOT to copy <!-- and -->)

<!--

<script type="text/javascript">/* fadeInColor This is the color that the site will fade in from. It can be any valid color.*/var fadeInColor = "#0AA1FF";/* fadeInSpeed This is how long the fade effect takes to go from fully opaque to fully transparent, in seconds.*/var fadeInSpeed = 2.0;/* waitForPageLoad If set to `true', the fade effect won't start until the page has been completely loaded. If set to `false', the fade effect begins immediately.*/var waitForPageLoad = 'false';/* main code; */if (window == window.top) { var opacity = 100; var width = window.innerWidth; var height = window.innerHeight; if (typeof width == "undefined"){ width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } document.write( '<div id="yola_fade_mask" style="' + "left: 0; top: 0;" + "position: absolute;" + "width: " + width + "px;" + "height: " + height + "px;" + "background-color: " + fadeInColor + '"></div>' ); var maskElement = document.getElementById("yola_fade_mask"); function fadeFunction () { opacity -= 5; maskElement.style.opacity = opacity / 100; maskElement.style.filter = "alpha(opacity=" + opacity + ")"; if (opacity > 0) { window.setTimeout(arguments.callee, (fadeInSpeed * 1000) / 20); } else { maskElement.style.display = "none"; } } if (waitForPageLoad) { if (typeof window.addEventListener != "undefined") { window.addEventListener("load", fadeFunction, false); } else if (typeof window.attachEvent != "undefined") { window.attachEvent("onload", fadeFunction); } else if (typeof document.addEventListener != "undefined") { document.addEventListener("load", fadeFunction, false); } else { window.onload = fadeFunction; } } else { fadeFunction(); }}</script>

-->


Now, when you visit your page, it should fade in!

PLEASE NOTE:

***This code does not work in the new preview window in the site builder, but, your page will fade in if you view it in the browser instead! Just wanted to let you know so you don't think it does not work!***

Remember, you can change "#0AA1FF" to the color you want. (You can visit www.colorpicker.com for the HEX codes picker) Also, you can change "2.0" to the number of seconds you want for the page to fade in.

Also, you can see an example of the page fading in code here: Fading page!!!

I hope this helps everyone out!

--
Nathan Johnson

-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for sharing this code with your fellow Yola community, Nathan!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! I posted this because I saw some people that where asking this so I just created this praise so everyone can come to this and get an answer! :)