ios-parallax.js是一款模拟苹果iOS10样式背景图片视觉差效果的jquery插件

ios-parallax.js是一款模拟苹果iOS10样式背景图片视觉差效果的jquery插件。该背景图片视觉差效果在用户移动鼠标时，背景图片会相应的摇晃，形成视觉差特效。

JavaScript 其它杂项

访问GitHub主页

共4Star

详细介绍

Simple iOS Parallax Effect

A simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS

Example Usage

Include jQuery and ios-parallax:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ios-parallax.js"></script>
<body>
    <div id="elem"></div>
</body>

Add a CSS background image to the target element:

#elem {
  background: url('bg.jpg') no-repeat fixed;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
  height: 100%;
}

Initialize the plugin:

$('#elem').iosParallax({
  // How fast the background moves
  movementFactor: 50,
  // How much to dampen the movement (higher is slower)
  dampenFactor: 36
});

Demos

Installation

npm install ios-parallax

Browser Compatibility

No formal testing done yet. Works on modern browsers such as Chrome and Firefox.

License

See the LICENSE file for license rights and limitations (MIT).

Contribute

If you would like to contribute, please read contributing.md for more info

Style

We're using the Google ES6 Javascript Style Guide

Notes

  • If you're defining the background-image property in a separate css file, make sure the CSS file is loaded before calling $.iosParallax();

TODO

  • Determine browser compatibility
推荐源码