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/

相关推荐
小政爱学习!20 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。25 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼31 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093335 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程2 小时前
【前端基础】CSS基础
前端·css