TAGON is a powerful addon to your html code which is written in javascript that provides you the modern functionalities in a simplified way also it's a free and Open source project
made with ❤ for the developers by MANIKANDAN SRINIVASALU
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/tagon@main/file/tagon.js"></script>
minify cdn
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/tagon@main/file/tagon.min.js"></script>
npm i tagon
this tag helps to blur the content in a html page
<blur-it value="2">
sample text
</blur-it>
attribute | value |
---|---|
value | 0.1 to n |
this element helps to popup an ALERT-BOX with a msg and you may also redirect the page after the selection of ok button in the popup box
<text-popup msg="your msg" goto="<filepath>">
sample text
</text-popup>
attribute | value |
---|---|
msg | you can writ e any message to it |
goto | the path EG: "/static/about.html" |
attribute | value |
---|---|
duration | starts from 0 (1000 = 1s) |
loop | no.of.times 1,2...N values (or) Infinity |
animetype | ease-in, ease-out, linear, ease-in-out |
deg | -x to x where { x = 0 to N values } |
move | -x to x values (default px) |
this tag helps you to move your content - vertically
<move-v move="100" duration="2000" animetype="linear" loop="Infinity">sample text</move-v>
this tag helps you to move your content - horizontally
<move-h move="-100" duration="2000" animetype="ease-in" loop="1">sample text</move-h>
this tag helps you to scale your content - vertically
<scale-v scale="2" duration="2000" animetype="linear" loop="Infinity">sample text</scale-v>
this tag helps you to scale your content - horizontally
<scale-h scale="3" duration="2000" animetype="ease-in" loop="1">sample text</scale-h>
this tag helps you to scale your content - both vertically and horizontally
<scale-it scale="2" duration="2000" animetype="linear" loop="Infinity">sample text</scale-it>
this tag helps you to animate your content - rotate to a degree
<rotate-it deg="-100" duration="2000" animetype="ease-in-out" loop="1">sample text</rotate-it>
this tag helps you to animate your content - rotate to a degree and comes back to the start position
<rotate-it deg="-100" duration="2000" animetype="ease-in-out" loop="1">sample text</rotate-it>
this tag helps you to directly access the chat page of the service provider
<whats-app number="091234567890" msg="hello" content="any content" image="path/sample.png" imgh="30px" imgw="30px" instyle="any-css-styling"></whats-app>
attribute | value |
---|---|
number | whatsapp number with country code |
msg | the predefined message you wish to get |
content | to display in the html page (use " " if no content) |
image | add png/jpg img (use " " if no image) |
imgh | height of image in px eg: 20px |
imgw | width of image in px eg: 20px |
instyle | write your custom css style for the content |
this tag helps you to write a simple timeline
<time-line info="2024" title="Project begin" detail="description about the title" side="left"></time-line>
attribute | value |
---|---|
info | timeline info eg:2003 , date , text etc |
title | heading |
detail | description about the timeline |
side | left or right |
icon | image (use " " if no image) |
want to style ? | do it with given below attributes |
infocolor, titlecolor, detailcolor, iconcolor | to color the fonts |
infomoveh, infomovev ,iconmove | move in directions (default px) |
iconheight, iconwidth, iconradius, iconborder | border use css style (use " " if no needed) eg:2px solid black |
all these read tags helps you to display their respective data in an html page
<read-json src="path/file.json"></read-json>
<read-xml src="path/file.xml"></read-xml>
<read-csv src="path/file.csv"></read-csv>
attribute | value |
---|---|
src | use local file or apis both works eg:jsonapi |
this is only for | -read-csv- |
thborder, tdborder | border with css eg:2px solid black |
thpad, tdpad | padding eg30px |
thbgcolor, thbgcolor | all color |
thalign, tdalign | left,center,right |
this tag displays the connectivity of the page to the network as offline / online and it displays on the screen only for 4 seconds if you need you can apply css styling to it
<net-info styleoff="write css for offline"
styleon="write css for online"></net-info>
this tag push you to the top of the page and completely customizable by css
<go-up text="write your text"></go-up>
this tag displays the progess of the page scrolling and it is fixed at the top
<scroll-progress barcolor="grey" progresscolor="violet" barheight="5px"></scroll-progress>
attribute | value |
---|---|
barcolor | secondary or basecolor |
progresscolor | primary or moving color |
barheight | height of the scroll progressbar |