SplitType

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

HTML

<script src="https://rawgit.com/lukePeavey/SplitType/master/splittype.js"></script>
<div class="text">Lorem ipsum 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>

SASS

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap')

$primary-bg: white

$text: #2d2d2d
$box-shadow: rgba(0, 0, 0, 0.15)

body, html
  height: 100vh
  width: 100vw

body
  background: white
  background-size: cover
  display: flex
  flex-direction: column
  overflow: hidden
  font-family: 'Spartan', sans-serif
  color: $text
\::selection
  // color: $text
  background: rgba(170,170,170, 0.3)

.heading
  margin: 80px 0 0 80px
  font-size: 64px
  width: max-content
  display: flex
  flex-direction: column
  > div 
    overflow: hidden
    > p
      width: max-content
      white-space: nowrap
      margin: 0
      line-height: 117%
.green
  color: #32c267
@for $i from 2 through 3
  div.heading
    > div
      animation-delay: 0
      &:nth-child(#{$i})
        > p
          animation-delay: $i * 0.025s
      
.slide-up
  animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both
  
@keyframes slide-up
  0%
    transform: translateY(100px)
  100%
    transform: translateY(0)

JavaScript

//https://github.com/lukePeavey/SplitType
setTimeout(()=>{


var instance = new SplitType( document.querySelector('.text'), {split: 'lines, words'} ); 
},5000)