`
jjfat
  • 浏览: 289300 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

UI 
阅读更多

日期:2011/11/03  来源:Queness  编译:GBin1.com

介绍

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

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

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

如何实现视差滚动 parallax scrolling

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

Behind the scenes of Nike Better World

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

One Page Website

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

更多的例子

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

Sony Tablet

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

Lipton Ice Team

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

Manufacture d‘essai

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

Lutopi

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

Mohanbalaji

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

Vertaa verkkoja

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

Ben the body guard

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

Mark Lawrence Design

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

Unfold

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

Bunkai Kei

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

Beer Camp

这不是一个视差滚动,但是非常有趣的会缩放每个页面

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

Buero Buero

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

RapidBoot

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

Reverenddanger

这也不是一个视差滚动,当你滚动时,它会触发每一个动画

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

Netlash

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

AP-O

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

Cantilever Chippy

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

Beautiful Explorer

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

JanPloch

这个不是视差滚动特效,不过很聪明的使用PNG文件堆积生成很有吸引力的动画效果

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

Unfinished Business

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

原文来自: 来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感

分享到:
评论

相关推荐

    10个优秀视差滚动插件

    视差滚动(Parallax Scrolling)是一种网页设计技术,它通过让背景图像以不同的速度移动,来创造出一种深度感和立体感,使用户在浏览网页时有更丰富的视觉体验。这种效果通常应用于单页网站或者长滚动页面,以增强...

    JS视差滚动插件Parallax

    **JS视差滚动插件Parallax详解** 在网页设计中,视差滚动是一种创新的交互技术,它使得背景元素以不同的速度移动,创造出深度感和立体感,为用户带来独特的浏览体验。Parallax插件正是实现这一效果的JavaScript库,...

    视差滚动parallax插件.zip

    视差滚动(Parallax Scrolling)是一种网页设计技术,它使得背景图像在用户滚动页面时以不同的速度移动,从而创建出深度感和立体效果。这种视觉效果常常用于增强网站的用户体验,使页面更具吸引力和互动性。在本...

    vueparallax快速60fps视差滚动效果组件

    Vue.js 是一个流行的前端JavaScript框架,它以组件化...总的来说,vue-parallax为Vue.js开发者提供了一个强大且易用的工具,用于构建高性能的视差滚动效果,提升了用户体验,同时也展示了Vue.js生态中的创新和灵活性。

    jQuery教学-简单好用的视差滚动特效Parallax Effect

    **jQuery 教程:探索简单易用的视差滚动特效 Parallax Effect** 在网页设计中,视差滚动特效(Parallax Effect)已经成为一种流行趋势,它通过创建深度感和动态视觉体验来提升用户互动性。jQuery,作为一个轻量级、...

    Python库 | parallax-1.0.2-py3-none-any.whl

    "parallax"库可能是一个用于处理图像、数据或可视化效果的库,因为"parallax"一词通常与视差滚动有关,这是一种网页设计技术,通过创建深度感来增强用户体验。然而,没有更多的详细信息,我们只能推测它的功能。在...

    视差滚动parallax插件特效代码

    视差滚动(parallax scrolling)是一种在网页设计中广泛使用的创新技术,它通过让背景元素以不同的速度移动,来创建深度感和动态效果,使浏览者仿佛置身于一个三维空间。这种效果通常会增强用户的交互体验,使网站更具...

    视差轮播图-高级质感切换特效-HTML源码

    在网页设计中,视差滚动(Parallax Scrolling)是一种流行的视觉效果,它使得背景元素以不同的速度移动,从而创建出深度和立体感,给用户带来独特的浏览体验。本资源提供的"视差轮播图-高级质感切换特效-HTML源码...

    parallax-scrolling-website-demo

    "parallax-scrolling-website-demo" 是一个针对这一技术的实践项目,旨在帮助初学者了解和掌握视差滚动的实现方法。 **CSS 视差滚动** 在 CSS 中实现视差滚动主要依赖于 `transform` 和 `scroll-snap` 属性。`...

    30个让人兴奋的视差滚动(Parallax Scrolling)效果网站

    视差滚动(Parallax Scrolling)是一种创新的网页设计技术,它通过使页面的不同部分以不同的速度滚动,营造出一种深度感和立体效果,从而增强用户的沉浸式浏览体验。这种技术利用视差原理,即近处的物体比远处的物体...

    视差滚动特效.zip

    视差滚动特效是一种流行且富有创意的网页设计技术,它为用户提供了一种独特而引人入胜的浏览体验。在“视差滚动特效.zip”这个压缩包中,可能包含了一个用于实现这种效果的JavaScript插件或者相关代码示例,文件名为...

    jq视差滚动框架特效.zip

    通过阅读说明和查看示例,你可以更深入地了解如何将"jq视差滚动框架特效"整合到自己的项目中。 在开发过程中,需要注意兼容性问题,因为不是所有浏览器都支持CSS3的transform和translate3d。为确保广泛的浏览器兼容...

    Parallax-Scroll-View-Item-Example:视差滚动视图项目示例。 看截图

    【标题】"Parallax-Scroll-View-Item-Example"是一个关于视差滚动视图项目的实例,通过查看项目截图可以直观地理解其效果。视差滚动是一种常见的UI设计技巧,通常用于增强用户界面的视觉深度和动态感。在移动应用和...

    jQuery全屏视差滚动效果

    8. **插件使用**:在提供的参考示例中,可能有一个现成的jQuery全屏视差滚动插件,使用前需要了解其配置选项和用法,通过`$("#your-element").parallax(options)`这样的方式初始化插件。 9. **自定义效果**:除了...

    HTML5视差滚动特效

    这种特效在用户滚动页面时,不同元素以不同的速度移动,营造出深度感和动态立体效果,仿佛是三维空间中的多层画面随着滚动而逐层展开。 视差滚动的关键在于JavaScript库的运用,例如Skrollr。Skrollr是一个轻量级的...

    jQuery+swiper.js幻灯片图片视差滚动轮播特效

    "jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术,它结合了jQuery库的便捷性和Swiper.js组件的强大功能,为用户提供了一种富有层次感和动态视觉效果的图片展示方式。 首先,我们来了解一下**...

    vue+Parallax.js | 视觉差特效

    通过结合Vue.js的响应式数据绑定和组件化开发,以及Parallax.js的视差滚动功能,我们可以轻松创建出交互性强且视觉效果丰富的网页应用。同时,还可以根据需求自定义各种参数,如视差滚动的速度、强度等,以适应不同...

    react-native-parallax-scroll:react-native的视差滚动视图

    React本机视差滚动 ScrollView的组件,该组件: 具有视差背景 具有视差前景 标头固定或粘滞 可以嵌套在其他视图中(FlatList,SectionList) 适用于iOS和Android 安装 $ npm install @monterosa/react-native-...

Global site tag (gtag.js) - Google Analytics