回到所有的课程
课程库

介绍互动

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

这个视频的特点是一个旧的UI。更新版本即将发布!

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

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

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

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

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

看看一些很酷的例子

什么构成了互动?

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

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

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

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

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