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

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

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

简单实用的jQuery和CSS3卡片自动翻牌特效

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backfacevisibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
  动画效果
 16848  49

canvas 雨滴

这款动画主要是模拟了下雨的场景,雨滴从空中飘落,落在地上溅起水花,整个过程模拟得相当逼真。更重要的是,这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度,鼠标左右滑动控制雨滴方向,鼠标上下滑动控制雨滴密度。
  动画效果
 4560  66

DynamicData更新版

用来显示动态更新的数据,修改之前点击stop无效的bug,并且优化按钮选项
  动画效果
 9226  9

纯css仿qq浏览器官网的彗星

仿qq浏览器官网的彗星,纯css
  动画效果
 12149  116

讨论这个项目(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

        不错

    回复
取消回复