[[Framer 画布.canvas]]  ## Updated ### 2023 - 0510 更新了搜索。 - 0317 更新了的夜间的功能。 ## What 一个非常有潜力的无代码建站产品，曾经和 Figma 是竞争对手，2022 年转型成为了新一代建站工具。 ## Notes ### Blending 混合特效 The visual effect of overlapping elements can be achieved by using "Blending" in the Style settings for the element. ![CleanShot 2023-10-29 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-29%20at%[email protected]) ![CleanShot 2023-10-29 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-29%20at%[email protected]) ### Event - 在嵌套原子组件时，有的时候在父级设置不了 Interaction，就需要在原子组件中添加 Event。 - 视频贼尴尬，是录给自己看的。 ![[Framer Events-08-22.mp4]] ### 轮播组件妙用 是可以引用组件的，不一定是图片。 ![[Framer轮播图组件学习备忘.mp4]] ### Overlay - 20231020 可以加了，不过不确定能不能很自由，官方是新增了一个 menu 组件，主要是为了导航的场景。 - You cannot add an overlay within a Framer component. 在 Framer 组件内部是加不了 overlay 的。 ### Scroll Animation #### Scroll Variants By scrolling the page, the components will switch to their corresponding variants based on the section's position  #### Scroll transform By scrolling page, the target element will change from state A to state B, very intuitive. Give it a try.  ##### 横向滚动的实现 1. 通过 From to 改成 Offset X 的位置。参考文件：[Next Level (copy) – Framer](https://framer.com/projects/Next-Level-copy--BTET5PXyN02yA7P4PRkO-a2AVL?node=WQLkyLRf1) ![CleanShot 2023-10-21 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-21%20at%[email protected]) #### Scroll speed 设置 改变百分比，可以让目标元素在滚动的过程中，产生与正常元素不同的位移速度，试一下就知道了。 By changing the percentage, you can make the target element move at a different speed than the normal elements during scrolling. Give it a try and you'll see. #### 那种掀开帷幕的动效做法 1. 把需要逐渐露出的模块，用 Sticky（设置为 Bottom 0 px），相当从一开始就吸底在底部，这是最好的做法。![CleanShot 2023-10-21 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-21%20at%[email protected]) 2. 在背后的 Footer 一直是 Fixed，网页滚到最后的时候。增加一个空白的图层。让他持续往下滚，然后露出来。 <https://framer.com/projects/Kong-copy--elz4Cmu5EeAv7jlEa6Al-dGdk9> ![CleanShot 2023-10-21 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-21%20at%[email protected]) ### 变量 variables - Visible 可以与其他变量进行条件关联！非常美妙 -  - 绑定了布尔隐藏变量后，如果手动改变了图层的隐藏和显示，会自动破坏之前的关联，有点无解。 - 目前还未了解如何做出像 Figma 那样的高级可交互的变量。 - Framer 每个组件都有专属的单独的变量位置。 ### Sticky 与 Fixed <https://framer.com/projects/Sticky-Practice--6eDQvCPhK5xtn3FH4HGg-3tqb1?node=augiA20Il> 我自己的练习文件，理解会更加深刻。![CleanShot 2023-10-21 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-21%20at%[email protected]) **Sticky：** 占用位置，当接近屏幕顶部时，才固定，更加灵活。 > 1. 注意!! Sticky 需要**父级设置为 VIsible 才会生效**，默认经常是 Hidden，非常离谱。 > 2. 当 Sticky 后面没有 Sticky 元素的时候，最后一个 Sticky 所设置的 Top Offset 不会生效，因为后面的瀑布流元素要上来了，它只好往上走了。 > 3. Sticky 默认是距离顶部为 0 的时候开始固定，但是也可以改成 Bottom，就可以距离底部开始固定。也就是一看到它的时候就固定在底部了（特别适合 Footer 的掀开动效） **Fixed：** 类似绝对定位，始终固定，不占用页面位置。 录制视频单纯个人备忘使用，较啰嗦。 <video width="100%" height="400px" controls> <source src="https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Framer20230721.mp4" type="video/mp4"> </video> ### 绝对定位 Absolute [[Position]] Position 普通的元素可能会没法设置定位，需要套一层 Frame（COMMAND+Enter) ### CMS 如何使用 手动方向： - 先画一些元素，例如文本，然后在右侧属性面板想去反向关联到某个 CMS 的变量。 - 前提是，需要把页面放到 CMS 那个区域，才能关联到 CMS 的变量。 正确：直接 insert 一个 CMS 的 list，他会默认带出一个完整的设计，然后再进行二次修改。 ![[CleanShot 2023-05-03 at 11.07.46.mp4]] ### Parallax scrolling effects 这个文件可以看下。[New Heights (copy) – Framer](https://framer.com/projects/New-Heights-copy--2ZGfkO7RFQF3A2AdSKKE-38TXm?node=WQLkyLRf1)  ### Components - variable Framer 的组件有一个概念叫做 variable，其实类似 Figma 里的 property，把那些可能需要替换的变量，提前做预留。 例如默认情况下在组件页面，Banner 组件的背景色是这样，没有进行设置。  返回到外部设计稿上，背景颜色就没法切换，要改的话得回到组件内部。  如果预先创建了 Variable。   那么就可以在外部进行选择色彩，文字等等一样的道理。  ### 锚点定位 1. 先给你的目标 section 加一个 Name， 2. 然后再给触发元素+link 的时候，就会有选项了。 [Framer Tutorial: Smooth Scrolling Links with Scroll Targets - YouTube](https://www.youtube.com/watch?v=AG1ZEij8Vcw)  ## 资源 - [(17) YouTube](https://www.youtube.com/) 官方教程，Effects in components. - [Advanced Framer](https://maven.com/dive/advanced-framer/open-access/home#74039d) 团购的教程，难度合适，不错，课程在下面的 Setup 里。 - 配套的 Figma 文件 <https://www.Figma.Com/file/CtBeKJxgU1V8M6CJeico4q/Advanced-Framer-Course-File-(Copy)?Type=design&node-id=0%3A1&mode=design&t=W43uPGP9BrXYuhQJ-1> ，也制作的很高级。 - [(11) Framer Tutorial: Dynamic Table of Contents (CMS) - Zero Code - YouTube](https://www.youtube.com/watch?v=ItdSRhGVpV0) CMS 页面里的动态目录 TOC 解决方案。 - [Filip Gadziński on Twitter: "Make your @framer website support multiple languages in just a few seconds (for free) 🌎 Let me show you how 👇 https://t.co/kxxvUm7QyQ" / Twitter](https://twitter.com/gadzinski_/status/1684329949895831553) 多语言解决方案 - [Framer Multi-Language (copy) – Framer](https://framer.com/projects/90d35hMVel8WNvZovNbg) remix link - [Announcements | Framer](https://www.framer.community/c/announcements) Framer 官方的社区。看着还不错。 - [Framepad](https://www.framepad.co/starter) 帮助用户在 Figma 中起步的网站，后续应该会上线各种组件。  - [Shader Gradient](https://www.shadergradient.co/showcase) 可以直接复制动态的渐变，也可以自己调试效果。