1. 首页
  2. 设计网站
  3. 正文

网站设计动效介绍:视差滚动

  人类有很多中视觉错误,最为典型的就是“小儿辩日”。其中一个小孩说道:我认为太阳刚出来的时候距离我们近,到中午的时候距离我们远,因为太阳刚出来的时候大,而中午的时候小。

  这就是一种视觉误差。

  而3D效果就是这样实现的。因为我们的眼镜认为近处的东西大而远处的东西小。3D效果的实现就是让不同事物移动速度不同,让后景移动慢,而前景移动快,这就会给人眼造成前后景的错觉。

  早在2011年开始,3D开始在电影制作中流行,这种技术也引入到网站设计中,设计人士将其称之为“视差滚动”。视差滚动以及发展了八年时间,我们对常用的几种视差滚动类型进行总结。


  前慢后快

  主要是应用在图片切换的时候,当滚动鼠标的时候,两张图片同时移动,但是前一张移动速度看,后一张移动速度快,后一张覆盖前一张完成切换。这种视差滚动,会让切换图片的过程更为平滑。

  浮动移动

  图片浮动在页面上,当移动鼠标的时候,浮动的画面移动速度较快,但是背景移动速度较慢。如果浮动的部分,配合动画,会让整个页面极富动感。

  后动前不动

  背景进行移动,但是前景的图片固定不移动,另外,背景可以在移动的过程中进行更换。这种设计,可以产生“不动若磐石”的视觉感受。

  图片文本的移动

  通过将图片和文本叠加在一起,并使它们以不同的速度移动,当我们滚动时,页面似乎在不断地变化并形成新的组合。

  首尾相连

  一直向下滚动鼠标,在主页的底部,相同类型的动画从早期在页脚重复一次,使网站完整的圆圈。

  滚动条视差

  网站是由几个带视差滚动条组成的。每个长条提供了一个不同的呼叫行动按钮,并拥有酒店场地和设施的图像或视频。放置在每个条带中心的文字移动的速度与背景照片的移动速度略有不同,达到了一种流畅、易于观察的效果。

  如上,我们介绍了几种常见的也是易于设计的视差滚动。总结一下,视差滚动可以实现如下几种目的:让平面具有3d效果,拥有了前景和后景;让不同板块和图片的切换更为平滑;让新的图像的出现更具新颖性和闯入感。

  所以,视差滚动作为网站视觉营销的一种,在网站设计中可以尝试和实践。

    延伸阅读

  • 小程序名字修改的技巧规则

    我们都知道名字的意义,名称作为陌生人最先的认知,在物质喧嚣的时代,如何从众多名称中脱颖而出给陌人生留下一个良好且深刻的印象,这至关重要。随着小程序开发越来越多,运营者在给小程序...

  • 小程序商城怎么运营?

    小程序商城在当今电商领域日益受到瞩目,成功运营这样一个平台对于每个经营者而言都至关重要。那么,我们该如何着手呢?一、确立品牌方向首先,我们要清晰地定义自己的品牌在市场中的位置。...

  • 自建商城运营秘籍,吸引顾客有妙招!

    新建网站的运营与维护之道一、明确核心产品的市场定位要让新建的商城网站在竞争激烈的市场中脱颖而出,关键在于精准地定位核心产品。选择具有市场潜力的热销产品,并突出其独特之处,是吸引...

  • 小程序商城推广完全指南

    随着小程序商城的日益兴起,如何在竞争激烈的市场中脱颖而出成为了关键。小程序商城的推广方式多种多样,以下是一些有效的策略:1.公众号与小程序的结合:商家可以将小程序与公众号绑定,...

  • 推广引流方法有哪些,裂变营销什么意思

    推广引流方法有哪些,裂变营销什么意思除了各公域平台,另一个比较重要的引流场景,就是在微信中。一方面做信社交性强,对于身边用友的链接更紧密,微信上也会以群、公众号的形式聚集一群有...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/1434.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();