Farmer 使用滚动变体创建动画

介绍:

Scroll Variant

Scroll Variants allows you to change the active variant of a component on sections on your page entering the viewport.

"滚动变体"(Scroll Variants) 允许您在页面上进入视口的部分更改组件的活动变体

You can use Scroll Variants to make a navigation bar change its appearance as the user scrolls down the page, such as changing its background color or adjusting the positioning of elements. Or a sidebar highlighting the active sections as you scroll down the page.

您可以使用"滚动变体"使导航栏在用户向下滚动页面时更改其外观,例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。

Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果

创建导航栏组件

第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单

然后输入组件名字,就可以进入到组件编辑页面了

然后我们创建一个最基本的导航栏(默认)

  • 左边放入LOGO
  • 右边放入包裹每一菜单项的大盒子

也就是导航栏 采用flex布局, 子项y方向垂直居中, x方向左右两端分布, 左右两边加入内边距padding

每一项的item 也是flex伸缩盒布局, 子项垂直水平居中

紧接着我们复制这个组件两份,分别修改背景颜色为黑色黄色 最终效果:

然后我们组件就完成了, 当然有很多地方需要优化,但这不是重点. 我们回到首页.

页面完善,用于展示

创建三个页面,分别填充黑色,白色,黄色. 并且将我们刚刚创建的组件导入进来, 然后设置固定(fixed)定位,宽度为100%.

组件创建之后会存在于Assets 里面,我们直接从里面拖入页面即可导入.

给组件加入滚动变体动画

下面就来给组件加入滚动变体动画.

  1. 单击组件, 点击左侧属性栏的Effect ==> 点击+号 添加scroll variant
  1. 编辑

给每个页面加入了Scroll Section Name(这也在左侧属性面板,往下面划划就看到了).这方便我们用来控制当nav组件到某个部分,转换哪个变体.

然后看下面. 解释:

触发的方式 我们选择Section In View, 这表示当某个部分到达视图时触发.

触发的时机呢 ,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部

触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次.

To 状态,组件的变化.

明白了上面这些,那下面这张图就好理解了.

黑色部分在浏览器视口中,导航栏使用默认的组件

白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件

黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件

效果:

我们可以看到 当滚动不到不同部分的时候,导航栏就会使用不同的组件.

Demo2: 实现一个滚动到不同部分,更改左侧的icon图标

效果:

在上个效果的基础上,我添加了

  • 渐变背景
  • 填充了文本,并使用绝对定位固定到页面上.
  • 给每个页面添加了 粘性布局, 达到视差的效果.

然后就说下创建变体Icon 图标. 观察上方的Gif图片,我们就会发现,滚动到不同部分.右边的ICON 图标 在进行相应的变化.

具体步骤:

第一步: 我们创建一个组件, 引入3个图标(Farmer内置了,可以在import里面找到).

第二步: 引入到页面上,使用固定定位,定位在指定位置.

第三步: 添加滚动变体效果,滚动到不同部分,选择不同的组件即可.

这里我就不把属性图进行贴出了, 和上面第一个创建方法一致. 大家可以自己试一下.

结语

可以自己想一下有哪些好玩的创意可以应用到网站上面的.

下面就该DEMO 的 原模版文件地址:

framer.com/projects/HS...

在线体验地址:

azure-screen-064672.framer.app/

相关推荐
zhangjr057521 分钟前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱33 分钟前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚1 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络
啵咿傲2 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy2 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html