Parallax Scrolling in E-Learning #115: Challenge | Recap
How Can E-Learning Designers Use the Parallax Effect in Courses?
How many times have you learned to do something new in a software...
Published 10 years ago
Version 1.0
Blog Post
nope. it's all storyline. no gifs. no html5/flash. Just png layers and animations!
I am impressed. Did you cut the face into small pieces and then shift them slightly on different layers?
- So yes, I pulled a Hannibal Lechter(graphically), but think meat slicer front to back. A little tip of the nose, a little more for the cheeks etc. This part can be done in Photoshop or gimp, and you'll need them as pngs for transparancy. The REAL trick however isn't shifting layers it's shifting TIME. All the layers of Astumi are in effect where they ought to be. I simply applied the same animation to each layer, and staggered the time. Hope this helps!
** UPDATE: V2 does not use animations, it uses the same graphics on different slider thumbs, all affixed to the same slider variable. The difference here is that the sliders are incrementally different in length, thus making the parallax effect. As noted above, it is restricted to a single plane, in this case x, so a little of the effect is lost. So that is the trade off for having the slider work better.- Neat, thanks Richard. I am going to try this technique.