10个关于视差滚动效果的教程和插件
标签:
视差滚动
效果
插件
| 发表时间:2012-03-21 17:38 | 作者:
出处:http://news.cnblogs.com/
近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求。其中有一种特效的效果很具有吸引力,它就是视差滚动效果。视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,可以带来非常出色的视觉体验。
随着这种炫酷的效果首次在 Nike 2011 年的 Nike Better World 项目中完美展现,如今这种视差滚动效果被越来越多的国外网站所应用,成为 Web 设计的热点趋势。因此,本文整理了十种关于此效果的教程和插件和大家分享,希望为你的网站设计提供一些灵感。
不过有两个方面需要读者注意:
- 以大量图片为特色的网站应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验;
- 某些网站页面在移动设备上的效果可能较之在 PC 上有所不同,一些功能也可能无法正常使用。
一个超级棒的插件,为你的网站提供纵深和滑动效果。
一份帮助你增加网页立体层次感的教程。
一份为那些急切想重现 NIKE 网站滚动效果的设计师准备的教程。
4、 用 jQuery 和 CSS 构建一个具有视差滚动效果的网站界面
一份为那些想在此领域了解的更深的设计师准备的例子和教程。
一份教程,在背景上帮你添加一些滚动的云彩。
6、 动画背景式的网页头部
用一个动画式的网页头部来让你的访问者为你欢呼吧!
7、 视差滚动教程
一份视差效果和内容同时出现的有趣的教程。
一个通过重复和动画运动产生立体错觉的插件。
9、 Stellar.js
一个为任何滚动元素提供视差滚动效果的 JQuery 插件。
10、 Curtain.js
允许你嵌入一个类似于幕布升起的效果到你的网页中。
英文原文: 10 Useful Tutorials And Plugins for creating Parallax and scrolling effects.
相关 [视差滚动 效果 插件] 推荐:
近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求. 其中有一种特效的效果很具有吸引力,它就是视差滚动效果. 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,可以带来非常出色的视觉体验. 随着这种炫酷的效果首次在 Nike 2011 年的 Nike Better World 项目中完美展现,如今这种视差滚动效果被越来越多的国外网站所应用,成为 Web 设计的热点趋势.
【精心挑选】六款帮助你实现惊艳视差滚动效果的 jQuery 插件
- - 博客园_梦想天空 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις ( parallaxis),意思是"改变". 在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
- - 博客园_首页视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 今天这篇文章就与大家分享30个视差滚动效果的网页设计作品,一起欣赏(以拖动滚动条方式浏览效果更佳). 36个非常有趣的互动网站设计作品范例.
LightBox -灯箱效果插件(非常漂亮)
- Pei - 博客园-首页原创精华区 Lightbox,也就是灯箱特效. 1)TopUp是一款基于jquery用于显示图片和网页的对话框组件. 2)CeraBox是一个基于MooTools的Lightbox灯箱插件. 它能够展示图片,SWF文件和其它任意可通过iframes或Ajax加载的HTML内容.
帮助你生成翻页效果的jQuery插件 – bookblock
- - 前端观察今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock,使用它可以创建动态的类似书本翻页效果的幻灯. 这个插件依赖于 jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件. 主要html代码如下,生成需要展示的图片内容:. 希望大家喜欢这个插件,如果你有任何问题,请给我们留言,谢谢.
jQuery 图片放大镜效果插件:jQZoom
- - 我爱水煮鱼在一些产品演示网站,常常需要这样的效果,把鼠标移到小图的上面,旁边出现这这部分的放大效果,通过这种方式让用户能够详细了解产品的细节. jQZoom 就是这样的一个 jQuery 插件,它能够让你网站的图片实现放大镜效果,把鼠标移到小图上,旁边出现大图的局部放大的部分,如下演示:. RSS 用户需要返回页面才能看到效果.
App-Folders:一个模拟 iOS 文件夹效果的 jQuery 插件
- - 我爱水煮鱼App-Folders 介绍. App-Folders 是一个可以模拟 iOS 文件夹操作的 jQuery 插件,点击文件夹,将周围的元素虚化(通过加深透明度实现),然后显示文件夹中的内容,并且这个插件可以同时在桌面和移动设备上浏览器上工作,适配性非常好. App-Folders 的文件夹元素中可以包含任何 HTML 元素,包括图片,文本,视频等等,并且每个文件夹都可以有自己的 URL 实现直接点击.
富文本插件Ckeditor的使用方法——效果很好
- - CSDN博客推荐文章 Ckeditor插件的下载首页: http://ckeditor.com/download,您可以根据自己的实际需要选择是Basic Package、Standard Package、Full Package. 这三个版本实际上就是插件包含的js数量不同,也就是插件功能的差别. 建议选择Full Package,因为ckeditor可以自定义插件的工具栏.
超棒的视差效果jQuery插件 - FractionSlider
- - Web前端 - ITeye博客如果你希望找到一款与众不同的 jQuery幻灯插件的话,F ractionslider/ 肯定会让你眼前一亮,和传统幻灯不同的是,它可以让页面中的任何元素生成独立的动画效果. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.
15个非常棒的jQuery无限滚动插件【瀑布流效果】
- - CSDN博客Web前端推荐文章现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流). 如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的内容自动加载,当你到达页面底部的. 这将鼓励访客的网站停留更长的时间,并进一步阅读的网站提供更多相关的内容,无需用户任何操作自动.