重新创建文本动画(源代码)

Recreating a text animation (source within)

本文关键字：文本 动画 源代码 创建 新创建      更新时间：2023-09-26

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

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

我不确定从哪里开始，到目前为止，通过我的搜索找不到任何类似的东西，我对任何东西都是开放的，比如jQuery。谢谢你的帮助!

我会用两个绝对位置的文本，一个灰色(或半透明)的第二个，顶部设置为overflow:hidden。然后对第二个容器的宽度进行动画化。

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

编辑:稍微调整一下，但想法是一样的-为您演奏: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);

动画是在纯CSS3中实现的:

<<p> jsBin演示/strong> HTML: 

<div class="modal">
  <h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>
CSS: 

.modal h1 {
    color: #626161;
    font-size: 30px;
    left: 50%;
    margin-left: -125px;
    margin-top: -15px;
    position: absolute;
    text-align: center;
    top: 50%;
}
.modal h1:before {
    animation: 5s ease 0s normal none 1 loading;
    -o-animation: 5s ease 0s normal none 1 loading;
    -ms-animation: 5s ease 0s normal none 1 loading;
    -moz-animation: 5s ease 0s normal none 1 loading;
    -webkit-animation: 5s ease 0s normal none 1 loading;
    color: #E2E2E2;
    content: attr(data-content);
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    white-space:nowrap;
}
@keyframes loading {
  0% { max-width: 0%; }
}
@-o-keyframes loading {
  0% { max-width: 0%; }
}
@-ms-keyframes loading {
  0% { max-width: 0%; }
}
@-moz-keyframes loading {
  0% { max-width: 0%; }
}
@-webkit-keyframes loading {
  0% { max-width: 0%; }
}

他们使用单个h1而不是覆盖两个h1元素并动画第二个的一个宽度的原因之一是为了更好的SEO，一个页面应该只包含一个h1元素。使用content: attr(data-content);也很有趣，所以…

相关文章：