$(function(){
    $(window).scroll(function(){
        var top=$(this).scrollTop();
        $(".abc").css({transform:"translate3d(0px,"+-(top/3)+"px,0px)"})//需要设置视差的元素
    });
});

//本例主要通过css3的transform中3D元素来实现元素的平移，让绝对定位的元素通过window.scroll事件来触发平移

Jquery——简单的视差滚动效果，兼容PC移动端的更多相关文章

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

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

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

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

  3. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  4. css实现视差滚动效果

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

  5. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  6. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  7. [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  9. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

随机推荐

  1. Android开发输入法遮盖屏幕底部按钮

    方法一: 在你的activity中的oncreate中setContentView之前写上这个代码: getWindow().setSoftInputMode(WindowManager.Layout ...

  2. POJ2513-Colored Sticks

    /*思路:类似图论中“一笔画”问题,两根木棒的相连接的端点是一样的颜色,(a,b)--(b,c)--(c, d)....方法:trie树+并查集, 利用trie树建立字符串和某一个节点的映射,并将这些 ...

  3. php预定义$_SERVER实例，所有$_SERVER开头的都是预定义服务变量。

    <style> body{ background:#EEE; } </style> <?php header("Content-type:text/html;c ...

  4. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

  5. MySQL学习（一）MySQLWorkbench（MySQL可视化工具）下载，安装，测试连接，以及注意事项

    PS:MySQLWorkbench是MYSQL自带的可视化工具,无论使用哪个可视化工具,其实大同小异,如果想以后走的更远的话,可以考虑使用命令行操作数据库MYSQL.可视化工具让我们初学者更能理解数据 ...

  6. ThinkPHP学习（一）

    下载3.2框架后,解压缩到web目录下面,可以看到初始的目录结构如下: 3.2版本相比之前的版本自带了一个完整的应用目录结构和默认的应用入口文件,开发人员可以在这个基 础之上灵活调整.其中, Appl ...

  7. C++作用域

    作用域通常和变量捆绑在一起,限定了变量可用范围,同时也规定了变量的生命周期:何时创建.何时销毁.作用域通常分为:全局作用域和局部作用域. 全局作用域(全局变量) 在所用函数体外部定义的变量就是全局变量 ...

  8. 一步一步开发Game服务器（二）完成登陆，聊天

    我知道这样的文章在博客园已经多的大家都不想看了,但是这是我的系列文章开始,请各位大神见谅了. 多线程,线程执行器,(详见),socket通信相关 (详见) 本人blog相关文章测试代码,示例,完整版s ...

  9. React Native系列文章

    React Native版本升级的正确姿势 WebView JS与RN进行通讯 用API网关把API管起来 React-Native 给客户端来个「同音词模糊搜索」 30天React Native从零 ...

  10. 第三方登录插件.NET版XY.OAuth-CSharp

    XY.OAuth-CSharp GitHub:XY.OAuth-CSharp OSChina:XY.OAuth-CSharp 第三方登录插件.NET版 使用 首先,从NuGet上安装"XY. ...