www.MarshallShort.me - the side project
Here at wwwDotweb we are currently working on a side project about everything Marshall is involved in. The website as of right now is just a cloud that all of his current tweets scroll through. The website might sound very simple as it is right now, however it was pretty complex to get the tweets to only appear in the cloud.
The cloud is actually a graphic built in to the background. We had to take the part with the cloud and chop it into 3 pieces. Then what we did was used a css property called z-index to place the top and the bottom peace at a z-index of 0. This allowed these 2 peaces to be on top of the rest of the page. The middle section has a z-index of -9999 which allows this peace to be layered as far back as possible. If you are very confused don't worry we will explain.
Working with z-index
In website design if you would like to layer images and text you can use a CSS function known as z-index. With z-index you can give your top layer an z-index of 0. Then if you would like to have something behind that layer you can give what you want to be behind it a z-index of -1 and so on. Giving different z-indexes will allow you to layer and stack stuff on top of each other. As we previously explained we gave the main background of the page a z-index of 0. Then for the cloud we gave it a z-index of -9999. This made sure that the cloud was in the background and the other 2 peaces where on top.
Now comes the fun part. After we assigned the image the proper z-index we gave the text a z-index setting so that it would appear above ontop of the cloud while sliding in behind the bottom piece and keep on scrolling up and behind the top piece. This allows the text to all appear as it is just appearing in the cloud as you scroll through the page.
We will continue to keep you guys up to date with more articles in the future on how we made this awesome side project work and all the hurtles we have faced along the way.