介绍:
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 里面,我们直接从里面拖入页面即可导入.
给组件加入滚动变体动画
下面就来给组件加入滚动变体动画.
- 单击组件, 点击左侧属性栏的Effect ==> 点击+号 添加scroll variant
- 编辑
给每个页面加入了Scroll Section Name(这也在左侧属性面板,往下面划划就看到了).这方便我们用来控制当nav组件到
某个部分,转换哪个变体.
然后看下面. 解释:
触发的方式我们选择Section In View, 这表示当某个部分到达视图时触发.
触发的时机呢,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部
触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次.
To状态,组件的变化.
明白了上面这些,那下面这张图就好理解了.
当
黑色部分在浏览器视口中,导航栏使用默认的组件当
白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件当
黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件
效果:
我们可以看到 当滚动不到不同部分的时候,导航栏就会使用不同的组件.
Demo2: 实现一个滚动到不同部分,更改左侧的icon图标
效果:
在上个效果的基础上,我添加了
- 渐变背景
- 填充了文本,并使用
绝对定位固定到页面上. - 给每个页面添加了
粘性布局, 达到视差的效果.
然后就说下创建变体Icon 图标. 观察上方的Gif图片,我们就会发现,滚动到不同部分.右边的ICON 图标 在进行相应的变化.
具体步骤:
第一步: 我们创建一个组件, 引入3个图标(Framer内置了,可以在import里面找到).
第二步: 引入到页面上,使用固定定位,定位在指定位置.
第三步: 添加滚动变体效果,滚动到不同部分,选择不同的组件即可.
这里我就不把属性图进行贴出了, 和上面第一个创建方法一致. 大家可以自己试一下.
结语
可以自己想一下有哪些好玩的创意可以应用到网站上面的.
下面就该DEMO 的 原模版文件地址:
在线体验地址:
azure-screen-064672.framer.app/
