Текстовый эффект, который скользит вверх в скрытой области переполнения

Question

Я ищу, как создать эффект, подобный этому,

https://goodkidsagency.com

Где текст "ТВОРЧЕСКОЕ АГЕНТСТВО ДЛЯ ДАРНЫХ БРЕНДОВ"

ЭтоВыглядит очень просто, но я не могу понять, как это сделать.Я использую HTML, CSS и jQuery.Так что я не знаю, есть ли плагин или что-то.Может быть, я ищу с некоторыми неправильными ключевыми словами, не знаю.

Answer 1

Я создал демо, используя некоторые 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>
        

Answer 2

вы пробовали gsap или kute.js сценарии, хорошо иметь дело с анимацией текста или всего.