V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
byewind
V2EX  ›  分享创造

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

  •  2
     
  •   byewind · 2023-01-02 11:58:29 +08:00 · 3079 次点击
    这是一个创建于 452 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先看效果: 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 对设计师非常友好,上手难度低, 且能做出很多不错的效果.

    15 条回复    2023-11-06 23:37:45 +08:00
    xfxz
        1
    xfxz  
       2023-01-02 12:08:45 +08:00
    效果不错,感谢分享。想问下这个有导出代码的功能吗?付费的也行。
    byewind
        2
    byewind  
    OP
       2023-01-02 12:11:43 +08:00   ❤️ 1
    @xfxz 哪个? Framer 软件吗? 这个软件没有导出代码的功能. 程序员可以用它来开发很多有趣的组件, 组件可以分享. 用它开发的网站和组件都不能导出代码.
    xfxz
        3
    xfxz  
       2023-01-02 14:03:26 +08:00
    @byewind 好的,那这网站其实就是托管在 framer 上面吗?国内访问会不会比较不稳定。
    byewind
        4
    byewind  
    OP
       2023-01-02 22:51:59 +08:00
    @xfxz 是托管在 Framer 上的, 你可以试试国内访问, 我目前访问还可以.
    Framer 的优势在于不用写代码, 设计操作方式和 Figma 非常接近, 所以体验很好.
    OkotoO
        5
    OkotoO  
       2023-01-03 07:35:57 +08:00
    @xfxz #3 你可以理解为 Framer 上的是源站, 而 Workers 是用来反代并对网站内容进行修改来添加背景动效. 所以你最终网站是否稳定和使用 Cloudflare CDN 在国内稳不稳定是直接挂钩的
    byewind
        6
    byewind  
    OP
       2023-01-03 08:06:15 +08:00
    其实用 Framer 制作的网站自定义域名, 加载 JS, 都不需要用到 Cloudflare. 完全可以通过升级成为 Framer 付费账号来做到这些. 用 Cloudflare 的原因就在于免费.
    为了免费, 所以才需要额外折腾很多东西. 包括像我这样完全不会编程的人要去折腾写 Worker, 结果是看了半天没学会, 然后就放弃了, 来这求助了. 还好得到了 @OkotoO 等人的帮助, 不然我是搞不定的.
    sillydaddy
        7
    sillydaddy  
       2023-01-03 09:33:46 +08:00
    > “ Framer 对设计师非常友好,上手难度低”
    楼主用的是 FramerWeb 吗?我之前专门看过 Framer X ,感觉对设计师很不友好,要懂 React 那一套。
    是 FramerWeb 又改进了吗?
    byewind
        8
    byewind  
    OP
       2023-01-03 09:43:44 +08:00
    @sillydaddy 你说的 FramerWeb 是什么? Framer 现在就是叫 Framer 👉https://www.framer.com/ . 这个软件前身是和 Figma 类似的软件, 后来竞争不过 Figma 就改成了现在这样. 现在的产品重心放在了开发网页, 尤其是官网和落地页上.
    使用下来体验比目前其他的网站开发软件都要好. 比如 webflow, wix 这些虽然功能强大, 但是使用体验并不好.
    使用 Framer 则可以像用 Figma 等设计工具那样来设计网站.
    sillydaddy
        9
    sillydaddy  
       2023-01-03 10:00:03 +08:00
    @byewind 感谢回复。虽然它的名字一直叫 Framer ,但是功能一直在变 🤷‍♂️,一开始是原型工具 Framer.js ,后来大改了一次思路变成了 Framer X ,现在看起来又转型了。
    byewind
        10
    byewind  
    OP
       2023-01-03 10:09:13 +08:00
    @sillydaddy 因为竞争太激烈了吧, 每个工具都能找出好几个类似的. Figma 也是在这样的围剿下杀出来的. 做网站的工具除了 webflow, wix, Framer 外还有很多. 比如 Canva, 能做非常简单的网站, 虽然功能很少, 但是却非常好用.
    byewind
        11
    byewind  
    OP
       2023-01-03 12:52:27 +08:00
    不知道现在是开发网站的开发者多还是开发 App 的开发者多, 有谁知道的话麻烦说下噢
    blankmiss
        12
    blankmiss  
       2023-01-03 23:26:13 +08:00
    chrome 得开硬件加速不然网站渲染有点卡
    byewind
        13
    byewind  
    OP
       2023-01-04 15:55:21 +08:00
    @blankmiss 这样吗, 那可能是 JS 库的运行耗费的内存太高了
    mikixinyuel
        14
    mikixinyuel  
       145 天前
    真的可以!感谢分享!虽然捣鼓半天但是每月立省!
    byewind
        15
    byewind  
    OP
       143 天前
    @mikixinyuel 是啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2824 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 13:34 · PVG 21:34 · LAX 06:34 · JFK 09:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.