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.
So I have to admit that I’m using Codepen alot, I’m also liking their “love/like” button. So I set to recreate the effect.
This pen is still quite sought after and has received many “likes”
This is the end result
See the Pen Codepen heart by Michael Dobekidis (@netgfx) on CodePen.
Continue if you want to know how it was build.
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:
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.