在jquery中的字母或文本填充效果

Question

我正在为我的客户开发一个网站，他要求我在下面的网站上对他的网站产生影响

http://www.big.dk/

在这里你可以看到文字正在填满，在填完所有字母后，主页加载。任何想法如何复制相同类型的效果或您可以共享的任何代码。我试图破解代码，但我认为该网站使用的是swf文件，而不是jquery，因为我无法成功将其删除。

Answer 1

为了达到上述效果，我采用了以下方法。

1. 创建一个包含所需文字的图片（例如StackOverflow）。
2. 使此图片上的文字透明。 （我是在Microsoft Powerpoint）中完成的。

这是图像的外观



请注意，文字区域为透明。下载此图像并在任何图像查看器中打开以进行验证。

1. 然后，创建一个gradient。 （为简单起见，您可以使用this）

结合上述资源，这里是fiddle。

＆＃13;
＆＃13;
#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%;
  }
}
＆＃13;
<div id="color">
  <div id="slider"></div>
  <div id="text"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

我用keyframes animation来填充颜色 它可以很容易地被jQuery

取代