https://github.com/amitguptagwl/tag-based-styler

Give dynamic styling to any HTML tag without code
https://github.com/amitguptagwl/tag-based-styler

Last synced: 24 days ago
JSON representation

Give dynamic styling to any HTML tag without code

• Host: GitHub
• URL: https://github.com/amitguptagwl/tag-based-styler
• Owner: amitguptagwl
• License: mit
• Created: 2016-12-28T07:27:56.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-28T11:07:23.000Z (almost 8 years ago)
• Last Synced: 2024-04-14T01:05:46.851Z (7 months ago)
• Language: HTML
• Size: 41 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tag Based Styler

Give dynamic styling to any HTML tag without code

[Demo 1](https://amitguptagwl.github.io/tag-based-styler/index.html)

[Demo 2](https://amitguptagwl.github.io/tag-based-styler/animations.html)

Example

```html



```

Control animation

```html







```

Currently supported attribute

* *a_delay* : in ms

* *a_count* : in ms or infinite

* *a_duration* : in ms

* *a_pause* : in ms

* *ds_hover* : class name

* *ds_toggleClick* : class name

* *ds_speed* : [possible values](http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp)

* *ds_direction* : [possible values](http://www.w3schools.com/cssref/css3_pr_animation-direction.asp)

* *ds_transform* : [possible values](http://www.w3schools.com/cssref/css3_pr_transform.asp)

* ** : 

## Grouping/Stacking

* Helps to stack child elements up or down

* You can push or pull an element to left, right, up, and down.

* You can assign an incremental property, like: font-size, opacity etc.

Example

```html



		

		

		

		



```

## Future Plans

Although this project is not under my dream projects but I'll add more features to this project if people like the concept.  There are some features in my mind

* **2 way binding** : If someone change the value of tag attribute, it'll be instantly update instead of calling jquery function to re-render the element.

* **more tag** : Currently you can not guide in tag itself what animation you want. So if you use jquery other animation libraries then animation control attributes are use less. So I'm planning to add more tags to say what animatin you want.

* **more animation** : Currently I'm using animation.css and font-awesome-animation.css for css animation. I'm planning to add more core animation styles which together can help you to create multiple animations on the fly.

* **Individual pull** : Currently an element of stack/group can be pulled or pushed.

* **natural language instructions** : a_effect="{after 30s easyBounce(300px,20px) to right(min:20px) on click and spin once and ... and break(like glass) in last},{repeat 30 times or upto 10s whichever is low},{do nothing for 2mins then restore(original state)}" 

* **Convert to compoonent** : Due the page load, CPU speed and other factors, provided tag attributes don't work perfectly. So I'm planning to create react(or riot or something else) based components so the enduser will not see any differene on any broweser. Because every milisecond is important :)

Press a star button above if you like this project.