10个顶级滚动特效网站,教你如何让网站动起来

发布日期:2017-09-08
浏览次数:49
  
undefined
 
随着HTML5和CSS3建站技术的发展,动画效果又重新成为设计师的重要"武器"之一。为什么动画效果一直广受欢迎?这是因为在网站中使用动画效果可以使页面更加生动、有趣,可以给网站增添一些个性化色彩,可以提供给用户预期之外的效果,让用户体验更愉悦。不过网页中的动画效果也有很多种形式,滚动浏览动效就是其中最常见、最有用的一种。滚动浏览动效,顾名思义,就是指用户滚动页面进行浏览时出现的动画效果。虽然滚动浏览动效并不一定适用于每一个网站,但它在不少网站中都发挥了自己的的独特魅力。在今天这篇文章中,小飞整理了10个应用了滚动浏览动效的优秀网站。
 
 
 

1. TOMORROW SLEEP

这个网站使用的滚动浏览效果十分柔和,当用户滚动页面时,各种文本和CTA按钮会缓慢呈现,给人一种优雅、自然的感觉。这也正是网站设计的策略所在,将网站上大多数的图片、背景、装饰元素保持可见,而给文本元素和CTA按钮(网站的核心内容)设置逐渐呈现的动画效果,这样一来,用户在浏览过程中更容易注意到这些带有动效的内容。
 
undefined
 
 
 

2. TWIST

和第一个网站不同的是,Twist网站采用了平时最常见的滚动浏览特效,也就是网站页面一片空白,所有元素都会随着页面的滚动逐步显现。虽然有些图片或其他元素不会那么快加载出来,但也不会让用户等待太久。Twist上面的滚动浏览特效同样保持着柔和、自然的特点。
 
undefined
 
 
 

3. YARN APP

Yarn App网站的滚动浏览动效要比前面两个网站更加复杂一点。随着用户向下滚动网页,用来呈现APP特点的界面图会伴随着不同类型的滚动浏览动效出现,相互交替,营造出丰富多样的浏览体验。不过由于整个网站在视觉设计上都比较简约,多样的动效也不会让用户觉得花哨。
 
undefined
 
 
 

4. DASHFLOW

在所有的网站案例中,Dashflow所采用的滚动浏览动效可以说是最简单的了。由于网站页面采用了时下流行的单页式布局,其中的滚动动效大多是沿着横向或纵向运动的。虽然这些动效十分简单,但只要搭配合理,它们一样可以给用户提供顺畅、难忘的浏览体验。
 
undefined
 
 
 

5. QUUU PROMOTE

Quuu Promote在网站上也没有使用多少动效,最引人注意的要数CTA按钮上的动画效果了。当你滚动页面时,你会发现CTA按钮缓慢呈现在视野内,并左右晃动,这与页面静止的其他元素形成了鲜明的对比,再加上CTA按钮上显眼的绿色,让人想不注意到它都难。
 
undefined
 
 
 

6. QONTO

Qonto网站的首页上展示了一个十分成熟的滚动浏览动效。整个网站使用的动效类型并不多,当用户滚动页面时,图标、按钮、装饰元素、内容区块都会逐步加载出现,不过这些出现的元素仍会浮动在页面上,这种微妙的波动存在感很强,很能吸引用户的注意力,但它也不会影响到用户的浏览点击。
 
undefined
 
 
 

7. HIKE

Hike网站的滚动浏览动效也秉持着微妙的原则。页面中静态元素和动态元素相结合,一些使用了动效的元素有图片、文字、标题文字下面的分割线等。动效细节上处理的也很妥当,当用户视线捕捉到它们时, 它们基本就停止运动了,这样既方便用户察觉又不会带来干扰。
 
undefined
 
 
 

8. PROJECT FI

Google的Project Fi在介绍页面上使用梦幻般的动效来强化整个体验。当用户滚动页面时,大的内容区块比如图片等会小幅度地加速运动,而其中承载的图标、扁平化插画等则会以更快的速度从下方浮现。元素呈现的速度并不慢,运动幅度也控制的很好,速度差更突出了信息的层次感,这样用户在浏览获取信息时也更加清晰。这个网站还有一个有趣的地方在于,当你滚动到页面底部,再向上滚动时,网页中的图片区块、图标、扁平化插画等又会朝着相反的方向运动。
 
undefined
 
 
 

9. ERNEST

相对前面的所有网站来说,Ernest网站使用的动效绝对是独树一帜的。它在首页使用了视差滚动的设计,虽然是单页设计,但页面却被分割成几个不同的部分,用户滚动页面会直接触动下一个页面中元素,元素运动的幅度比较大。还有,页面的定位很准确,不会滚动时停留在某个两个页面中间位置的状况。用户还可以点击侧面的导航条快速跳转到不同的页面,这也是单页设计和视差滚动设计中常见的元素。
 
undefined
 
 
 

10. TAXINET

Taxinet几乎在网页的每一处都使用了动画效果,不管是图标、文字、图像、背景还是装饰元素。虽然其中很多动效幅度不是很大,但动效的数量却很多。不过网站严格控制了各种动效的速度,让它们看上去更加整齐划一,以给用户带来有趣、生动的浏览体验。如果你对这种类型的设计很感兴趣,也想在自己的网站中运用,最好确保每个动效都足够快速、高效,避免出现凌乱的效果。
 
undefined
 
 
从上面这些栗子中我们可以看出,在网页中使用滚动浏览动效没有一条标准的规则。网页中的滚动浏览动效可以用在多种元素上,也可以用在单个元素上;动效的幅度可以很大,也可以很微妙;动效运动方向可以是横向的,也可以是纵向的。其实,具体如何使用滚动浏览动效还是取决于站长们想要通过动效实现什么样的目的,需要根据网站的实际状况作出选择。上面10个网站在使用滚动动效时都有自己的侧重点,大家可以好好学习,适当参考一下。
 
快来起飞页自助建站平台做一个响应式网站吧!

登录后即可发表评论,立即登录.