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

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

  •  2
     
  •   byewind · 149 天前 · 2138 次点击
    这是一个创建于 149 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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