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

网站设计中的视差效果,以不同速度移动图层的概念,已经在动画中使用多年。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

相关推荐

  • 分享如何把握网站设计的重点。

    设计开发是至关重要的一个环节。因为程序开发全部都是围绕设计师的用意去开的,如果网站设计本身都出问题,你觉得他程序能做的极佳吗?答案肯定是不可能,所以今天跟大家分享几点网站设计应该把握的重点。一、保证导…

    2023年6月16日
    01
  • 小编分享如何快速掌握网站设计能力。

    在高速发展的互联网时代,网站设计的重要性完全可以通过用户体验来定义,在用户为王的时代,设计师应该如何提升自己的网站设计能力呢?1、找到适合自己的设计方式网站开发设计时代创信认为网站开发中设计师可以去关…

    2023年6月16日
    00
  • 网站设计与SEO的关系,高手是从这4个维度分析的。

    SEO(搜索引擎优化)和有效的网站设计是齐头并进的。好的网站设计是关于创建一个吸引目标受众的网站,并让他们采取某种行动。但是,如果该网站不遵循目前的 SEO 最佳做法,它的排名将会受到影响,从而会导致真正参…

    2023年2月23日
    00
  • 小编教你网站设计过程中需要注意什么。

    做网站是现在每一个企业都要去考虑的问题,都知道现在是互联网的天下,我们的生活也离不开网络,所以一个网站对于一个企业来说是非常重要的。做网站就少不了前期的网站设计,那我们在网站设计制作时都需要注意哪些…

    2023年6月15日
    00
  • 什么是字距排版?网页设计定义。

    包含在用户界面 (UI) 样式指南中的一个关键元素是排版将如何出现在您的移动程序 或 网站设计中。您可以选择是要使用预先存在的字体还是创建您品牌独有的新字体。但是随着您的排版决策变得更加细化,您最终将需要讨…

    2023年3月7日
    00
  • 教你网站设计的关键点是什么。

    网站设计其实并没有很多人脑海中想象的那么复杂。有大多数人在几天之内就能建立属于自己的个人网站。那么,在构建网站时,我们必须清楚几个问题: 1、确定网站目的 根据产品的销售渠道和销售目标,很明显网站是信息…

    2023年6月13日
    01
  • 我来分享网站设计中如何有效地使用销售渠道。

    网站建设的目的之一是实现有效转化,实现销售和利润的增长。那在网站设计中该如何有效地使用网站销售渠道呢?1.显示您的联系信息在数字时代,选择通讯方式是电子邮件,聊天和通话。您很少会找到愿意填写潜在客户表格…

    2023年6月16日
    00
  • 我来教你如何使网站设计更加美观。

    任何一个网站建设者都想自己建立的网站受到用户的喜爱,然而网站是否受欢迎决定权是在用户手上的,怎样让用户对你的网站改观,让网站更受欢迎?网站建设者可以通过下列的方法让网站更加受欢迎:第一:网站建设时注重…

    2023年6月16日
    02

联系我们

QQ:951076433

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