Baffle JS Magic

baffle-js-magic.markdown

Baffle JS Magic

Check Out Baffle.js amazing library for doing this effect https://camwiegert.github.io/baffle/

A Pen by Mr.Developer on CodePen.

License.

index.html

<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>

script.js

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);

style.css

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%); */
}