日期:2011/11/03 来源:Queness 编译:GBin1.com
介绍
视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 它带给web设计和开发很大的反响。几乎每个人都在讨论。我对于这个创新的特效也非常的欣赏。这个技巧综合了大图片,滚动,数字计算等技巧,为了能够精确的计算合适的位置和时机来展示这种视差效果。
当然这个特效的使用也需要权衡, 在研究这个特效的过程中,我也看到了很多失败的案例。整体的性能即使在最新的浏览器和主机上的运行也非常拖沓。其次,设计上的关联有时候也需要非常严密的计划,有些实现让我们觉得非常困惑,甚至让你有些恶心。
如何实现视差滚动 parallax scrolling
这里有俩个非常好的教程,可以一步一步帮助大家实现一个parallax scrolling的特效,希望大家能够喜欢:
Behind the scenes of Nike Better World
这个是来自Smashing杂志的教程,教你如何一步一步实现Nike better world的特效。
One Page Website
另外一个教程来自Web Design Shock。对于视觉设计者来说特别有用。
更多的例子
以下我们列出了一系列使用视差滚动效果的网站,希望带给你灵感。其实有些没有使用视差效果,但是我觉得他们也值得大家研究滚动特效。
这不是一个视差滚动,但是非常有趣的会缩放每个页面
这也不是一个视差滚动,当你滚动时,它会触发每一个动画
这个不是视差滚动特效,不过很聪明的使用PNG文件堆积生成很有吸引力的动画效果
原文来自: 来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感
分享到:
相关推荐
视差滚动parallax插件是一款类似海浪翻滚的视差滚动动画效果。
vue-parallax 快速60fps视差滚动效果组件
简单,轻量级的的视差引擎,智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的,光标的位置来代替。
视差滚动parallax插件是一款类似海浪翻滚的视差滚动动画效果。
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。今天这篇文章就与大家分享30个视差滚动...
带上下箭头jQuery视差滚动特效是一款带索引按钮,上下返回箭头的jQuery视差滚动插件parallax。
jq视差滚动框架特效是一款视差滚动响应式框架,能够在电脑、平板和移动设备中良好的呈现。 jq视差滚动框架特效图:
jquery.parallax-scroll, 在垂直页面滚动上,平滑视差效果 jquery.parallax-scroll使用requestAnimationFrame和 CSS3 3D 转换在垂直页面滚动上平滑视差动画。浏览器支持Chrome 30 ,Firefox 34 ,Safari 7.1 ,I
该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架,因此您可以按照自己的方式自由地构建代码。 资料来源: : 主页: : 推特: 快速开始 选择以下选项之一: 从下载最新的稳定版本...
HTML5视差滚动特效,里面附有详实的demo
react-native-parallax-scrollview, 我们都应该deserve视差的ScrollView组件 演示 安装这里软件包具有响应本机元素的依赖关系。 首先安装 RNE:yarn add react-native-elements最后使用纱线或者npm安装这里软件包:...
视差滚动 JS+css视察滚动 视差滚动 JS+css视察滚动 视差滚动 JS+css视察滚动
jQuery+swiper.js幻灯片图片视差滚动轮播特效,非常棒的一款带标签的jQuery图片视差切换代码。
React本机视差滚动 ScrollView的组件,该组件: 具有视差背景 具有视差前景 标头固定或粘滞 可以嵌套在其他视图中(FlatList,SectionList) 适用于iOS和Android 安装 $ npm install @monterosa/react-native-...
NULL 博文链接:https://justcoding.iteye.com/blog/2026606
简单,React灵敏的视差滚动效果。 特征 在移动设备上工作 如果浏览器支持,则自动切换为 零依赖 简单(?)api 演示版 CDN < script src =" ...
视差滚动特效是一款不错的整页滚动显示插件,适用于个人或公司整站介绍。
html5全屏页面视差滚动网站特效
####ScrollView 视差项目示例。