Check Out Baffle.js amazing library for doing this effect https://camwiegert.github.io/baffle/
A Pen by Mr.Developer on CodePen.
Check Out Baffle.js amazing library for doing this effect https://camwiegert.github.io/baffle/
A Pen by Mr.Developer on CodePen.
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script> | |
<div class="container"> | |
<div class="data"> | |
Thanks Tala For Watching. | |
</div> | |
<div class="quote"> | |
</div> | |
</div> |
const text = baffle('.data'); | |
text.set({ | |
characters : '0cebn010101898010cebhcbe000010icbwebicwih1', | |
speed: 100 | |
}); | |
text.start(); | |
text.reveal(10000); | |
const text1 = baffle('.quote'); | |
text1.set({ | |
characters : '001cehwbec01100011habchb010100cehbce01', | |
speed: 100 | |
}); | |
text1.start(); | |
text1.reveal(25000); |
body{ | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
background: #0F2027; | |
} | |
.container{ | |
width: 100%; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.data{ | |
text-align: center; | |
color: #fff; | |
font-family: poppins; | |
font-size: 1.8em; | |
letter-spacing: 12px; | |
font-weight: 600; | |
margin: 0.5em 0; | |
/* position: absolute; */ | |
/* top: 50%; */ | |
/* left: 50%; */ | |
/* transform: translate(-50%, -50%); */ | |
} | |
.quote{ | |
text-align: center; | |
color: #fff; | |
font-family: ubuntu, poppins; | |
font-size: 0.8em; | |
letter-spacing: 12px; | |
font-weight: 600; | |
/* position: fixed; */ | |
/* top: 50%; */ | |
/* left: 50%; */ | |
/* transform: translate(-50%, -50%); */ | |
} |