Finally I have had some free time and thought to try my luck with Codecanyon, which is a place were authors and coders get to monetize their works and for people to get some high-quality code/themes/templates/apps build-in and ready to go.
So I managed to “transform” my game of Easter-egg-hunting into a framework for gathering games (games where items drop and the player has to collect them) I added some code, removed much, and generalized the core to actually adapt and be manageable through a JS file that the user can alter to create his own game.
The template offers:
- mobile and modern browser support
- media-queries baked inside
- responsive gameplay
- auto pause when the player changes tab or browser loses focus
- highly customizable options like: background, items, gathering image, score, etc…
- High performace even on mobile devices, by using multiple canvases
- And per frame collision detection
So check it out, and buy if you also want to create your own gathering game…
Note: The template uses jQuery, jQueryUI for dragging, and GSAP to manage animation and update functions per frame.
I have just released a beta version of a JQuery plugin that manages text animation, it is super easy to use and the results are pretty impressive.
There is still work to be done and whoever wants to contribute is welcome to fork on github here
You can view the plugin page here -> http://netgfx.github.com/SplitText/
View EXAMPLES here -> http://www.netgfx.com/trunk/splitText/examples/examples.html
Or check out under the hood with a previous tutorial that I wrote here -> http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/
If you like it, drop me a line below, also if you find a bug make sure to file it on github
Recently Greensock added some new cool features to their animation JS Engine, these target specifically css3 animations and animating css3 properties.
So I thought to create a little demo showcasing some of these cool new features.
This Image gallery moves on 2 axis, horizontally for viewing different images and “vertically” or “in-time” if you prefer for viewing different galleries.
You can view a rough DEMO here
You can read more about his findings here: svg-css-injection
So after injecting the SVG inside the DOM I thought of why shouldn’t we try and animate it (no one likes static images right?), some simple things like change color gracefully, scale it or even programmatically create a simple animation of it.
I will show here how we can use simple tools like JQuery and TweenMax from Greensock and animate a simple SVG graphic.
View a DEMO here: AnimateSVG DEMO
This is a tutorial about how to create a simple slideshow element with dynamicaly loaded images and some cool animations.
PreloadJS is a rather new JS library that aims to help with the loading of various assets, in our case it will provide us with the info of when the images are fully loaded and a value of percentage completion of this task.
A tutorial for creating an animated circle imitating Google+™ circles effect, which includes drag & drop (Jquery UI) functionality and the animating power of TweenLite/Max (greensock).
This tutorial will demonstrate how to create a parallax effect with jquery and tweenMax for its animation needs.
View the new Tutorial here: Parallax effect v2
Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.
!Note: best viewed with a modern browser as I used css3 for the shapes.
Check it out: http://www.netgfx.com/trunk/animateJS/
Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/