9 Pretty Cool Text Effects – Toxel CSS

Preview:

Description:

A set of 9 pretty cool text effects written in CSS/CSS3 and JavaScript.

Text Effects Included:

• Slash colors
• Confetti
• Heartbeat
• Fade and grow
• Typing
• Luzz neon
• Glitch
• GlitchOne
• Door

How to use it:

1. Load the necessary JavaScript and CSS files.

<link rel="stylesheet" href="css/toxel.css" />
<script src="js/script.js"></script>

2. The HTML.

<!-- .slash-color -->
<p class="slash-color ">.slash-color</p>
<!-- .confetti -->
<div class="confetti" onclick="throwConfetti() "> .confetti <small>  ¡touch me!  </small> 🎉 </div> <br>
<!-- .heartbeat.-->
<b> <i class="fa fa-heart heartbeat "></i> .heartbeat </b>
<!-- .fade-and-grow -->
<div class="fade-and-grow">
  <div class="item-fade-and-grow">
      <div data-text=".fade-and-grow" class="linktext-fade-and-grow">.fade-and-grow</div>
  </div>
</div>
<!-- .txt-type-->
<p><b>.txt-</b>
  <span class="txt-type" data-wait="300" data-words='["type", "tYPE", "TypE", "Type"]'></span>
</p>
<!-- .luzz-neon -->
<div class="luz-neon ">
  <b><span>.</span>lu<span>z</span>-n<span>e</span>o<span>n</span>
</div>
<!-- ..glitch -->
<p class="glitch " data-text=".glitch">.glitch</p>
<!-- .glitchOne-->
<p class="glitchOne " data-text=".glitchOne">.glitchOne</p>
<!-- .door -->
<center>
  <div class="trapdoor ">
    <div class="top door">
    </div>
    <div class="bottom door">
    </div>
    .trapdoor
  </div><br><br>
</center>