Question

我正在寻找如何使效果像这个一样

文字为“创造品牌的创新机构”

它看起来超级简单，但是我不知道该怎么做。我使用HTML，CSS和jQuery。所以我不知道是否有插件或其他东西。也许我在搜索一些错误的关键字，不知道。

Answer 1

您尝试过gsap或kute.js脚本，这对处理文本或所有内容上的动画非常有用。

Answer 2

我已经使用一些CSS和js创建了一个演示。试试吧：

jQuery(document).ready(function () {
    setTimeout(function(){
     jQuery('.header__title').addClass('show');
    }, 500);
});

.animated-text {
  display: inline-block;
  width: 100%;
  height: 9rem;
  overflow: hidden;
}
.header__title {
    color: #000;
    font-weight: 400;
    max-width: 32rem;
    opacity: 1;
    position: relative;
    text-align: center;
    z-index: 1;
    max-width: 60rem;
    font-size: 3rem;
    position: relative;
    transform: translateY(8rem);
    transition: transform 1s;
    text-transform: uppercase;
}
.header__title.show {
  opacity: 1;
  transform: translateY(0);
}
h1 em {
  position: relative;
}
.header__title em:before {
    background-color: rgba(249,214,61,.8);
    bottom: .05rem;
    content: "";
    height: 1.2rem;
    left: 0;
    position: absolute;
    right: 0;
    -ms-transform: scaleX(0);
    -ms-transform-origin: left;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left;
    -webkit-transition: -webkit-transform .9s cubic-bezier(.515,.005,.185,1) 1s;
    transform: scaleX(0);
    transform-origin: left;
    transition: -webkit-transform .9s cubic-bezier(.515,.005,.185,1) 1s;
    transition: transform .9s cubic-bezier(.515,.005,.185,1) 1s;
    transition: transform .9s cubic-bezier(.515,.005,.185,1) 1s,-webkit-transform .9s cubic-bezier(.515,.005,.185,1) 1s;
}
.header__title.show em:before {
    -ms-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="animated-text">
  <h1 class="header__title">
      Creative agency<br>for <em><i>daring brands</i></em>
    </h1>
</div>

在溢出隐藏区域中向上滑动的文字效果

2 个答案: