版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_22903531/article/details/78551436
写在前面的废话
ios-parallax.js是一款模拟苹果iOS10样式背景图片视觉差效果的jquery插件。该背景图片视觉差效果在用户移动鼠标时,背景图片会相应的摇晃,形成视觉差特效。
使用方法
在页面中引入jquery和ios-parallax.js文件。
<script src='path/to/jquery.min.js'></script>
<script src='path/to/ios-parallax.js'></script>
HTML结构
使用一个
元素来作为背景图片的容器。
<div id="top-image">
<div id="content" class="container center-block">
<!--放置内容-->
</div>
</div>
CSS样式
#top-image {
background: linear-gradient(
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2)
), url('../images/bg.jpg') no-repeat fixed;
position:fixed ;
top:0;
width:100%;
z-index:0;
height:100%;
}
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该背景图片视觉差插件。
$('#myContainer').iosParallax({
// How fast the background moves
movementFactor: 50,
// How much to dampen the movement (higher is slower)
dampenFactor: 36
});