Lopwon Festive 使用文档

2023年01月15日

demo-lopwon-festive.jpg

版本型号：Lopwon Festive
适用程序：Typecho
皮肤类型：插件
插件作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/lopwon-festive.html
许可方式：MIT
官方演示：Lopwon Festive

目前发现瑕疵：某些浏览器支持不佳（如 Mozilla Firefox），大概率是样式问题，可自行研究解决。
插件说明

Lopwon Festive 是 Typecho 博客氛围插件。在首屏显示具有图层透视、动画动效、鼠标跟随等视觉差画面，并且可以根据使用场景，通过自选图片素材和配置，来自定义画面内容、层叠关系、效果程度等等。可用在不同节日（春节、清明、端午、中秋等）展示自己 DIY 创作的氛围开屏画面，具有较高的可定制性。

插件更新

2023年01月21日 发布 Lopwon Festive v1.0.1 优化代码。

2023年01月17日 发布 Lopwon Festive
参考来源

特效使用 Parallax.js，图片使用 Freepik

使用方法

A 部署插件

1. 将压缩包里的文件夹 LopwonFestive 及其内部的所有文件，上传至目录 usr/plugins 中。

2. 后台》控制台》插件，找到 Lopwon Festive 并启用。

B 调用插件

在主题文件中的 <body> 后，注意：必须紧跟在 <body> 后面插入以下代码：


    <?php if ($this->is('index')) { Typecho_Plugin::factory('Lopwon_Festive')->Lopwon(); } ?>


例如


    <body>
    <?php if ($this->is('index')) { Typecho_Plugin::factory('Lopwon_Festive')->Lopwon(); } ?>


提示：不同主题的 <body> 会在不同文件中，如：header.php 或 index.php 或其他文件里。

C 配置插件

后台》控制台》插件，找到 Lopwon Festive 并设置，依喜好设置即可。

拓展使用

启用插件 Lopwon Festive 后，开屏画面默认为 2023 兔年，如需 DIY 不同节日场景画面，如下：

以下信息量较大，如果你有视觉设计基础、了解 CSS 属性的话，能更容易消化。

A 名词解释

开屏画面：插件 Lopwon Festive 在前台呈现的全屏内容。
背景图片：如演示中的红底云纹图片，存储在 LopwonFestive/img 文件夹，需为 png 格式。
图片元素：独立的图片素材（如演示中的：灯笼、祥云、兔子等），存储在 LopwonFestive/img 文件夹，需为 png 格式。
动效程度：图片元素跟随鼠标相对运动的幅度。
动画效果：样式 CSS 的动画属性 animation

B 工作原理

画面中的图片元素可以重复使用（如四朵祥云实际是同一张图片素材），通过配置不同的属性形成不同图片元素，只需要遵循：

位置关系：图片在屏幕的位置。
透视关系：图片近的大远的小。
图层关系：上层图片遮挡下层。
运动关系：距离近动画越明显。

C 创作画面

在 Lopwon Festive 插件设置里的（画面图片元素）项中，配置如下：

当然，首先需要准备图片素材，可以前往 Freepik 下载免费的、合适的、有图层的源文件，把要用到的素材分别导出保存为透明底的 png 格式，作为图片元素，上传至文件夹 LopwonFestive/img 中。

1. 每行配置一张图片元素的属性，由以下指定格式（５对英文括号）构成。其中，除移动端样式效果非必填外，其余必填。

2. 格式：(动效程度)(元素名称)(动画效果)(电脑端样式效果)(移动端样式效果)

3. 动效程度：使用 0~1.0 之间的值（如：0.3）。数值为 0 时图片无动效（鼠标跟随），数值越大动效越明显。

4. 元素名称：使用与文件夹 LopwonFestive/img 中对应图片一致的图片文件名（不含 .png），如：要配置图片 cloud.png 的属性，元素名称则为 cloud

5. 动画效果：使用 focus；phase-3；wave-3；swing-3 四种之一的效果。其中，除 focus 外，其他带阿拉伯数字的动画效果可使用 1~5 的值（如：phase-5 或 wave-2 或 swing-4），数值越大动画越明显。

6. 样式效果：包含电脑端和移动端（移动端非必填，但需要用 () 占位，否则该图片元素不显示）。

① 样式效果的设置包含四个参数，依次为 left,bottom,width,height 使用半角逗号隔开。
② 其中，使用 left 和 bottom 设置图片元素的位置，使用 width 和 height 设置图片元素的大小。
③ 注意，设置 left 和 bottom 勿使用 calc（插件已包含）和括号（插件不解析），只需把值录入即可，如 100vw - 135px
④ 另外，配置移动端样式时，请在手机上预览效果。
⑤ 示例：(0.3)(lantern)(swing-5)(225px,100vh - 145px,200px,300px)(70px,92vh,200px,300px)
⑥ 以上示例表示：图片 lantern.png 使用 0.3 程度的动效；使用 5 级的 swing 动画；图片在电脑端位于由左侧起 225px 由底部起 100vh - 145px 处，图片大小宽度 200px 高度 300px；图片在移动端位于由左侧起 70px 由底部起 92vh 处，图片大小宽度 200px 高度 300px

7. 元素图层关系：第一行信息输出的图片位于画面最底层，最末行元素信息输出的图片位于画面最顶层，即：下面行的图片会遮挡上面行的图片（与 Photoshop 的图层关系相反）。

8. 需要注意的是：如果要使用图片元素横向平铺（如演示中的：浪花），该图片的文件名必须包含 wave（如：wave-cloud），同时，需搭配使用 wave 动画效果（如：wave-3），其中，样式效果 left 的值已经默认为 -100% 且不支持自定义，可用任意值（如：0）代替占位，示例：(0.3)(wave-cloud)(wave-5)(0,70px,300px,150px)() 表示：图片 wave-cloud.png 使用 0.3 程度的动效；使用 5 级的 wave 动画；图片在电脑端横向平铺，位于由底部起 70px 处，图片大小宽度 300px 高度 150px；图片在移动端的样式不设置，使用电脑端的样式。

9. 动画效果说明：focus 以图片底部中心为基准，做左右摆动（类似机械节拍器）；phase-3 以图片元素中心为基准，做舒张呼吸；wave 以图片元素中心为基准，做圆周运动；swing 以图片顶部中心为基准，做左右摇摆（类似风吹的灯笼）。

This is a message

store