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

Question

我正在为我的客户开发一个网站，他要求我为他的网站制作相同的以下网站效果

http://www.big.dk/

在这里您可以看到文本正在填充，在填充完所有字母后，主页就会加载。知道如何复制同类效果或您可以共享的任何代码。我尝试破解代码，但我认为该站点使用的是 swf 文件而不是 jquery，因为我无法成功破解它。

Answer 1

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

创建一个带有所需文本的图像（例如Whosebug）。
将此图像上的文字设为透明。（我在 Microsoft Powerpoint 中做到了）。

图片是这样的

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

然后，为简单起见创建一个 gradient. (You can use this)

结合以上资源，这里是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>

我已经用keyframes animation填充了颜色
它可以很容易地替换为 jQuery

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

Alphabets or Text filling effect in jquery

javascript

flash

jquery