jQuery背景视差插件ios-parallax.js

所属分类:其他,UI-动画效果,背景

 4648  43  查看评论 (2)
jQuery背景视差插件ios-parallax.js ie兼容10

使用方法

在页面中引入jqueryios-parallax.js文件。

<script src='path/to/jquery.min.js'></script>
<script src='path/to/ios-parallax.js'></script>

 HTML结构

使用一个<div>元素来作为背景图片的容器。

<div id="top-image">
    <div id="content" class="container center-block">
        <!--放置内容-->
    </div>
</div>

CSS样式

为背景图片容器设置如下的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
   
});
相关插件-动画效果,背景

超酷jQuery水波倒影特效插件

lake.js是一款可以制作水波倒影特效jQuery插件。
  动画效果
 6477  49

jquery颜色动画插件jquery.colorAnimations.js

jquery颜色动画插件jquery.colorAnimations.jsjquery
  动画效果
 18259  8

css3 3D翻拍效果

纯CSS打造的3D翻转效果
  动画效果
 9222  69

jquery下雪效果

jquery雪花飘落
  动画效果
 25165  59

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    gzwebsj 0
    2017/7/14 14:19:54
    不错的源码,多谢分享!
        ELMO_LU0
        2017/7/18 13:40:56

        恩是不错

    回复
取消回复