This is the second part (and most recent) of a parallax tutorial and animation using GSAP TweenMax. Before we begin a little bit of theory behind the parallax effect.
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
Here’s an example of the final effect
See the Pen Parallax with Tweenmax by Michael Dobekidis (@netgfx) on CodePen.
Recently I read a very interesting article about some css animations. One of my favorites was the one with the menu that looks like a fallback for mobile devices. So I thought to replicate the effect (with some twist) with greensock TimelineMax (you can also use TimelineLite).
Here is what the end effect will look:
See the Pen Menu Animation by Michael Dobekidis (@netgfx) on CodePen.
The article for CSS animations can be found here:
I have been struggling with the lack of replay procedures in HTML5 gaming, with flash things were quite easy because we could save all of our game sessions as movies or swf files that could be later on viewed. With HTML5 we don’t quite have that, or it is not as easy. So I was thinking of ways to produce movies from canvas.
And then it hit me… images can produced as urls and canvas can be exported as an image, and what are continuously changing images? A movie!
So I went on and made a codepen about this. And quite frankly it kinda looks awesome. Of course some more brilliant minds than mine could dig into this and help me make it truly useful for all.
So let’s see the pen first. The procedure is as follows:
We click record and move the box around
Then we stop and we watch the movie that was produced.
See the Pen Record & playback for canvas by Michael Dobekidis (@netgfx) on CodePen.
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.
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