ONLY. letter animation

letter-spacing

by shrpne

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<h1 class="title" data-anim="">
  <span>Создаем присутствие</span>
  <span>в&nbsp;digital-среде</span>
</h1>

CSS

body {
  margin: 0; height: 500px; padding: 22vh 6vw 0 10vh; 
  background: url(http://v2.only.com.ru/img/promo-bg.jpg) no-repeat 50% 50%; background-size: cover;
  }
h1 {font-family: Segoe UI,sans-serif; line-height: 1.2; font-size: 38px; margin-bottom: 2.5rem; font-size: 8vw; color: #fff;}
span {display: block; letter-spacing: -0.2em; opacity: 0; transform: translateX(-25px); transition: 1.4s opacity, 1.4s letter-spacing, 1s transform;}
.is-loaded span {letter-spacing: 0; opacity: 1; transform: translateX(0);}

JavaScript

$(function() {
  setTimeout(() => {
    $('body').addClass('is-loaded')
  }, 200)
})