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

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

 6193  65  查看评论 (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转动的星球

PLANETARIUM这个插件将使你能够创建一个互动的星球
  动画效果
 13766  29

12款常用动画图标

12款常用动画图标
  动画效果
 3734  71

页面切换效果

CSS3网页过渡页面切换效果
  动画效果
 11776  52

jquery按钮点击波纹效果

jquery按钮点击波纹效果插件waves.js
  动画效果
 10404  70

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

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

        恩是不错

    回复
取消回复