Tiny JS Library For Animating Text On Hover – saxxtext.js

Category: Animation , Javascript , Text | May 29, 2020
Author:theuitown
Views Total:221 views
Official Page:Go to website
Last Update:May 29, 2020
License:MIT

Preview:

Tiny JS Library For Animating Text On Hover – saxxtext.js

Description:

saxxtext.js is a lightweight JavaScript animation library for animate any text on cursor hover over & out using CSS animations.

Comes with 16 built-in animations and compatible with any 3rd CSS animation library (e.g. animate.css) or write your own CSS animations.

How to use it:

1. Load the stylesheet saxxtext.min.css and JavaScript saxxtext.js in the document.

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

2. Apply an animation of your choice to the target text and done. All possible animation names:

  • balance
  • bop
  • dribbbleDown
  • dribbbleUp
  • flipY
  • heartBeat
  • jello
  • jelly
  • rubberBand
  • shrinkyDown
  • shrinkyJump
  • swing
  • tada
  • titlyWhirl
  • wobble
  • zoomInUp
<h1>C</h1>
<h1>S</h1>
<h1>S</h1>
<h1>S</h1>
<h1>C</h1>
<h1>R</h1>
<h1>I</h1>
<h1>P</h1>
<h1>T</h1>
setAnimationSaxx ( 'h1' , 'saxx heartBeat' ) ;

3. Trigger the animation on hover over.

setSaxxMouseEffect ( 'h1' , 'saxx heartBeat') ;

4. Colorize the text on hover over & out.

setSaxxMouseEffect ( 'h1' , 'saxx heartBeat' , 'black' , 'blue' ) ;

5. You can also apply any custom CSS animations to the text. In this example, we’re going to use Animate.css for CSS animations:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
setAnimationSaxx ( 'h1' , 'animate__animated animate__bounce' ) ;
setSaxxMouseEffect ( 'h1' , 'animate__animated animate__bounce') ;

 

You Might Be Interested In:


Leave a Reply