将动态涂鸦融入您的网站

阅读 0 分钟

分享

分享

了解如何在无需编写代码的情况下,将富有创意和趣味性的涂鸦融入您的网站设计中。按照本教程学习如何为涂鸦添加动画效果并进行自定义,以契合您独特的风格。

在您的网站设计中融入涂鸦可以传达一种创意和玩乐的感觉。如果您想为您的网站添加这种独特的视觉元素,那么您很幸运!您可以 混音项目 并将现成的元素复制粘贴到您的项目中并根据您的喜好进行自定义。下面的教程可以帮助您了解我如何在我的项目中设置涂鸦。一切都无需代码即可完成,这使得任何人都可以轻松创建具有微妙而动态的视觉效果的引人入胜的网站。那么,让我们深入探讨将涂鸦融入您的网站设计的可能性。

绘画动画

您可以通过将涂鸦与 Animator 组件(来自 @benjaminnathan)结合来实现绘画动画效果。只需将 Animator 连接到涂鸦,瞧!

在我的项目中,我希望一旦某些部分进入视野就启动动画。为了实现这一点,我 创建了一个组件,其中包含两个变体——一个 Animator 隐藏,第二个 Animator 可见。

然后,我设置了 滚动变体效果,一旦图层进入视图,组件就会从 Default(隐藏动画)切换到 Animate(Animator 可见且动画触发)。

微小的动作

我创建了带有两个变体的组件,以用涂鸦创建微妙的运动效果。其中两个变体是同一涂鸦的两种变体。

动画一旦开始,形状上的细微差异会使涂鸦看起来像是轻轻地移动。我添加了一个“出现互动”,通过来回链接来为组件添加动画,并将延迟设置为 0.2 秒。这种效果为页面增添了一丝活力,而不会过于分散注意力或令人不知所措。


涂鸦定位

我喜欢组织我的文本内容,所以使用 堆栈。涂鸦通过 绝对定位 动态地“打破”布局。您可以在属性面板中的“位置类型”中设置位置为“绝对”。


更多涂鸦

我在项目中包含了更多涂鸦,您可以按照上面的说明为它们添加动画。玩得开心涂鸦!

Create a free website with Framer, the website builder loved by startups, designers and agencies.