SplitType

by Константин Дралюк

HTML

<script src="https://unpkg.com/[email protected]/umd/index.min.js"></script>
<button>
  split toggle
</button>
<div class="text">Lorem <b class="color: #000">ipsum</b> dolor sit amet, consectetur adipisicing elit. Corporis dolores, repudiandae, placeat eligendi cumque recusandae. Nihil, tempore voluptatibus laudantium corrupti eaque sunt exercitationem cumque molestias, blanditiis eveniet magni expedita
  temporibus. ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, tortor eu consectetur egestas, nisi tortor luctus enim, ac semper sapien dui quis sem. Fusce consectetur libero in mi efficitur, tempor convallis ligula tempor. In porttitor
  neque in lorem tincidunt euismod. Vestibulum maximus ultrices ligula, eget rutrum diam venenatis vitae. Donec ut ipsum id nulla tempor bibendum in ac nunc. Pellentesque condimentum consectetur dui, suscipit ultricies odio tempus sit amet. Nunc sodales
  accumsan dictum.
</div>

CSS

body {
  background-color: #fff;
}

.text {
  color: red;
  font-size: 24px;
}

.text .word {
  background-color: #eee;
}

button {
  margin: 5px 0;
}
.word{
  animation: fly 5s 5s both;
}
.word:nth-child(1){
  animation-delay: 1s;
}
.word:nth-child(2){
  animation-delay: 2s;
}
.word:nth-child(3){
  animation-delay: 3s;
}
.word:nth-child(4){
  animation-delay: 4s;
}
@keyframes fly{
  to{
    transform:translate(10px,10px) rotate(20deg)
  }
}

JavaScript

//https://github.com/lukePeavey/SplitType
let i = null;
document.querySelector('button').addEventListener('click', () => {
  if (!i) {
    i = new SplitType(document.querySelector('.text'), {
      split: 'lines'
    });
  } else {
    i.revert();
    i = null;
  }
})