Skip to content

ZH‐CN

Jump to bottom
TheD0ubleC edited this page Jun 13, 2024 · 2 revisions

樱花和星星背景包

ONLine Demo | 在线演示

English | 简体中文 | 繁體中文 | 日本語

一个轻量级的 JavaScript 库，用于在网页上添加美丽的樱花和星星粒子背景效果。

功能

  • 樱花（樱花瓣）和星星粒子。
  • 夜间模式切换。
  • 响应和交互性，支持鼠标和设备方向。

安装

使用 script 标签

你可以通过 GitHub Pages 链接或 Cloudflare Pages 链接直接包含该包。

GitHub Pages

<script type="module">
    import backgroundEffect from 'https://thed0ublec.github.io/ParticleBackground/package/backgroundEffect.js';
    backgroundEffect.init();
</script>

Cloudflare Pages

<script type="module">
    import backgroundEffect from 'https://background-dhy.pages.dev/backgroundEffect.js';
    backgroundEffect.init();
</script>

使用

基本使用

  1. 包含脚本

    确保在你的 HTML 文件中包含 backgroundEffect.js 脚本：

    <script type="module">
    import backgroundEffect from 'https://thed0ublec.github.io/ParticleBackground/package/backgroundEffect.js';
    backgroundEffect.init();
</script>

    或者，使用 Cloudflare Pages URL：

    <script type="module">
    import backgroundEffect from 'https://background-dhy.pages.dev/backgroundEffect.js';
    backgroundEffect.init();
</script>

  2. 添加所需的图像

    确保所需的图像（sakura.png 和 star.png）位于相应的 GitHub Pages 或 Cloudflare Pages 路径下。图像文件应直接放在相应的目录下。如果将图像放在不同的目录，请相应地更新 backgroundEffect.js。

示例

以下是一个完整的示例，演示如何使用背景效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试背景效果</title>
    <style>
        body {
            position: relative; /* 确保主体内容正确定位 */
            z-index: 1; /* 确保主体内容在背景层上方 */
        }
    </style>
</head>
<body>
    <h1>测试1</h1>
    <script type="module">
        import backgroundEffect from 'https://thed0ublec.github.io/ParticleBackground/package/backgroundEffect.js';
        backgroundEffect.init();
    </script>
    <!-- 或者，使用 Cloudflare Pages URL -->
    <!-- <script type="module">
        import backgroundEffect from 'https://background-dhy.pages.dev/backgroundEffect.js';
        backgroundEffect.init();
    </script> -->
    <h1>测试2</h1>
</body>
</html>

自定义

你可以通过修改 backgroundEffect.js 文件来自定义粒子的数量、大小和其他属性。

更改粒子数量

要更改最大粒子数量，可以更新 backgroundEffect.js 文件中的 maxParticles 变量：

const maxParticles = 100; // 增加或减少粒子数量

更新粒子图像

要为粒子使用不同的图像，请在 backgroundEffect.js 文件中更新 createParticle 和 updateParticleImages 函数以引用新图像。

许可证

此项目根据 MIT 许可证授权。

贡献

如果你发现任何问题或有改进建议，请随时在 GitHub 仓库 中提出问题或提交拉取请求。

联系方式

如有任何问题或查询，请联系 TheD0ubleC。

Clone this wiki locally