使用Cloudflare的Workers为Framer做网页加载背景动效

Framer页面拷贝地址

https://framer.com/projects/new?duplicate=4t3Vb0oNE9RahlHL4DQa

目前的问题

背景动效只能对#main使用

#main是Framer生成页面自带的ID. 所以每个页面都有, 想要在A页面用背景特效,而B页面不用这样就无法实现.

Framer中可以为页面元素自定义ID, 但是经过我测试自定义的ID无法正常加载飞鸟背景动效, 我找不到原因.

实现方法

在Cloudflare中的Worker代码

// /////////////////////////////////
// 用样式去除body的滚动条, 隐藏Framer的logo, 加载飞鸟动效
// /////////////////////////////////
const InjectElement =
`<style type="text/css">
  .__framer-badge {
    display: none !important;
  }
  .vanta-canvas {
    z-index: 1 !important;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
  div#main > div > div:not(#overlay) {
    height: 100vh;
    overflow-y: auto;
  }
</style>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js>"></script>
<script>
  VANTA.BIRDS({
    el: "#main",
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    backgroundColor: 0x0,
    color1: 0x521efc,
    color2: 0x14ffc7,
    colorMode: "lerp",
    wingSpan: 40.00,
    speedLimit: 10.00,
    separation: 100.00,
    alignment: 100.00,
    cohesion: 100.00
  })
</script>
</body>`

// /////////////////////////////////
// 以下为自定义域名
// /////////////////////////////////
addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {

  // 目标地址
  const target_host = "byewind.framer.website";

  const hostnameReplacer = new RegExp((new URL(request.url)).hostname, "gi")
  console.log(hostnameReplacer)

  // 替换请求的域名到目标地址
  const url = request.url
    .replace(hostnameReplacer, target_host)

  const originalResponse = await fetch(url);
  if (originalResponse.headers.get('Content-Type') === 'text/html') {

    const rewritedContent = await originalResponse.text().then(text => {

      return text.replace('</body>', InjectElement);

    });

    return new Response(rewritedContent, originalResponse)

  } else {
    return originalResponse
  }
}

其他

在cloudflare中需要配置DNS和workers, 具体配置请看下图. byewind为对应的workers