3 Simple Tools To Make JavaScript Easier For Mobile Devices

by 10 Best Design

With the web browsing experience increasingly moving to mobile devices, it makes sense for designers to keep orientation sensors in mind. Let's say you create a page featuring text or graphic boxes with shadows; these are fairly common elements of web design, and they could certainly benefit from responding to the orientation of the screen.

If you search on GiHub for the KeyFrames app, you will come across a neat project maintained by a Minneapolis developer who enjoys bundling CSS tricks he likes into a single app. In essence, KeyFrames bundles quite a few CSS properties into a single app with a friendly user interface. You get a preview of the results while the CSS code is generated, and the most recent feature added to KeyFrames listens to smartphone sensors for the purpose of adjusting the shadows.

What KeyFrames does for the shadow tricks is coded in Vue; it looks for the box and generates appropriate shadows based on the user's input and adjustment. The offset gap, spread, and blur can be set by means of sliders. The available design options include colors and layers. Every animation can be created, viewed, and executed without having to switch between the code editor and the browser.

JavaScript libraries that move shadows around include Vanilla-Tilt.js and Tilt.js; these are essentially lightweight animations that do not require dependencies or even CSS, but they do call for jQuery. In addition to shadows, you can also use these libraries for parallax scrolling and glare effects. With these libraries, you are essentially listening for certain display orientation events detected by the device's tilt sensor. If you wish to lock the animations so that they only unfold on certain actions, you can add code to disable the X or Y axis; this is similar to the "lock screen" feature on the quick settings of Android.

Yet another library you may be interested in for projects involving display position sensors on mobile devices is GyroNorm.js, which is available on GitHub. As for the functionality of animated shadows, they would mostly apply to interactive projects such as mobile browser games. For more information click here https://v.redd.it/n20pjc6zjx051.