Create an interactive moving background

Last Update:2017-02-28 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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:

Html

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

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.

$ (". BG"). INTERACTIVE_BG ({
strength:25,
scale:1.05,
 animationspeed: "100ms",
contain:true ,
Wrapcontent:false
  });

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:

$ (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.

Conclusion

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More