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

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

 11813  93  查看评论 (3)
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
   
});
相关插件-动画效果,背景

小球碰撞(完全弹性碰撞)

给自己主页目录用这个的,顺便传上来。
  动画效果
 14248  114

可以在网页上拖动的水晶球特效

可以在网页上拖动的水晶球特效
  动画效果
 14979  60

jQuery+three.js雪花飘落动画效果

这是一款给人3D立体空间感的jQuery+three.js雪花飘落动画效果,canvas绘制雪花下雪动画特效。
  动画效果
 7681  58

点击效果Google Design 谷歌的设计团队

效果是 Google Design 也就是谷歌的设计团队博客用到了这个效果 , 当时的第一感觉就是 擦 ,google就是牛逼, 一个按钮点击也要酷到不要不要的了
  动画效果
 13294  170

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

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

        恩是不错

        Content、0
        2017/11/29 16:27:30

        不错

    回复
取消回复
  短信接口