Technical & Visual Animation Update
![Image result for photography](https://cdn.photographylife.com/wp-content/uploads/2015/03/Nine-Berries.jpg)
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.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKjRAbv4PNYzGTLwL7EPleQ9Y8n4XEtI5HKm8oiDDNcVONuJekgGgwsBhngHScAntWHxHDXtq3E2SzBYBdDH_pvH9wofKitGDTvnmtmFOlm7UhGD44JND6bGCZR21ySoLsELfY3xJAzV4/s640/Screenshot+%2528671%2529.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__8-vcnTdDDv0kJOoFrTIMM9Z8tgApjVKemcepC4d9Ekn8cGRJw8vMGOTKBe3h_6GseKR4a04rH7QgGB6M082mKBcWwsCedXULusSdofM2zssUs0Ei4pUP36dxu1C2H6-w0RcVCr2zmA/s640/Screenshot+%2528672%2529.png)
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.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4aKZ8WTRbYs9TS2vsWp1tE2MyjzYcdxXuD3jqvd47VqS6c_1ku79B8ajJt-5IfQfIvwqKB3BuXJtisyD9yVb78r4JaiEDrVm1kwjiwc7XxLfyNK1ZX5kraPZDQfojnpyw9XlUsP2pUo/s400/lost11.gif)
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
Post a Comment