收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3239|回复: 6

[界面] Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感

[复制链接]
发表于 2011-11-3 13:23:26 | 显示全部楼层 |阅读模式
介绍

视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 它带给web设计和开发很大的反响。几乎每个人都在讨论。我对于这个创新的特效也非常的欣赏。这个技巧综合了大图片,滚动,数字计算等技巧,为了能够精确的计算合适的位置和时机来展示这种视差效果。

当然这个特效的使用也需要权衡, 在研究这个特效的过程中,我也看到了很多失败的案例。整体的性能即使在最新的浏览器和主机上的运行也非常拖沓。其次,设计上的关联有时候也需要非常严密的计划,有些实现让我们觉得非常困惑,甚至让你有些恶心。

title.jpg

如何实现视差滚动 parallax scrolling

这里有俩个非常好的教程,可以一步一步帮助大家实现一个parallax scrolling的特效,希望大家能够喜欢:

Behind the scenes of Nike Better World

这个是来自Smashing杂志的教程,教你如何一步一步实现Nike better world的特效。

One Page Website

另外一个教程来自Web Design Shock。对于视觉设计者来说特别有用。

更多的例子

以下我们列出了一系列使用视差滚动效果的网站,希望带给你灵感。其实有些没有使用视差效果,但是我觉得他们也值得大家研究滚动特效。
Sony Tablet
1.jpg

Lipton Ice Team
2.jpg

manufacturedessai
3.jpg
... ...

原文来自: 来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感
发表于 2011-11-6 22:53:52 | 显示全部楼层
沙发顶起
回复 支持 反对

使用道具 举报

发表于 2011-11-15 14:12:29 | 显示全部楼层
板凳坐起 第二  
回复 支持 反对

使用道具 举报

发表于 2011-11-17 15:01:27 | 显示全部楼层
界面 - 学习ing
回复 支持 反对

使用道具 举报

发表于 2012-5-28 15:50:57 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2012-6-27 09:47:25 | 显示全部楼层
谢谢分享,学习了
回复 支持 反对

使用道具 举报

发表于 2013-6-16 11:19:05 | 显示全部楼层
正在学习如何制作,谢谢楼主!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-4-5 18:47 , Processed in 0.124688 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表