<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script> <div class="container"> <div class="data">Text Reveal Animation</div> </div> <script> const text = baffle(".data"); text.set({ // characters : '█>< <█░█▓ ██▒▓░ <▓▓ ▒▓>▒█ ▓▓<> ▓// ██▒█ ▓▓░▓', characters : '~!@#$%^&*()-+=[]{}|;:,./<>?+-•~!=*', speed: 120 }); text.start(); text.reveal(4000); </script>

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); html, body { margin: 0; padding: 0; width: 100%; height: 100vh; background: #121212; } .data { transition: all 0.5s; text-transform: uppercase; font-family: 'Poppins', sans-serif; color: #ffffff; font-size: 30px; letter-spacing: 10px; font-weight: 600; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }