2

GitHub - mohamedfrindi/TxtAnime.js: It is a JavaScript library, which contains m...

 1 year ago
source link: https://github.com/mohamedfrindi/TxtAnime.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

TxtAnime.js

It is a JavaScript library, which contains many beautiful and free text effects.

Demo

Installation

npm install txtanime.js

// ES 2015
import { TxtAnime } from "txtanime.js";

// CommenJs
const { TxtAnime } = require('txtanime.js');
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mohamedfrindi/TxtAnime.js/dist/TxtAnime.js"></script>
Put the JS file at the end of the body tag:
<script type="text/javascript" src="dist/TxtAnime.js"></script>
<!-- or -->
<script type="text/javascript" src="dist/TxtAnime.min.js"></script>
Add the element you want to apply the effect to
<body>

    <h2 class="element">Animation</h2>
    <!-- or -->
    <div class="element"></div>

</body>


<script type="text/javascript" src="dist/TxtAnime.min.js"></script>
<script>

    new TxtAnime(".element" , {
        // options
    })

</script>
To run TxtAnime.Js just add the following code in your script:
new TxtAnime(".element" , {
    // options
})

Options

new TxtAnime('.element',{

    // selector element
    // Accepts a string or selector element
    // You can specify a class directly || new TxtAnime('.element // .elements')
    // Or you can add a javascript selector  || document.querySelector('.element') or document.querySelectorAll('.elements')


  effect : 'txt-an-1',
  // Select the effect you want
  // Accepts 10 options : txt-an-1 <== 1-9
  // Data Type : string   
  
  delayStart: 0,
  // Determining the start time of the effect
  // delayStart : 0s | second
  // Data Type : number  
  
  delay : 0.05,
  // Determine when to move between items
  // delay : 0.5s | second
  // Data Type : number  
  
  duration: 0.7,
  // Determine the speed of effect
  // duration : 0.7s | second
  // Data Type : number  
  
  repeat : true,
  // To repeat the effect infinitely
  // accept 2 options : true | false
  // Data Type : boolean  
  
  repeatDelay : 2,
  // Replay the effect after
  // repeatDelay : 2s | second
  // Data Type : number  

  overlayBackground : "#004",
  // background color overlay
  // Accepts option : color
  // Data Type : string

  text : ['Go' , 'To' , 'Site'],
  // The words you want to apply the effect to
  // Accepts option : array 
  // Data Type : array  

});

// ----------------------------------------------------------------
// default options ------------------------------------------------

// txt-an-1
new TxtAnime(".element" , {
    effect: "txt-an-1",
    delayStart: 0,
    delay: 0.07,
    duration: 0.7,
    repeat: true,
    repeatDelay: 1,
})

// txt-an-2
new TxtAnime(".element" , {
    effect: "txt-an-2",
    delayStart: 0,
    delay: 0.5,
    duration: 0.7,
    repeat: true,
    repeatDelay: 3,
})

// txt-an-3
new TxtAnime(".element" , {
    effect: "txt-an-3",
    delayStart: 0,
    delay: 0.1,
    duration: 0.1,
    repeat: true,
    repeatDelay: 2,
})

// txt-an-4
new TxtAnime(".element" , {
    effect: "txt-an-4",
    delayStart: 0,
    delay: 0,
    duration: 1,
    repeat: true,
    text: ["Go", "To", "Site"],
})

// txt-an-5
new TxtAnime(".element" , {
    effect: "txt-an-5",
    delayStart: 0,
    delay: 0,
    duration: 1,
    repeat: true,
    text: ["Go", "To", "Site"],
})

// txt-an-6
new TxtAnime(".element" , {
    effect: "txt-an-6",
    delayStart: 0,
    delay: 0.07,
    duration: 2,
    repeat: true,
    repeatDelay: 3,
    overlayBackground: "#03a9f4",
})

// txt-an-7
new TxtAnime(".element" , {
    effect: "txt-an-7",
    delayStart: 0,
    delay: 0.05,
    duration: 0.07,
    repeat: true,
    text: ["Try", "Free", "Typed"],
})

// txt-an-8
new TxtAnime(".element" , {
    effect: "txt-an-8",
    delayStart: 0,
    delay: 0.05,
    duration: 0.02,
    repeat: true,
    text: ["Designer", "Developer" , "Freelancer"],
})

// txt-an-9
new TxtAnime(".element" , {
    effect: "txt-an-9",
    delayStart: 0,
    delay: 1,
    duration: 0.5,
    repeat: true,
    text: ["Desinger", "Developer", "Freelancer"],
})

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK