Create interactive web-style mobile backgrounds

The parallax of the page has many forms, the most common is the parallax effect formed by the user scrolling page. Today's tutorial is a plugin that implements many different parallax effects. ?

This plugin is called Interactive BG (Background), allowing you to create a parallax effect that moves the page background relative to the cursor movement. Because there are no mouse movement events on the mobile side, this plugin uses the accelerometer instead of creating a parallax effect specifically for iOS and Android.

The plug-in is suitable for chrome,firefox,safari,ie has not been tested yet.

How to use Interactive BG

1. Working principle

Image as the background, the background according to the position of the cursor movement and make the corresponding movement. I first wrote a function that let the background move, but I found that the picture would have a rough little animation when the mouse moved in, and the background would need to be reset. This is not a good user experience, and finally I decided to use the CSS3 transform matrix, which allows the background to be automatically fixed to the center without me having to compute extra. Another advantage of using matrices is that I can use ranges and coordinates directly without the need for excessive numerical calculations.

After I finished the desktop side of the effect, I suddenly realized that on the mobile side (even the smartphone) is no way to have the same effect, because there is no mouse event on the mobile side. I decided to test the JS event "Devicemotion", which allowed me to determine the state of the accelerometer. After some experiments and errors, I converted the accelerationincludinggravity value to the available data in the CSS3 matrix transformation.

Now your background will have a nice parallax movement on your desktop and mobile devices.

2. Realization method

First, make sure you've included the latest jquery library (preferably 2.0.0 or higher), with the latest version, including Jquery.interactive_ Bg.js, can be obtained here, inserted into the label, make sure that you have a background as a picture material, in order to reference in the code as the background.

Well, the laying marks are as follows:

Html

....

Where the DATA-IBG-BG link to the background picture location, assuming the path of the background image in the file "Background.png", then the above attribute to/background.png.

Calling the function now makes the background vibrant.

$ (". BG"). INTERACTIVE_BG ({strength:25, scale:1.05, animationspeed: "100ms", Contain:true, WRAPCONTENT:FA LSE});

Explain the above code:

• Strength: This option controls the intensity at which the background moves as the cursor moves. The higher the value, the greater the strength. The default value is 25.

• Scale: This option controls the size of the background zoom. accepts normal CSS range values so 1 is the original size and is disabled at the beginning and end of the animation. The default value for the option is 1.05.

• Animationspeed (animation speed): This option controls the time scale at which the animation exits. Accept the CSS duration, such as "2.5s" or "MS". The default value is the number of Ms.

• Contain: If you set the scale data above 1, then if the value is true this will prevent the expansion of the object/background overflow container, when the value is False, the extended content will overflow. The default value is true.

• Wrapcontent: This option allows you to choose whether all the elements inside the container are moving with the cursor, or just a simple background effect. A value of true when all elements are ringing should function. The default value is False.

3. Advanced Features

Responsive background

To get the most out of the plugin, use this extra code to create a responsive interactive background! The following code adjusts the width and height of your browser, adding and calling it:

Js

$ (document). Ready (function () {$ (". BG"). INTERACTIVE_BG ();//Function Call}); Change background size on window resize $ (window). Resize (function () {$ (". BG >. IBG-BG"). CSS ({width: $ (window). Outerwidth (), Height: $ (window). Outerheight ()})

Interactive Background and Accelerometer

The advantage of using this plugin is that you don't have to do anything with your own hands. The plugin automatically detects the effect of applying the accelerometer rather than the traditional mouse event. Try to see the demo on your smartphone.

To learn more about web Design Tutorials , You can visit e-mentor network.

Create interactive web-style mobile backgrounds