Page Fade Transition Effect Won't Work.

  • 2
  • Question
  • Updated 8 years ago
  • Answered
I wanted a page 'fade' transition effect on my site. I copied and pasted the following code from www.htmlbasix.com.
It's only a short piece of html but for some reason it won't display fully in this post?
The codes can be seen here: www.htmlbasix.com/pagetransitions.sht... (halfway down page).
Anyway, I inserted the code into my site but it just doesn't work?
Can someone please help?
Steve.
Photo of Steve

Steve

  • 13 Posts
  • 0 Reply Likes
  • irritated.

Posted 9 years ago

  • 2
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Steve,

The code you're trying to add has a section that you need to add to the Head section of the page. Unfortunately you don't have access to the head section of your site. What does work for some people is to add the head section of code in one HTML widget and the body section of the code into another HTML widget underneath.
Photo of Steve

Steve

  • 13 Posts
  • 0 Reply Likes
Ok. Thanks Marije.
Photo of Nathaniel Johnson

Nathaniel Johnson

  • 24 Posts
  • 3 Reply Likes
You can get a fading effect with this html code right here below. You can see how it works in my site too, On all of my pages! Here is the code to add in anywhere at the top of your website (Nothing will show up in the place where you add the HTML widget):

START COPYING CODE (NOTE: Don't copy the <!-- or the --> or it will mess it up!)

<!--
<script type="text/javascript">/* fadeInColor This is the color that the site will fade in from. It can be any valid color.*/var fadeInColor = "black";/* 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>
-->

STOP COPYING CODE

***You can also change the color it fades in from, and you can change how long it takes to fade in.

**Right now, I have the color set to "Black" and I have the speed set to "2.0" It works good for my site. You can see my site how it works @ www.nathansmusicstudio.yolasite.com

*I hope this helps! It worked for my website!
Photo of Nathaniel Johnson

Nathaniel Johnson

  • 24 Posts
  • 3 Reply Likes
You can get a fading effect with this html code right here below. You can see how it works in my site too, On all of my pages! Here is the code to add in anywhere at the top of your website (Nothing will show up in the place where you add the HTML widget):

START COPYING CODE (NOTE: Don't copy the <!-- or the --> or it will mess it up!)

<!--
<script type="text/javascript">/* fadeInColor This is the color that the site will fade in from. It can be any valid color.*/var fadeInColor = "black";/* 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>
-->

STOP COPYING CODE

***You can also change the color it fades in from, and you can change how long it takes to fade in.

**Right now, I have the color set to "Black" and I have the speed set to "2.0" It works good for my site. You can see my site how it works @ www.nathansmusicstudio.yolasite.com

*I hope this helps! It worked for my website!
Photo of INDI

INDI

  • 189 Posts
  • 2 Reply Likes
My delete above sorry.......was saying I cannot actually see the fading effect on your site :( have you changed it or am i missing something?

INDI
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi INDI, sorry, I did take out the page transition of my site. Sorry, but I will create a page right now that will fade in!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey everyone, visit this topic for the code to make your page fade in: How to get your page to fade in! The code that actually works! :)