Framer 使用滚动变体创建动画

简介: Framer 使用滚动变体创建动画


介绍:

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 并调出快捷菜单

image.png

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

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

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

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

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

image.png

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

image.png

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

image.png

页面完善,用于展示

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

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

image.png

给组件加入滚动变体动画

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

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

image.png

  1. 编辑

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

然后看下面. 解释:

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

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

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

To状态,组件的变化.

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

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

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

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

image.png

效果:

image.png

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

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

效果:

image.png

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

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

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

具体步骤:

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

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

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

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

结语

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

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

framer.com/projects/HS…

在线体验地址:

azure-screen-064672.framer.app/


目录
相关文章
|
21天前
|
前端开发 JavaScript
淡入淡出效果的过渡时间和速度如何调整?
淡入淡出效果的过渡时间和速度如何调整?
90 58
|
4月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
102 7
|
5月前
|
前端开发
HarmonyNext动画大全02-显式动画
HarmonyNext动画大全02-显式动画
78 2
HarmonyNext动画大全02-显式动画
|
7月前
Framer 滚动动画效果集合 (讲解)
Framer 滚动动画效果集合 (讲解)
110 0
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
186 0
|
存储 缓存 Android开发
RecyclerView 动画原理 | 如何存储并应用动画属性值?
RecyclerView 动画原理 | 如何存储并应用动画属性值?
101 0
An动画基础之散件动画原理与形状提示点
An动画基础之散件动画原理与形状提示点
964 0
|
JavaScript 开发者
动画-使用过渡名实现动画|学习笔记
快速学习动画-使用过渡名实现动画
108 0
动画-使用过渡名实现动画|学习笔记
SwiftUI—如何以动画的方式显示或隐藏指定的位图
SwiftUI—如何以动画的方式显示或隐藏指定的位图
347 0