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

新闻 2024-9-21编辑：深圳网站建设阅读（）标签： 视差 网站设计

深【shēn】圳网【wǎng】站建设公【gōng】司 帮助企业提升网站形象,彰显公司实力,PC+手机+微【wēi】信+小【xiǎo】程【chéng】序【xù】
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的【de】服务【wù】】24RX365 为您提供1对【duì】1的专属VIP服【fú】务

　　人【rén】类有很多【duō】中【zhōng】视觉错误，最【zuì】为典型的就【jiù】是“小【xiǎo】儿【ér】辩日【rì】”。其中一个小孩说道：我【wǒ】认为【wéi】太阳刚出来的时候距离【lí】我们近，到中午的时候距离我们远，因为太阳刚【gāng】出来的时候【hòu】大，而中午的时【shí】候小【xiǎo】。

　　这就是一种视觉误差。

　　而3D效果就是这样实现【xiàn】的【de】。因【yīn】为我们【men】的眼镜认【rèn】为近处的东西大而远处的东西【xī】小。3D效果【guǒ】的实现【xiàn】就是让不同事物移动速度不同，让【ràng】后景移动慢，而前景【jǐng】移动快【kuài】，这就会给人眼造【zào】成前【qián】后景的【de】错觉。

　　早在2011年开【kāi】始，3D开始在电影制【zhì】作中流【liú】行，这种技术【shù】也引入到网站【zhàn】设计中【zhōng】，设计人【rén】士将其称之为【wéi】“视差滚动”。视差滚动以【yǐ】及发【fā】展【zhǎn】了【le】八年时间，我们对常用的几种视差【chà】滚动类型【xíng】进行【háng】总结。

　　前慢后快

　　主要【yào】是应用在图片【piàn】切换的时候，当【dāng】滚动鼠标的【de】时候，两张图片【piàn】同时移【yí】动【dòng】，但【dàn】是前一张移动速度【dù】看，后【hòu】一张移动速【sù】度【dù】快，后一张覆盖前一【yī】张完成切换。这种【zhǒng】视【shì】差滚动，会让切换图片的过程更为平滑。

　　浮动移动

　　图片浮动在【zài】页面上，当【dāng】移动鼠标【biāo】的时【shí】候【hòu】，浮动的画面移动【dòng】速度【dù】较快，但【dàn】是背景移动速【sù】度较慢。如果浮动的部【bù】分，配【pèi】合动画，会让整个页【yè】面极富动感【gǎn】。

　　后动前不动

　　背景【jǐng】进【jìn】行移动，但是前景的图片固定不移动【dòng】，另外，背景【jǐng】可以在移动【dòng】的过程【chéng】中进行更【gèng】换【huàn】。这【zhè】种设计，可以产生“不动【dòng】若磐石”的视觉感受。

　　图片文本的移动

　　通过将图【tú】片和文【wén】本叠加在一起，并使它【tā】们以【yǐ】不【bú】同的速度移动【dòng】，当我们滚动时，页面似乎在【zài】不【bú】断地变化并形【xíng】成新的组【zǔ】合。

　　首尾相连

　　一【yī】直向下滚【gǔn】动鼠标【biāo】，在主页的【de】底部，相同类型【xíng】的动画从早【zǎo】期在页【yè】脚重复【fù】一次，使网站完整的圆圈。

　　滚动条视差

　　网站是【shì】由几个带视【shì】差滚动【dòng】条【tiáo】组成的。每个长条提【tí】供了一个不同的呼叫行动按【àn】钮，并拥有酒【jiǔ】店场地和设施的图【tú】像或视频。放置在每【měi】个条带【dài】中心的文字移动【dòng】的【de】速【sù】度与【yǔ】背景照片的移动【dòng】速度【dù】略有【yǒu】不同，达到了一种流畅、易于观察的效果。

　　如上，我【wǒ】们介绍了几种常见的也是易【yì】于设计的视差滚动。总结一下，视差滚动可以【yǐ】实现如【rú】下几【jǐ】种目【mù】的：让平面具有3d效果，拥【yōng】有了【le】前景和后景;让不同板【bǎn】块和【hé】图片的切【qiē】换更为平滑;让【ràng】新的图像的出现更具新颖性和【hé】闯入感。

　　所以，视【shì】差滚动作为网站视觉营【yíng】销的一种【zhǒng】，在【zài】网【wǎng】站设计【jì】中可以【yǐ】尝试和实践。

• 上一章：网页设计和数据库是如何提升用户体验的...
• 下一章：网站怎么设计边框