Author: | luisangelmaciel |
---|---|
Views Total: | 186 views |
Official Page: | Go to website |
Last Update: | September 17, 2021 |
License: | MIT |
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>