用 Framer 搭建炫酷个人网站, 实现 js 背景动效, 且不花 1 分钱

[byewind]

先看效果: https://www.byewind.com/ 另外两种背景: https://cloud.byewind.com/ , https://halo.byewind.com/

感谢:@OkotoO @cha0sCat @0o0O0o0O0o 帮我优化代码

步骤:

1. 使用 Figma 设计网站
2. 使用 Framer 制作网站
3. 将网站的 DNS 换成 Cloudflare 的
4. 使用 Cloudflare 的 Workers 来为网站换域名和加载背景动效

具体的加载背景动效的方法请查看:https://byewind.notion.site/Cloudflare-Workers-Framer-8e1b5a09b4d448c2ad1d6c74b5ed3d21

用到的工具和服务都是免费的,用 Framer 制作网站的原因在于 Framer 对设计师非常友好,上手难度低, 且能做出很多不错的效果.

[xfxz]

效果不错，感谢分享。想问下这个有导出代码的功能吗？付费的也行。

[byewind]

@xfxz 哪个? Framer 软件吗? 这个软件没有导出代码的功能. 程序员可以用它来开发很多有趣的组件, 组件可以分享. 用它开发的网站和组件都不能导出代码.

[xfxz]

@byewind 好的，那这网站其实就是托管在 framer 上面吗？国内访问会不会比较不稳定。

[byewind]

@xfxz 是托管在 Framer 上的, 你可以试试国内访问, 我目前访问还可以.
Framer 的优势在于不用写代码, 设计操作方式和 Figma 非常接近, 所以体验很好.

[OkotoO]

@xfxz #3 你可以理解为 Framer 上的是源站, 而 Workers 是用来反代并对网站内容进行修改来添加背景动效. 所以你最终网站是否稳定和使用 Cloudflare CDN 在国内稳不稳定是直接挂钩的

[byewind]

其实用 Framer 制作的网站自定义域名, 加载 JS, 都不需要用到 Cloudflare. 完全可以通过升级成为 Framer 付费账号来做到这些. 用 Cloudflare 的原因就在于免费.
为了免费, 所以才需要额外折腾很多东西. 包括像我这样完全不会编程的人要去折腾写 Worker, 结果是看了半天没学会, 然后就放弃了, 来这求助了. 还好得到了 @OkotoO 等人的帮助, 不然我是搞不定的.

[sillydaddy]

> “ Framer 对设计师非常友好,上手难度低”
楼主用的是 FramerWeb 吗？我之前专门看过 Framer X ，感觉对设计师很不友好，要懂 React 那一套。
是 FramerWeb 又改进了吗？

[byewind]

@sillydaddy 你说的 FramerWeb 是什么? Framer 现在就是叫 Framer 👉https://www.framer.com/ . 这个软件前身是和 Figma 类似的软件, 后来竞争不过 Figma 就改成了现在这样. 现在的产品重心放在了开发网页, 尤其是官网和落地页上.
使用下来体验比目前其他的网站开发软件都要好. 比如 webflow, wix 这些虽然功能强大, 但是使用体验并不好.
使用 Framer 则可以像用 Figma 等设计工具那样来设计网站.

[sillydaddy]

@byewind 感谢回复。虽然它的名字一直叫 Framer ，但是功能一直在变 🤷‍♂️，一开始是原型工具 Framer.js ，后来大改了一次思路变成了 Framer X ，现在看起来又转型了。

[byewind]

@sillydaddy 因为竞争太激烈了吧, 每个工具都能找出好几个类似的. Figma 也是在这样的围剿下杀出来的. 做网站的工具除了 webflow, wix, Framer 外还有很多. 比如 Canva, 能做非常简单的网站, 虽然功能很少, 但是却非常好用.

[byewind]

不知道现在是开发网站的开发者多还是开发 App 的开发者多, 有谁知道的话麻烦说下噢

[blankmiss]

chrome 得开硬件加速不然网站渲染有点卡

[byewind]

@blankmiss 这样吗, 那可能是 JS 库的运行耗费的内存太高了

[mikixinyuel]

真的可以！感谢分享！虽然捣鼓半天但是每月立省！

[byewind]

@mikixinyuel 是啊