jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了!

原文地址:http://www.goodfav.com/jquery-parallax-plugins-15494.html

parallax.js

parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene… Oh, you don’t have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.

freshD

The jQuery 3D Parallax Plugin magically animates your objects in a dynamic created 3D world. For those of you who don’t know what Parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer, the most front objects also transform themselves to the viewer’s point of view. Here’s a wiki link for something more indepth.

skrollr

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML. Actually, skrollr is much more than “just” parallax scrolling. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3.

A Parallax JavaScript library

All animations are done using CSS3 transformations whenever possible and fall back to normal CSS positioning when necessary.

superscrollorama

Clearly, Superscrollorama is amazing. Superscrollorama is a controller for animation. You add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

jParallax

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

plax

After doing the parallaxing illustrations for GitHub‘s 404 and 500 pages, he decided it might be fun to put together some kind of jQuery plugin to make it easier to do parallax stuff in the future.

Stellar.js

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.

CSS3 Parallax

Takes advantage of CSS3 3D transforms to create a real parallax effect. Responds to mouse movement. Device motion will be supported soon.

FractionSlider

FractionSlider is a jQuery plugin for image/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and css (every html-element can be animated).

sequencejs

Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles.

Parallax Content Slider

A simple parallax content slider with different animations for each slider element and a background parallax effect.

jQuery Parallax Slider

This plug-in has many options to let you customize the animation when a slide begins and ends for all the elements within it as well as the slide itself. You can add a delay before an animation begins and change its duration. You can change the animation to use any valid jquery easing name such as swing or linear. If you combine this plugin with the jquery easing plugin in your project, you’ll have access to many more easing options.

Parallax.js

Is a javascript framework allowing you to slide in pages of your site with having a parallaxing background. Parallax.js keeps pages in a structureless format, meaning you can absolutely control where pages come in and from where, even if it doesn’t make geometric sense. You add html elements, or pages, to Parallax.js and use the movement functions to slide them into view, pushing whatever was there out of the way. Very light weight, very cool. Just like fezes.

LayerSlider

LayerSlider is the most advanced ResponsivejQuery Slider Plugin with the famous Parallax Effect and optional 3D Transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site!

Slider Revolution

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

Scrolling Parallax

Scrolling Parallax is a jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website. Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.

parallax scrolling storytelling framework

Stevan ?ivadinovi?, the brains behind multi-plane side-scroller web comic Hobo Lobo of Hamelin, walks us through the development of the Parallaxer platform and gives a crash course on turning pencil drawings into transparent-background assets

- See more at: http://www.goodfav.com/jquery-parallax-plugins-15494.html

15+优秀的jQuery视差插件的更多相关文章

  1. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  2. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

  3. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  4. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  5. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

  6. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  7. Select-or-Die:灵活的 jQuery 下拉列表插件

    Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素.原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插 ...

  8. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  9. 移动开发必备!15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

随机推荐

  1. 开源项目live555学习心得

      推荐:伊朗美女找丈夫比找工作难女人婚前一定要看清三件事 × 登录注册   疯狂少男-IT技术的博客 http://blog.sina.com.cn/crazyboyzhaolei [订阅][手机订 ...

  2. HDU 2136 Largest prime factor

    题目大意:求出比给出数小的互质的质数个数. 题解:直接用筛法求素数,稍微改编一下,将原先的布尔数组变为数组用来记录信息就可以了. 注意点:大的数组定义要放在程序的开头,不要放在main里面,不然会栈溢 ...

  3. PhoneGap 3.0 安装

    PhoneGap 3.0  已经出来有一段时间了.3.0 提供了使用Node.js 安装,使用命令行创建.编译.运行项目.也就是可以抛弃eclipse,完全使用命令.记事本开发phonegap 项目了 ...

  4. HDOJ 1003 Max Sum(线性dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 思路分析:该问题为最大连续子段和问题,使用动态规划求解: 1)最优子结构:假设数组为A[0, 1 ...

  5. AndroidStudio 0.2.x 引入多模块Eclipse项目

    !!!!太他妈的累人了!整整折腾了两天!!!!!!! 不知从那个版本开始ImportModule... 从AndroidStudio的File菜单中消失了,在0.2之前的版本作为library的模块可 ...

  6. 五毛的cocos2d-x学习笔记01-创建项目

    终于准备开始学习cocos2d-x了.因为想和同学一起做游戏参加比赛,所以打算学习很热的Cocos2d-x.因为已经学习了C++,所以我想入门应该不是很困难.再加上官网有中文教程以及多不胜数的游戏开发 ...

  7. 使用R进行相关性分析

    基于R进行相关性分析 一.相关性矩阵计算: [1] 加载数据: >data = read.csv("231-6057_2016-04-05-ZX_WD_2.csv",head ...

  8. 我的Python成长之路---第八天---Python基础(24)---2016年3月5日(晴)

    多线程编程 什么是多线程,线程是操作系统能够进行运算调度的最小单位.他包含在进程之中,是进程中的实际运作单位.线程是进程中一个单顺序的空值六,一个进程可以并发多个线程,每个线程可以并行处理不同的任务. ...

  9. (转)requirejs:杏仁的优化(almond)

    使用场景 什么情况下需要使用 almond 呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如果能够去掉requirej ...

  10. IOS算法(三)之插入排序

    直接插入排序(Insertion Sort)的基本思想是:每次将一个待排序的记录,按其keyword大小插入到前面已经排好序的子序列中的适当位置,直到所有记录插入完毕为止. 设数组为a[0-n-1]. ...