javascript - 重新创建文本动画(来源内)

Question

我想重新创建在该网站主题的屏幕视频中看到的文本动画:http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276

这是向您展示动画的视频: https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing

我不确定从哪里开始，并且到目前为止通过我的搜索找不到类似的东西，我愿意接受任何创建它的东西，比如 jQuery。感谢您的帮助!

Answer 1

我会用两个绝对定位的文本来完成此操作，一个是灰色(或半透明)，第二个是顶部设置为overflow:hidden。然后我只需为第二个容器的宽度设置动画。

你觉得这个主意怎么样？ :)

编辑:稍作调整，但想法相同 - 为您 fiddle :http://jsfiddle.net/Lr4PQ/

非常重要的 CSS 规则:

white-space: nowrap;

防止当文本节点的宽度小于文本时断行。

编辑2:当然，背后的想法可以让你使用纯CSS来实现结果，jQuery的作用只是动画宽度。

HTML:

<div class="container">
  <div class="text upper">You`re the boss</div>
  <div class="text ">You`re the boss</div>
</div>

CSS:

body {
    background:#000;
}
.container {
    position:absolute;
    left:30%;
    top:20%;
    width:auto;
    /*position container as You wish*/
}
.text {
    text-transform:uppercase;
    font-family:sans-serif;
    color:#FFF;
    opacity:.2;
    white-space: nowrap;
    font-size:30px;
}
.text.upper {
    position:absolute;
    opacity:1;
    overflow:hidden;
    width:0%;
}

jQuery:

$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);