欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

这10个教科书级的网页,帮你搞明白视差滚动特效

发布时间:2017:11:25 23:09:34 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1421个文字,预计阅读时间4分钟
导语
在视差滚动网页的设计上,无论是移动端还是桌面端,如今的设计师都有了足够深入的探索,并且对于功能和体验上的挖掘,都有了比较成熟的经验。

  在视差滚动网页的设计上,无论是移动端还是桌面端,如今的设计师都有了足够深入的探索,并且对于功能和体验上的挖掘,都有了比较成熟的经验。无论是导航悬停式的滚动还是水平滚动和分屏3D特效,视差滚动这一设计趋势已经深刻地影响到了如今的UI设计。今天的我们将要推荐10个颇为值得学习的视差滚动网页设计作品,它们在设计上都有其独到之处。

  视差滚动特效

  视差滚动特效是用户在滚动页面的过程当中,页面中不同元素随之进行不同速率的运动,所营造出的接近3D的视觉效果。视差一词源于希腊语中的“Parallaxis”,意为变化,视差本质上是一种错觉,,实际上它也仅仅只是一种特殊的效果。前景元素之间、前景和背景之间运动速率的差异造就了这种效果。视差滚动特效为网站和APP营造出无缝顺滑的用户体验,这也是它的价值所在。

  1、Fluttuo:长滚动视差特效

推荐阅读:网页设计色彩搭配实例:绿色配色技巧

  

这10个教科书级的网页,帮你搞明白视差滚动特效

 

  Fluttuo 的页面设计足够优秀,流畅的动画,鲜明的色彩对比,干净的界面中文本字体显得华丽又沉稳,整个网站的视觉在最优秀的电商网站中,也算得上是突出。而视差特效的加入,则让整个网站的浏览和购物体验再一次提升。

  网站背景和前景的元素位于不同的图层,当预先加载的前景元素随着用户滚动的时候,视差特效就出现了。背景层承载着主要的内容,塑造整体风格,而前景的元素则协同展示产品细节和主要的故事。

  平滑的视差滚动特和传送带动画赋予了页面以良好的互动性,这一点和品牌“始终尝试新材料和新设计”的精神不谋而合。

  2、Hot Dot:水平视差特效

  

这10个教科书级的网页,帮你搞明白视差滚动特效

 

  Hot Dot 的视差特效略有一点差别,它的页面滚动方向是横向的。页面水平滚动的方向是从左到右,背景图像也不是固定的,这对于设计和开发而言,都更容易实现一些。

  整个网站不仅仅适合桌面端设备,而且对于触摸屏也颇为友好,你在iOS 和 Android 平台上也能拥有不错的浏览体验。水平的视差滚动还可以针对移动端进行响应式的适配,用户甚至可以在移动端设备上将浏览方向从横向切换为纵向,所有的屏幕内容都能相应地调整。

  3、Money Saving:简单的视差滚动首页设计

  

这10个教科书级的网页,帮你搞明白视差滚动特效

 

  这个银行网站模板采用了悬浮式下拉菜单栏,搭配手动控制的轮播图和长滚动视差特效。整个模板的UI设计风格走的是简约风,非常适合自定义修改。同时,它也采用了响应式的设计,这意味着用户可以在不同平台上享受浏览的乐趣。

  4、Dave Gamache:帮你了解视差动效

  

这10个教科书级的网页,帮你搞明白视差滚动特效

 

  Dave Gamache 的这个视差滚动网页的Demo是一个帮助所有人了解视差滚动网站的小样。当你浏览这个网页的时候,Dave 会为我们展示所有的元素是怎么运作的,视觉元素是如何淡入淡出的,图层是如何固定的,怎么在移动端设备上实现横向滚动的,非常赞。

  在这个Demo当中,Dave 给我们提供了这些重要的提示:

  你需要让所有的浏览器都能轻松地展示你的网站的视差动效。你要专注于视差动效最重要的属性,包括比例的控制,旋转效果和不透明度的控制。

  要学会如何在页面当中设计悬浮固定的元素,这些元素在页面中要谨慎使用。

  不要老去调整图像大小,浏览器并不能总是处理好这些问题

  5、NASA Prospect:交互式视差设计

  

这10个教科书级的网页,帮你搞明白视差滚动特效

 

  NASA Prospect 这个网页提供了一个不错的互动体验,通过网页呈现了行星采矿者的故事。在全球灾变之后,NASA 派出了他们去寻找人类散落在太阳系当中的物品。

  网站提供了简单、愉悦的互动性视差效果,音频能够营造出贴合场景的氛围,非常迷人。

  6、Hello Monday:3D视差特效的营造

  

这10个教科书级的网页,帮你搞明白视差滚动特效

 

  Hello Monday 这个网站创造了分屏式3D 视差特效,设计师让屏幕的一边用来展示设计案例,另外一边屏幕用来展示相关的描述和细节。每个设计案例都有不一样的视觉特征和独特的体验。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:实用全面!教你用Sketch Libraries构建组件库/设计体系

下一篇:想做好字体设计,先掌握这3个字体结构法则

  • 18900 文章总数
  • 2380265访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信