gsaw-JS v0.3 - More powerful, still just as easy: Configuration Options & Virtual Stylesheet Injection! - The Scipio Files #13
Hi everybody, I'm very excited to announce the release of gsaw-JS version 0.3! For this version, I implemented some feature requests from @flauwy and @fabiyamada. And that was actually pretty hard to do, but - as far as I'm concerned myself - a "must-have" feature as well!
In a nutshell, these were the request features to be implemented:
- @fabiyamada: add some "prism"-like background / border animation effects;
- @flauwy: keep gsaw-JS really easy to use, only HTML configurations needed on the user side.
The technical challenge involved: animating pseudo elements, that don't even exist in the CSS, via JavaScript, without touching the JavaScript...
Of course both feature requests - that I fully support - are valid. However, they're also pose a technical challenge to implement because it's not so easy via JavaScript animation instead of CSS3 Animations to animate pseudo elements. The effect @fabiyamada wants, involves animation the background and borders of an element, using another element. And that requires using an :after pseudo element in CSS. It's called a "pseudo element", kind of like a sibling of a "real" html element, because it doesn't really exist in the html DOM. It's a "CSS thing", yet JavaScript manipulates DOM elements. And of course those can be programmed manually, but that defeats the purpose of gsaw-JS and @flauwy's request: to keep gsaw-JS extremely easy-to-use, without the need for any JS skills and/or complex programmatic instructions, yet powerful.
The technical solution: injecting virtual stylesheet nodes at runtime
So... what I thought of, since GSAP also includes a "CSSPlugin.min.js", I can read pseudo element properties, and via "CSSRulePlugin.min.js" I can write pseudo element properties. So the only thing needed, is to create / inject "a virtual stylesheet at runtime", and use that!
Well so I did! :-)
// if needed, inject an extra stylesheet at runtime
if ( typeof gsaw_sheet == "undefined" )
{
gsaw_sheet = (function() {
var style = document.createElement("style");
style.appendChild(document.createTextNode("")); // webKit hack
document.head.appendChild(style);
return style.sheet;
})();
}
And another solution: allow configurable user-defined CSS properties using a data attribute object
As a means to keep the configuration side of things for the gsaw-JS user on an html level, with a tiny bit of css maybe, I decided to use the html data-attribute, like so:
<a href="" class="gsaw-border-ripple inline-block" data-gsaw-config='{"borderColor": "rgb(67, 185, 139)", "borderWidth": 5}'>Border Ripple</a>
For animation tweaking / configuration, the end user now only needs to change the object property values inside data-gsaw-config, and I'll just parse those in gsaw-JS via:
var config = JSON.parse($(this).attr("data-gsaw-config")) || {};
Cool huh! :-)
Added 5 more effects
These are - for now - the effects I've added using the technology as described above:
POW: Here is proof of my code commits to GitHub, regarding this v.0.3 version
v0.3 GitHub Commit: https://github.com/realScipio/gsaw-js/commit/ffe33546519ac7531d647a9798c19e5627c59e24
What's next for gsaw-JS v0.4?
More effects utilizing these new technical mechanisms of course! Now the sky's the limit! Please, feel free to suggest me more effects, because now I can add a lot more! ;-)
Please enjoy using gsaw-JS v0.3!!!
Posted on Utopian.io - Rewarding Open Source Contributors
This orogonial wark is going to the moon! XD hahah
I copied the files to my github the other day but is there a way to keep it synchronized?(I am pretty sure there is short word for that)
I really love how smooth this ones look!
Is it possible to achieve the effect of a bg image growing? I just did one with CSS3 and it looks clumsy :(
I am a little sorry not sorry for causing a little trouble with my suggestions/ideas :P
Yes, you need to git pull the gsaw-js repo, after a git clone ;-)
You forked it! ;-) Try to read up about using git via the macOS terminal Fabi! It's not so really easy to use!
And you didn't AT ALL cause trouble: you made a great suggestion and now that I found a technical way to conveniently implement it (virtual stylesheet node injection & parsing the JSON "css object" via the html data attribute (
data-gsaw-config="") we are now ready for MANY MORE COOL EFFECTS! SO you only helped to guide gsaw-JS to grow in the right direction! Thumbs up for your ideas! :-)Yay! I hope to have another cool idea soon :)
I will check the pull stuff :D
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thanks Utopian [mod]! Bleep! Bleep!
:p
gsaw-JS v0.3 is the best your support for future developments
@scipio
Thx! Try to clone it via
git cloneand have some fun with it on your own computer!Hmm i understand this post..And truly helpful this post and content...I appreciate to your concept...Carry on your activity...Best of luck...
Yes powerful
Ultra powerful it is indeed! ;-)
good~
thank you your post very help me
Great post. Thanks for sharing.
You're welcome!
it's a helpful post.essential information. thanks
Pretty essential indeed!
There are a lot of opportunities to earn money and answer the exploitation through the Internet
Ehmm... that's true but what on earth has this comment of yours to do with gsaw-JS v0.3 ???
thanks for imformation
rikwes your links github postet
Prost!
great work @scipio
Stylish!
Hey @scipio I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x