[ShikhaTan]

Right so, this might potentially be a simple question but either way it’s beyond me.
I’m trying to create an animated splash screen/page for a website (I realize that everyone hates them). So I’m using some jscript to make four images meet in the middle and a fifth to display below them. I’ve managed to get it to work on my own screen but then on other screen sizes it’s a total mess, images overlapping where they shouldn’t etc.
Any direction or help would be great!

[Adan]

I’m not gonna give you your answer straight away (you learn so much more by figuring it out by yourself).

The first thing you’ll want to do is explicitly setting the width and height of the Div’s. This’ll prevent some possible issues, and also you won’t need to check the images for the dimensions every time. I’d also recommend putting the parts of the splash screen in a container. Why? Simply because you can hide it, or do other stuff with it more easily.

you’ll need to grab the window size (both width and height) and divide it by 2 (or the container, if you’re gonna use it. This will give you the absolute center of the screen, no matter what resolution you have. Hint: use innerWidth and innerHeight if you aren’t gonna use a container. This’ll get you the viewport width and height (thus excluding scrollbars, toolbars and stuff like that).

Now that you have the center of your splash screen, you can calculate the offset of each part of the splash screen. For the Top part that’ll be the (vertical) Center minus the image height and minus the space between the 4 parts (20 pixels I’d guess). You can do the math for the other parts.

Now you have the position for every part of the splash screen. The next thing you want to do is hide them. There are various methods for this. I’d reccommend using CSS.
What I would do, is giving the parent (another reason for using a container), be it the body, or your new container the CSS property overflow hidden. Next, hide each element just outside the viewport. Use position absolute, and position them just outside the container. For example, the top part needs to be -62 pixels from the top. To be certain it’ll work amongst most browsers, I’d make it -72px, just to be safe.

Finally it’s time to animate the splash screen.
This is pretty easy, considering we already done the hard part.
Simply animate each Div (splash screen part) to the position we calculated earlier.

One thing to keep in mind, is that you animate the Div’s at the same time. Thus if you use the callback to fade in the name, it’ll be called 4 times. You’ll want to set some timeout, for the duration of the splash screen, before fading in the name.

I hope it’s a bit clear on what you need to do, the method I explained is easy, but explaining my method is a bit harder. Let me know if you don’t understand, and I’ll try to explain it a bit better. I’m sure there are other (better) ways, but this seems pretty straight forward to me. Good luck!