Smooth fade out

JavaScript
1

Hello everyone

I’ve build a website but an implemented plugin needs some time to load. As the layout isn’t that beautiful while loading, I had needed to build a loading page. I’ve implemented it in my site and everything works fine, except I wanted to fadeout the loading screen smoothly but it doesn’t.

I think I need to build a more efficient loading screen but I don’t know how to do that exactly. What I currently do: hide al the content with the visibility: hidden css code and standard show the loading screen. With javascript I’ve built in a setTimeout and that will make the loading screen to fade out and show the actual content.

It works quite good but it doesn’t work smoothly. It stutters a lot and that’s not the purpose. How can I optimize my code for smoothly fade out the loading screen?

Website: www.rndevelopment.ga
Github repo: www.github.com/nickmansrob/nickmansrob.github.io

Thanks in advance!
Rob Nickans

Note: I also want the white background to fade out. (opacity change?)

2

Smooth transitions work well when the transtion is set up in the css and simply triggered via javascript. Google ‘css transitions with javascript’ to see what i mean.

3

I’ve done the thing with JQuery. I didn’t knew there was such a clean option. Thanks for the hint though!