1.引入包

<script src="js/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>

2.设置

设置视差元素的随页面滚动的速率

data-stellar-background-ratio="0.3"  //数值越大滚动越快

凡是需要做视差滚动的都需要加上样式

 background-attachment: fixed;

3.初始化

$(function () {
$.stellar({
horizontalScrolling: false,
verticalScrolling: true,
});
});

==============================================================

$.stellar({
// 设置滚动的方向是“竖直方向”还是“水平方向”,或者两个方向都有
horizontalScrolling: true, //默认水平方向开启滚动
verticalScrolling: true, //默认竖直方向开启滚动
// 设置全局偏移
horizontalOffset: 0, //默认水平偏移为0
verticalOffset: 0, //默认竖直偏移为0
// 窗口加载完毕或者改变大小时是否刷新滚动元素
responsive: false, //默认不刷新
// 设置滚动方式
// 可以选择 'scroll', 'position', 'margin' 或者 'transform'
// 或者 使用自己定义的 'scrollProperty' 插件.
scrollProperty: 'scroll', //默认为 'scroll'
// 设置定位方式
// 可以选择 'position' 或者 'transform'
// 或者 使用自己定义的 'positionProperty' 插件.
positionProperty: 'position', //默认为 'position'
// 设置两种滚动效果的开关
parallaxBackgrounds: true, //默认开启背景滚动
parallaxElements: true, //默认开启元素滚动
// 滚动元素滚动到视口(viewport)以外时是否隐藏
hideDistantElements: true, //默认为隐藏
// 自定义元素如何出现和消失
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
});

stellar.js 视差滚动的更多相关文章

  1. js 视差滚动 记录备份

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 用 Stellar.js 制作视差滚动效果

    参考 http://doc.bropaul.com/Stellar.js/docs/ https://github.com/markdalgleish/stellar.js#download http ...

  3. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  4. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  5. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  6. 【转】视差滚动(Parallax Scrolling)效果的原理和实现

    原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...

  7. 视差滚动(Parallax Scrolling)插件补充

    13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...

  8. 视差滚动(Parallax Scrolling)效果的原理与实现

    视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点:    1)直观的设计,快速的响应速度,更合适运用于单页面    2)差异滚动 分层视差    页面上很多的 ...

  9. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

随机推荐

  1. codeforces 496A. Minimum Difficulty 解题报告

    题目链接:http://codeforces.com/contest/496/problem/A 题目意思:给出有 n 个数的序列,然后通过删除除了第一个数和最后一个数的任意一个位置的数,求出删除这个 ...

  2. Oracle rowid

    本文讨论的是关于oracle从8i开始引进object的概念后的rowid,即扩展(extended)的rowid:1.rowid的介绍先对rowid有个感官认识:SQL> select ROW ...

  3. Eclipse字符集设置方式

    默认的字符集是GBK 1.windows->Preferences...打开"首选项"对话框,左侧导航树,导航到general->Workspace,右侧Text fi ...

  4. CentOS修改主机名和网络信息

    1.修改主机名称 [root@centos ~]# vim /etc/sysconfig/network打开文件,修改以下内容并保存 NETWORKING=yes #使用网络 HOSTNAME=cen ...

  5. Spark SQL &#160;inferSchema实现原理探微(Python)

    使用Spark SQL的基础是“注册”(Register)若干表,表的一个重要组成部分就是模式,Spark SQL提供两种选项供用户选择:   (1)applySchema     applySche ...

  6. tomcat启动报错总结

    错误一 webapps\ROOT does not exist or is not a readable directory 错误原因:在tomcat的server.xml的context中配置了不存 ...

  7. 关于Apache配置虚拟主机后在局域网中让其他电脑访问

    #-----------adxssp------------# NameVirtualHost *:80 <VirtualHost *:80> ServerName www.b.com D ...

  8. org.hibernate.PersistentObjectException: detached entity passed to persist

    简单地来看,将一个游离的对象要被持久化(save)时报错. 我们知道要持久化对象时候,通常Hibernate会根据ID生成策略自动生成ID值,但是这个对象ID已经有值,所有抛错.这个错误会出现在配置如 ...

  9. es6学习笔记--Interator和Generator(以及for-of的用法)

    这几天学习了遍历器和生成器,看着资料学,有点雾里缭绕的感觉,让人忍不住放弃,还好多看了好几遍,怼着资料里的例子让自己学会了Interator和Generator.   Interator,中文简称:遍 ...

  10. Jenkins调度Selenium脚本不能打开浏览器解决办法

    前提:在Myeclipse里面可以启动起来浏览器,在Jenkins中不能启动浏览器 原因:以程序的方式安装了jenkins,jenkins就成了windows的一个服务了,默认是设置为自动启动的如下图 ...