您现在的位置:主页 > 站长聚焦 > 建站心得 >

网站运用新趋势!神奇的鼠标滚轴动画(视差滚动)

来源:建站吧 责任编辑:Jzq8 发表时间:2014-03-14 点击:

  动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画,从最简单的基础效果到富有开创性的展示结果。毫无疑问,这种雪崩式的动画效果已经被认为是web技术史上最先进的技术。已经被永不满足现状的Web开发者们发展到了一个全新的水平。这些动画缓慢却很清晰,让网页设计师在页面上把交互和视觉都展现结合的淋漓尽致。

  如果你想学今天的这些案例,推荐回顾《让网页舞动起来!25个免费的视差滚动插件》和《网页特效:滚动视差设计指南》这两篇文章:)

  小伙伴们!最新的最火爆的最给力的网页设计趋势来了!快来看看这个神奇的视差滚动设计趋势!

  小提醒:有些网站效果不能再赞,谷歌、火狐才能打开唷。

  Kaipoche

  该网站致力于今年的风筝节。通过一个简单的滚动激活动画技术,它有一个真正充满活力和引人瞩目的设计。

  

Kaipoche

 

  Bizbrain

  是一个先进的长页面网站。它通过精彩的彩色图熟练地演示了各种数据。各个版块都有各自相应的信息。

  

Bizbrain

 

  Drugs and Alcohol on Campus

  这也是一个交互式图表,能够在不知不觉中给你最紧迫的问题提供答案。所有画面都是通过鼠标来激活动画的,使这些问题看起来不那么“干巴巴”的。

  

Drugs and Alcohol on Campus

 

  Bright Media

  该团队利用视觉引导串起所有元素,使用正确的顺序引导用户,每个部分都有装饰的动画元素,你的任务就是顺着线条走就OK了。

  

Bright Media

 

  Adobe Muse CC

  这是一个创新的、干净而复杂的网站,利用艺术方法引导用户来关注自身新产品。主要包括简洁的白色页面、纸张变形模式和滚动动画来实现效果。

  

Adobe Muse CC

 

  Fluger

  网站的开发人员在页面上放置了一架小飞机,用户通过滚动鼠标滚轮可以看到小飞机在页面上飞行,实现浏览整个网站的目的。网站是用图片和手绘稿糅合起来的,加上飞机的引导,看起来酷毙了!不过加载时需要等一定的时间。

  

Fluger

 

  Fillet

  这是一个流行的平面风格网站,拥有很棒的字体。当你向下滚动鼠标时,每个色块都会顺利转化为一串漂亮的字符。整个过程显得很愉快。

  

Fillet

 

  NGUMA

  这是一个富有魅力的互动机构网站。该网站允许你直接参与它的互动。也是基于滚动动画的设计趋势。

  

NGUMA

 

  Happy New Year 2014

  滚动激活动画模式非常适合于庆祝节日的网站设计。特别是圣诞节。这个网站里面通过一个完整的动画建立起一个温馨的节日气氛,真是让人感到很别致。

  

Happy New Year 2014

 

  Merry Christmallax

  和上面的例子一样,这个创意网站的目的就是给用户们一个温暖而衷心的节日祝福。故事开始于一张干净的纸张,最后演变成一个充满活力的插图场景,整个故事就是动过滚动激活动画技术实现的。

  

Merry Christmallax

 

  Pixelgyar

  这是另一个奇妙的和迷人的圣诞故事。圣诞老人的旅程完全取决于你的行动,所以旋转鼠标滚轮,让圣诞老人到达他的目的地吧!

  

Pixelgyar

 

  Make Your Money Matters

  这是一个宣传网站,生动地展示了加入信用联盟的好处。在整个动画过程中你将成为一个积极参与者。这项技术允许我们持有一个既定主题来实现网站设计,做到和用户之间的良好互动。

  

Make Your Money Matters

 

  The Future of Mobile Phones

  正如网站标题所言,该网站就是预测未来的手机的。网站的交互式信息里面充满了各种动画图形,都是定期统计的数据展示。

  

The Future of Mobile Phones

 

  Camplight

  这是一个整洁、干净而时尚的在线展示网站。提供了一个较为新颖的展示方式让用户来熟悉公司。

  

Camplight

 

  1McHappy Day

  这个网站通过橡皮泥一样的图形设计带给用户返老还童式的体验,心灵上很容易就欢快起来。(我觉得要是来点卡哇伊的背景音乐一定会更给力的!)

  

McHappy Day

 

  CEZ

  提供了另一个惊人的互动之旅,该技术功不可没啊。

  

CEZ

 

  What’s behind the number

  网站目的是广泛宣传关于防晒霜的防晒指数及其优势。当你向下滚动时,你会享受到一个整体活泼的故事,试图告诉你使用该产品后,在阳光下你的皮肤依然很安全。

  

What’s behind the number

 

  InfoGuest Infographic

  如其名字一样,它有大量的信息填充内容,通过图表和动画的有效结合展示出来。

  

InfoGuest Infographic

 

  Bolia

  和上面的例子稍有不同,该创意团队应用基于照片的滚动激活动画来展示椅子的所有面。

  

Bolia

 

  Bam

  该公司试图利用长页面布局和各种图纸来实现信息填充。为了避免各部分信息过于统一单调,研究小组决定采用滚动激活动画给网站带来生气。

  

Bam

 

  Areal Plankstadt

  这是一个宁静的网站,拥有美丽的氛围。为什么?——蓝白两色,青春一生……通过滚动激活动画技术实现页面之间的切换,非常平静安宁。

  

Areal Plankstadt

 

  结语

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:

推荐图文

  • 淘宝联盟为何大举关闭跨店结算权限?
  • 微信订阅号 让用户取消关注的8种维护误区
  • 成为合格微信运营者需要的十种能力,你具备了几种?
  • dede织梦常用标签使用大全
  • 建站吧:帝国、PHPCMS及织梦对比(二):支持SQL调用的标签
  • 在三年的草根站长生涯中 我是如何成功转型的
  • 互联网产品设计:切图小贴士 “点九”切图事半功倍
  • 干货:如何运营微信公众平台
  • 如何看待淘宝同学 走2B+2C的混合型平台模式
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright © 2013 JZQ8.COM. 建站吧|建站去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款