20酷视差滚动教程 & Examples

视差滚动 是一种网页设计技术,其中,随着访客向下滚动网页,网页的背景图像移动的速度比前景中的图像移动得慢。该技术在引导用户浏览页面和讲述故事方面做得很好。这导致许多视差网站只有一个页面。如果您想创建一个现代的 基于视差效果的一页网站,这里有20个很棒的视差滚动教程和示例。

视差正确

从那时起,视差就爆炸了。感觉每天都有使用该技术的新营销页面……这是有充分理由的。做对了,感觉很棒。问题是,使用视差的绝大多数站点都遭受了糟糕的滚动性能。对于像素密度较高的设备(例如视网膜MacBook Pro),这尤其不利。

视差正确

重新创建Firewatch视差效果

作为一名网页设计师,当您听到这个词时,您可能会在里面哭泣“parallax.” It’被污染。脏。过度使用(并且经常不正确使用)的术语,这意味着“免费滚动效果”或者更糟浏览器滚动条的完整劫持。

视差教程

纯CSS视差网站

本文演示了如何使用CSS变换,透视图和一些缩放技巧来创建纯CSS视差滚动网站。

pure-css-parallax-9

视差英雄形象

通过CSS 3D变换可以实现的目标是无限的。权力伴随着责任。在某些情况下,您会充分利用CSS 3D功能。但是,在大多数项目中,您可以稍微增加一些趣味。

视差英雄10

记录的对话

视差导航概念引擎。

视差导航概念引擎。

的‘root element’ 视差 technique

通过结合使用rem和小的JavaScript函数来控制html元素的字体大小,我们可以实现简单但有效的视差。

这种技术将DOM操作最小化到html元素上的一种,从而提高了整体性能。

滚动模糊

This pen demonstrates a simple medium.com-like blur image on scroll and content 视差 It gets the scroll position using requestAnimationFrame instead of an onScroll event.

blur-3

带有SVG,SMIL和CSS的径向视差

这是结合了径向透视的视觉效果的演示(例如Apple’的QuickTime虚拟现实或Google’的街景视图)具有视差效果,近年来这种效果在Web设计中变得如此流行。

径向视差-4

在不同的宽高比下调整和重新调整SVG大小的实验。

stag-5

派拉尔& Lax

容易产生视差效果。

视差6

纯CSS视差滚动

使用CSS 3D变换的技术。没有JavaScript!

纯css-11

全屏带视差的拖动滑块

有点响应。经过Chrome / FF / last IE的测试,到处看起来都很不错。

视差拖动滑块12

萨斯视差示例

通过将透视图锁定在body元素上并在其上以3D形式转换元素,您可以轻松创建不需要JavaScript的视差滚动效果,从而获得更高的性能。

萨斯视差示例

404– Back to the Future

我想你不是’还没有准备好该页面…

404parallax

视差滚动

简单的一页网站,具有多个视差滚动背景。对您的个人投资组合有很好的效果。

视差滚动的一页网站

GTA 5 的CSS 3视差

淘汰赛和CSS3 3D转换可创造惊人的效果。

gta5-parallax-effect-17

视差类型的东西

一个简单的视差笔,还添加了条件固定的标题并模糊了标题。

视差18

视差背景与步行周期

带有CSS3动画的多个背景图像可创建多深度视差效果。

带有CSS3动画的多个背景图像

的CSS 中的视差星背景

使用非常简单的sass函数和CSS动画关键帧,可以在空间中构建视差滚动星。 sass函数在每个负载上创建一个随机的星场。

 的CSS 中的视差星背景

简单的视差滚动

简单的视差滚动可以在任何地方实现。

简单的视差滚动

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.