@lasjorg Thank you very much! For this particular project I guess I cannot say I had a single inspiration. I supposed ideas come from other projects or designs you see all the time, but I don’t know it consciously to be honest. There are two website that I know of, Dribbble and Behance, for designers to show their work. There are many web designers showing their stuff and you can be inspired from their design if you want. Again, thank you!
@camperextraordinaire Actually I didn’t think of that. Waiting half a second sounds interesting and I’ll definitely think about it.
About the timeout. First, I’m hiding the #preloader div:
preloaderDiv.setAttribute( 'style', 'opacity: 0' );
Then on line 236 in the SCSS code, I’m using a transition of 500ms:
transition: opacity 500ms;
And because the fading action takes those 500ms, I’m setting a timeout of 500ms which sets the display property to none for the #preloader div.
setTimeout( ( ) => preloaderDiv.setAttribute( 'style', 'display: none' ), 500 )
Just by reducing the opacity to zero won’t have the effect I wanted, because it will be hidden but still interactive. So using display: none
in the div avoids any mouse events like selecting text and so on.
Maybe there’s a better way to do this, I don’t know. I thought about using “pointer-events: none” but this still lets you select text even if the mouse pointer doesn’t change. Also changing z-index to -1 would have a similar effect as the #preloader div is absolute positioned, but this way a useless div would be “displayed” so what I always do is changing the display property to get rid of it at once.
Thanks for your feedback and kind words. Sorry for the long post, though