如何在你的网站设计上创建分层视差效果。

网站设计中的视差效果,以不同速度移动图层的概念,已经在动画中使用多年。Bear Grylls的官方网站在新的和有趣的方向上发挥了作用。背景山缩小到合适的位置,同时渐隐,使它们变得完全不透明,在页面的背景中,文本"冒险"在渐隐时上升到山的后面。

如何在你的网站设计上创建分层视差效果(图1)

网站设计中想要获得更多鼓舞人心的视差效果,请查看我们的最佳CSS动画指南以及如何编写它们。

Bear Grylls网站设计是英国创意营销机构前哨的工作,目标受众年龄在16岁到55岁之间,在全球拥有700多万粉丝,他们面临着一项艰巨的任务。

"网站设计中的主要特色是主页;我们希望浏览用户能直接跳到屏幕上,和贝尔一起冒险,"联合创始人克里斯·威尔科克(Chris Wilcock)和创意总监丹·威廉姆斯(Dan Williams)解释说。"为了实现这一点,我们使用了一些巧妙的过渡,加上经过编辑的视频、戏剧性的图像和网站上的整体语言。"

01.创建缩放效果

允许所有动画内容工作的结构相对简单,包装器包含所有内容,并隐藏任何溢出内容。然后在顶部有三层div标签。

如何在你的网站设计上创建分层视差效果(图2)

02.启动CSS

为了进行网站设计,背景渐变图像将被添加到主体中,并设置为填充屏幕的大小。包装器包含所有层,并隐藏内容溢出,以便应用缩放效果。

如何在你的网站设计上创建分层视差效果(图3)

03.定位每一层

接下来的代码确保每一层都被绝对地定位在包装器中,一个在另一个之上。它的大小填充了viewport的宽度和高度,因此图像填充了屏幕。

如何在你的网站设计上创建分层视差效果(图4)

04.添加文本

text类实际上只是添加了正确的图像,并在使用将在最后一步中添加的moveUp关键帧将它动画到合适的位置之前设置它的起始位置。

如何在你的网站设计上创建分层视差效果(图5)

05.动画第一座山

第一个山是离屏幕更远的山,这将得到一个小的缩放,这将是动画的。所有图层的不透明度也被设置得很低,这样它们就会出现在合适的位置。

如何在你的网站设计上创建分层视差效果(图6)

06.为前景山制作动画

前景的山和其他山几乎是一样的,只是比例更合适。两座山的动画都共享"定标器"关键帧。

如何在你的网站设计上创建分层视差效果(图7)

07.添加关键帧动画

现在创建了关键帧来指定它,在移动的结束状态中,这个结束状态将被保持在适当的位置。文本向上移动,山脉被缩小,以适应网站设计。

如何在你的网站设计上创建分层视差效果(图8)

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/222364.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年2月19日 23:41
下一篇 2023年2月19日 23:41

相关推荐

  • 企业网站设计师基本功修炼记。

    现在的互联网设计行业,即使是在校学生,也知道用户旅程地图(CJM)、信息架构、商业画布、价值主张、SWOT分析这些,稍微有点经验的设计师,还会知道Heart、GSM、AARRR、双钻模型、福格模型这类更流行的设计思维模型…

    2023年2月22日 SEO操作
    00
  • 自适应与响应式网站设计:最佳比较指南。

    自从2007年第一代iPhone问世以来,移动设备在日常使用中变得更加方便。目前约有25亿人使用智能手机来完成日常活动,其中包括浏览网站。由于越来越多的用户更喜欢使用移动设备而不是更大的电脑,因此网页设计师们将…

    2023年2月15日 SEO操作
    02
  • 分享必读:网站设计的3个新趋势。

    作为专业的网站建设公司需要了解最新的网站设计趋势,才能更好的服务客户。那最近网站设计都出现了哪些新的趋势呢?1.打破空间利用的平衡性空间利用和空间布局会从视觉效果的角度影响用户对网站的印象。之前的很多网…

    2023年6月16日
    02
  • 企业网站设计服务都包含哪些主要项目?

    要知道一个网站的成功与否与企业网站设计服务有着极为重要的关系。在建立网站前应明确网站设计的目的,确定网站的功能,确定网站规模、投入费用,进行必要的市场分析等。只有提供详细的建站服务,才能避免在网站设…

    2019年10月29日
    0267
  • 小编分享网站设计中如何增加用户点击。

    想要在整个网站设计中,增加用户点击的方式,都是需要有一个度的。并非是让用户一定要去点击这个链接,而是在网站设计中,增加用户的体验度,让网站通过巧妙的设计显得有趣,这才是多重点击设计的根本初衷。在诸多…

    2023年6月15日
    00
  • 我来分享企业网站设计需要注重哪些内容。

    说到企业网站建设的网页设计,里面所涉及的内容非常的多,到底企业网站建设需要注重些什么呢?下面,就让小编来为大家盘点一下吧! 1、首页设计技巧 网站首页是企业网上的虚拟门面。一定要注意自己门面的设计,决不能…

    2023年6月12日
    00
  • 网站设计项目进度表。

    在你设计、制作网站时,你的客户常常会很想知道他们的网站设计到了什么阶段,网站设计是否马上能完成?我们很多人都有过这样的经历,坦白地说,这通常是因为客户不了解我们开发网站时幕后发生了什么。为什么呢?他…

    2023年2月19日
    05
  • 教你手机网站设计的技巧。

    随着移动设备的发展迅猛,移动用户不断增加,对移动互联网的发展影响非常大,而手机网站的设计也成为了企业寻找发展的又一大利器,今天我们就来分享一下手机网站设计的技巧,希望可以帮助到各位站长。 第一、手机网…

    2023年6月13日
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息