Technical & Visual Animation Update

Image result for photography
I have been looking for codes that support mobile tilt image will move along with it, however, there was a hard time to find that specific effect that I need. I have been looking into tilt.js, vaillar.js and other sorts of css codes to support the sensor in the mobile. But those are not the effect I wanted to achieve, is been a hard to time find the right source. Until parallax.js a free source and plugin to use, that is a really easy and amazing plugin to use.

By just adding these few lines of code, it would work on both mobile and desktop. When your mouse moves it will follow along, it is open in mobile it will tilt with movement detected. 





The first thing is to have a container, nextly wrap it with other layers (div) with the image you want it to tilt. And that's it! It is so simple to use and fun to play with how big the movement you want it to tilt with.

It is nice to finally find the plugin I need, I will be applying this to my title page, main page, menu and pick between 4 nightmare page. It is a small detail I wish to add into my mobile interaction to future show nightmare is fake but yet move like it is alive.
 -----------------
Animation time! After the alpha test, I plan to finish having a full journey before beta test comes. This is the animation I did it medibang and export it to photoshop to make it into a GIF. I took me about 4 days to make this animation to work properly. 



How it looks like with the UI buttons
I did start coding on the next nightmare fall, but there still no animation for it so I wouldn't be showing it during beta test.

Reference 
Wagerfield, M (2013) PARALLAX.JS – Simple, lightweight Parallax Engine. [Online] Available at: http://designify.me/web-design/parallax-js-simple-lightweight-parallax-engine-that-reacts-to-the-orientation-of-a-smart-device/#.XHfhcogzaUl [accessed 16 Jan 2019]

Comments

Popular Posts