回到所有的课程
课程库

介绍互动

触发器和动画的简要概述。

本视频采用了旧的用户界面。更新版本即将到来!

多年来,网络和我们的数字设备反应迅速,功能强大。作为设计师和开发者,我们可以使用工具来构建复杂的交互和令人印象深刻的动画。

一个名为梅根加西亚组合的网页显示了从开始到结束的触发器。左边是到达时的页面,右边是页面加载触发器。页面触发部分覆盖在左侧网站截图,包括两个触发器,页面加载和页面滚动。
显示一个选中的项目卡,其中包含一个名为鼠标悬停的元素触发器。左边是元素的none状态。右边是元素的悬停状态,在元素下面有一个彩色的渐变阴影。

传统上,这些工具通常是用高度特定的javascript库构建的,需要工具和插件来完成冲突、怪癖和猥琐的基于代码的学习曲线。

在Webflow设计器中,我们可以使用所有我们需要的工具来操作这些内容,通过疯狂的细粒度控制建立交互在视觉上

一个名为GEM studio的网站在主页上有加载元素。Main列表被选中,交互面板打开到加载元素设置部分。

来看看一些很酷的例子

什么构成了互动?

互动让我们围绕两个强大的东西进行设计:触发器而且动画.(如果这种情况发生了,那么这种情况就会发生。)一个触发-无论是点击,滚动,悬停,移动鼠标,加载页面-执行一个动画(触发器上发生了什么)。

黑色图标说明触发器点击,滚动,悬停,移动鼠标和加载页面。

通过这种精确的控制,我们可以应用定时动画、滚动动画和基于位置的鼠标动画然而我们要赋予自己建设的力量任何东西我们想要的。

开始学习你需要知道的关于触发器和动画的一切。

尝试Webflow——它是免费的
Baidu
map