Create an interactive moving background

Source: Internet
Author: User
Tags jquery library

The parallax of the page has many forms, the most common is the disparity effect that the user scrolls the page to form. Today's tutorial is a plugin that implements a variety of different parallax effects.

This plugin, called Interactive BG (Background), lets you create a parallax effect that is moved by a page background relative to the cursor movement. Because there are no mouse movement events on the mobile side, the plug-in uses accelerometers instead of creating parallax effects specifically for iOS and Android.

This plugin applies to chrome,firefox,safari,ie and has not been tested yet.

How to use Interactive BG

1. Working principle

Image as background, the background according to the position of the cursor movement and make corresponding movement. I first wrote a function to move the background, but I found that when the mouse moved in, the screen had a rough little animation, and the background needed to be reset. This is not a good user experience, and finally I decided to use the CSS3 transformation matrix, which allows the background to automatically point to the center without my extra calculations. Another advantage of using matrices is that I can use the range and coordinates directly without excessive numerical calculations.

After I finished the desktop side of the effect I suddenly realized that on the mobile side (even the smart phone) is not the same effect, because the mobile end has no mouse events. I decided to test the JS event "Devicemotion", which allowed me to determine the status of the accelerometer. After some tests and errors, I converted the accelerationincludinggravity value to the available data in the CSS3 matrix transformation.

Now your background on the desktop and mobile devices will have a beautiful parallax movement effect.

2. Implementation 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, available here, inserted into tags, Make sure you have a picture of the background, so you can refer to it as a background in your code.

Well, the laying marks are as follows:


<div data-ibg-bg= "Bg.jpg" ></div>.

Among them, DATA-IBG-BG link to the position of the background picture, suppose the path of the background picture in the file inside "Background.png", then change the above attribute to/background.png.

Calling a function now makes the background dynamic.

6 7
 animationspeed: "100ms",
contain:true ,

Explain the code above:

Strength: This option controls the strength of the background movement as the cursor moves. The higher the number, the greater the strength. The default value is 25.

Scale: This option controls the size of the background scaling. Accept 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 of the animation entry. Accept the CSS duration, such as "MS" or "2.5s". The default value is 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 overflows. The default value is true.

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

3. Advanced function

Response background

To get the most out of this plugin, use the extra code below to create a responsive interactive background! The following code will adjust your browser width and height to add and call:


6 7 8 9 10
$ (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 Acceleration meter

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


This plug-in is easy to use or not, who knows ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.