Now your background will have a beautiful parallax effect that reacts to both the mouse cursor and the mobile devices’ accelerometer. After a few trials and errors, I was able to convert the “accelerationIncludingGravity” value into a usable data for my CSS3’s matrix transformation. Another benefit of using matrix is that I can also apply the scale and the position all in one go without having to call and animate multiple values.Īfter I had completed a test on the desktop, I realized that this will not work on mobile because there are no mouse events on smartphones and tablets, so instead of not supporting mobile, I decided to experiment on the new JS event called “devicemotion” which let me determine the state of the accelerometer. This is not a good user experience so in the end, I decided to use CSS3’s transform matrix, which allows me to move the background relative to the center coordinate without having to calculate it myself. First I began experimenting with a function that moves the background position, but it creates a little jaggedness in the animation when the cursor enters the image and the background position needs to be reset to be moved. The concept is to apply the image as a background and move the background position according to the cursor’s position on mouseover. How to Use Interactive BG How does this work? Note: This plugin has been tested on Chrome, Firefox, Safari, on desktop. Since there’s no mouse movement event on mobile, this plugin will utilize the accelerometer instead to create a parallax effect on iOS and Android. Introducing Interactive BG (Background), a plugin that will let you create an interactive background or any element on the page that reacts to your cursor movement. Today, I have decided to experiment on a different kind of parallax effect that reacts to cursor movement and mobile accelerometer instead. The most common one is a parallax effect that reacts to the user’s scroll behavior.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |