首页 > 其他分享 >视差滚动不适合网页的5个原因

视差滚动不适合网页的5个原因

时间:2023-05-17 19:33:03浏览次数:45  
标签:滚动 效果 网站 站点 网页 视差 页面



视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素 在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品 商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。

 

来看看几个视差造成的错觉。

 

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为2013年网页设计的热点趋势,越来越多的网站应用了这项技术。

 


视差滚动效果是2013年最热门的网页设计趋势之一。但是,我预言2014年我们将会看到它慢慢消失,因为这个效果在实 现过程中存在太多问题了。如果你在网站中曾经创建或使用过视差滚动,你就会发现其中的一些端倪。下面,我列举出我认为视差滚动存在的负面因素,这些因素会 反过来会让网页设计倒退到其他的设计形式上。如果你认为我错了,欢迎你对这篇文章提出任何评论或反馈。

 

1、不利于SEO?

在标题里我用了疑问句,是因为我还没有对视差滚动对SEO造成的影响做深入研究。但是,我们将会失去一个站长对正规站点常用设置的优化选项:

  • url中没有关键词:采用视差滚动,你的得到的仅仅是一个url。你将不再有其他共同起作用的页面url。
  • 没有多个H1标签:在一个典型的视差滚动网站中,你仅能获得一个起作用的H1标签。
  • 更少的内部链接:把所有内容都放在一个页面,会降低你能控制的内部链接数量。不管你信不信,内部链接会将锚文本导向它们指向的相关页面。
  • 速度慢:速度能在一定程度上影响Google排名算法。如果你在一页中有太多内容,加载过程会降低页面速度,同时降低了页面排名的能力。

 

2、很难跟踪与分析

 

         传统站点允许通过不同的登陆页跟踪访问用户的行为。在视差滚动(站点),想知道单一页面的哪个区段为你的访问者提供了最大价值,这是个难事儿。对于视差滚动站点,也很难实施任何一种形式的A/B测试。

         不进行适当的跟踪分析,一个网站站长就不能通过改善页面或内容来提升网站流量和转化率。

 

3、增加了加载时间

 

         视差滚动需要一些jquery脚本的计算。你拥有越多的内容,脚本需要越长的时间来计算(页面上)每个元素的移动位置。对于网络环境不佳的用户,视差滚动 网站看起来就像是在爬行(那么慢)。这可不是个好的用户体验,所以我们应该仔细考虑什么时候,以及怎样最好地使用视差滚动。

 

4、在移动设备上无效果

 

         随着移动浏览器变得越来越流行,我们无法忍受一个网站设计在移动设备上无法使用。不幸的是,当你使用视差滚动时,这种事情发生了。目前也有能让视差滚动网 站工作在移动设备上的代码,不过那不是免费的。我们可能会在未来解决这个问题,但是现在,它仍旧是个能够降低网站可用性指标的东西,尤其是我们在移动设备 上使用时。

 

5、缺乏导航,浏览时会感到很烦人

 

         有些时候,我需要滚动到页面的最底端来找到我需要的信息,这很烦人。一些聪明的设计师使用了锚点链接,但“飞过”所有不需要的内容,最终到达我想要阅读或 了解的地方,仍旧让人觉得很烦。所有这些问题都归结为在视差滚动网站缺乏良好的导航设计。大部分网站只用了向下箭头作为唯一的导航方法,坦白来说,那并不 好用。你第一次用可能会觉得不错,但重复使用这样的网站后,你必然会希望有一种更快的方法来进行导航。

 

         所以,你对视差滚动的看法是什么呢?缺点比优点多?还是正好相反,优点比缺点多?

 

========================译后感=================================

         作为一种更优的呈现方式,视差滚动效果的网站给人一种耳目一新的感觉,能够在第一时间给网站访问者提供靓丽的视觉体验,会在一定程度上提升品牌识别度,让人印象深刻,这是它的优点,也是我们值得学习的地方。

         但从另一个角度看,确实如文中作者所述,该类网站也有诸多劣势。我也确实看到国内一些网站,最初是以视差滚动方式实现,后来又转变成常规站点。综合起优缺点,个人建议在以下场景,网站可以考虑采用视差滚动方式:

1、初创网站。如果其目的在于宣传品牌、产品,且无太多文本内容呈现时,可在初期上线视差滚动网站,让人先对其产生兴趣,留下印象。之后随着访客增多,内容完善后,再改回常规网站形式。

2、主题宣传站点。对于需要在某个时间段发布的活动宣传页面,需要尽可能为用户产生视觉上的冲击,可上线视差滚动站点。例如阿里、腾讯很多专题网站。

3、特殊行业站点。这类站点的特色也在于“宣传为主、突出视觉冲击力、内容有限”。如一些设计公司网站、游戏公司网站。

 

 

 

标签:滚动,效果,网站,站点,网页,视差,页面
From: https://blog.51cto.com/u_8895844/6293340

相关文章

  • 打开网页提示:欺骗性网站警告
    新部署的网站,其他平台打开都没有问题。使用Safari浏览器打开就提示欺骗性网站警告。 只这里找到一句话: https://www.apple.com.cn/legal/privacy/data/zh-cn/safari/点开图片中显示详细信息是可以继续访问但这体验也太不好了。......
  • Javascript执行原理 网页引入javascript的三种方式* javascript核心语法 数据类型 Typ
    Javascript执行原理:用户端发送请求到服务器端将js解析出来的数据(用户身份表示)绑定在请求路径中服务器端获取到参数后会响应客户端客户端通过浏览器解析响应的数据并将数据展现在浏览器上网页引入javascript的三种方式*:使用script标签<scripttype=“text/javascript”>aler......
  • 【Antd 】selsect 的 option 选项随页面滚动,或被遮挡解决办法
    <divstyle={{padding:100,height:1000,background:'#eee',position:'relative'}}id="area"><h4>可滚动的区域/scrollablearea</h4><SelectdefaultValue="lucy"style={......
  • DIV 随着滚动条 移动
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>codeby:haiw......
  • HTML5网页游戏开发
    HTML概述互联网上的应用程序被称为Web应用程序,web应用程序使用Web文档(网页)来表示用户界面,Web文档都遵循html格式,html5是最新的html标准HTML基础HTML是HyperTextMarkupLanguage(即超文本),它是通过嵌入代码或标记代码来表名文本格式的国际标准。它编写的文件扩展名是.htm......
  • css网页布局
    网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 头部区域头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的logo:CSS3实例.header{ text-align:center;padding:20px;}https://www.scsmld.com/jjs/......
  • element-plus + VUE3 项目 build 之后 el-cascader无法选中而且导致整个网页卡顿
    cascader不能用v-model接收值,需要改为model-value方式<el-cascadermodel-value="selRegion":options="RegionTreeCascader":show-all-levels="true"separator="-":props="{checkStrictly:true,expandTrigger:'hove......
  • MATLAB代码:基于多时间尺度滚动优化的多能源微网双层调度模型 关键词:
    MATLAB代码:基于多时间尺度滚动优化的多能源微网双层调度模型关键词:多能源微网多时间尺度滚动优化微网双层模型调度主要内容:代码主要是一个多能源微网的优化调度问题,首先对于下层多能源微网模型,考虑以其最小化运行成本为目标函数,通过多时间尺度滚动优化求解其最优调度策略,对于......
  • edge浏览器网页长截图插件(将页面宽度设窄也适用)
    该插件的缺点:有时会排版错误;对于有些页面,会缺少部分文字;不能从“只当前位置向下”截图,只能整个页面或可见区域。插件安装和使用科X上网;用edge访问:捕捉网页截图-FireShot的-MicrosoftEdgeAddons打开要截图的页面点击该扩展:或等待自动滚动完成:另存为图片或“复......
  • 滚动条样式自定义
    ::-webkit-scrollbar-track-piece{  width:1px;  height:1px;  background-color:#0c1e26;}::-webkit-scrollbar{  width:1px;  height:1px;  background-color:#16d0ff;}::-webkit-scrollbar-thumb{  width:1px;  heig......