Text Animation with splitting js ( source code )

Text Animation with splitting js ( source code )

Sign Up For Fiverr And Get 20% Off Your First Order:

SIGN UP

Add Splitting js file from plugin

<script src="splitting.min.js"></script>

HTML


<h2 data-splitting> DIVINECTOR</h2>

CSS


* { box-sizing: border-box; } body { font-family: poppins; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 100vh; background-color: #262626; } h2 { font-weight: 900; font-size: 10vw; line-height: 10vw; } h2 span { animation: animate 3000ms infinite both; animation-delay: calc((var(--char-index) + 1) * 400ms); text-transform: uppercase; text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ; } @keyframes animate { 0% { font-size: 8vw; } 60% { font-size: 12vw; } 100% { font-size: 8vw; } }


INITIATE THE PLUGIN


<script> Splitting() </script>