Alphabets or Text filling effect in jquery

Question

I am developing a site for my client and he asked me to have the same below site kind a effect for his website

http://www.big.dk/

here you can see text is filling up and after it finish filling all the letters, homepage loads up. any idea how can I copy the same kind a effect or any code you can share. I try to rip the code but I think the site is using swf file not jquery as I couldn't rip it successfully.

Answer 1

To achieve the effect mentioned, I followed the following approach.

1. Create an image with required text on it ( StackOverflow for example).
2. Make the text on this image transparent. (I did it in Microsoft Powerpoint ).

This is how the image looks

Note that the text area is transparent . Download this image and open it in any image viewer to verify.

3. Then, Create a gradient . (You can use this for simplicity)

Combining the above resources, here is the fiddle .

 #color { position: absolute; width: 800px; height: 130px; background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF)); /* safari4+,chrome */ background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); /* opera 11.10+ */ background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); /* ie10+ */ background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); /* w3c */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1); /* ie6-9 */ } #text { position: absolute; width: 800px; height: 130px; background: url('http://i.stack.imgur.com/plKV4.png'); background-size: 100% 100%; } #slider { position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%; background: gray; animation: slide forwards 5s linear; } @keyframes slide { 0% { left: 0%; } 100% { left: 100%; } } 

 <div id="color"> <div id="slider"></div> <div id="text"></div> </div> 

I have used keyframes animation to fill the color.
It can be easily replaced by jQuery