tek-tek.js v1.0.0
Tek.js
text writer with many options, using pure javascript author: @giath_atrash
© copyright: 2022 - 2023
USAGE :
first we need to define the class
var tek = new Tek();
we can add some options
var tek = new Tek({
animationSpeed: 50, // defualt
separator: ',,', // defualt
});
now we have to add new element to our class
we can use cssSelector div, .class, #id, etc...
tek.el('.element');
you can add words using html attribute like :
<div data-words="Hello,,world"></div>
or you can make it as array when adding new element like :
this method is asynchronous function
tek.el('.element', ["Hello", "World"]);
RUN :
to run the writer you need the item_id you can get it after adding new element now we can run using run() method with item_id as argument
tek.el('.element', ["Hello", "World"]) .then(item_id => { tek.run(item_id); });
run() method is asynchronous too, but what we can do with it ??
tek.el('.element', ["Hello", "World"]) .then(item_id => { tek.run(item_id).then(() => { // last word of array just finshed // this place will fire once // so do something console.log("i'm have done!"); }); });
what if we have 999 item ?? how we can run all of it using getAll() method this method is asynchronous too
tek.getAll(items => { for(i in items){ items[i].run(); } });
ITEM OPTIONS :
tek.el('.element', [...words], { colors: [], // object colorMode: "convert", // string delay: 1500, // number writeSpeed: 100, // number hideMode: "backspace", // string loop: true, // boolean });
colors : defualt: [] type: object
- #hex
- rgb()
- hsl()
- colorName
example :
colors: ["red", "#f0f", "rgb(0,0,0)", "hsl(0deg 100% 200%)"],
colorMode :
defualt: convert type: string
- blink
- fade => recommended
- convert
delay :
defulat : 1500 type: number how much time need to wait for start removing the word
writeSpeed :
defualt: 100 type: number words write and remove speed
hideMode :
defualt: backspace type: string
- fadeOut
- backspace
loop :
defualt: true type: boolean
METHODS :
el() :
add new element to class @param {string} cssSelector @param {object} words - can be blank if data-words exits @param {object} options @return asyn function
run() :
start writing @param {string} item_id @return asyn function
getAll() :
get all items @return asyn function
stop() :
stop writing and looping @param {string} item_id @return asyn function
delete() :
delete item from class for no running it again @param {string} item_id @return asyn function
info() :
get item info and options @param {string} item_id @return asyn function
2 years ago