版本型号：Lopwon Festive
适用程序：Typecho
皮肤类型：插件
插件作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/lopwon-festive.html
官方演示：Lopwon Festive，更多节日配置
插件说明
Lopwon Festive 是 Typecho 博客氛围插件。在首屏显示具有图层透视、动画动效、鼠标跟随等视觉差画面，并且可以根据使用场景，通过自选图片素材和配置，来自定义画面内容、层叠关系、效果程度等等。可用在不同节日（春节、清明、端午、中秋等）展示自己 DIY 创作的氛围开屏画面，具有较高的可定制性。
目前发现瑕疵：某些浏览器支持不佳，如 Mozilla Firefox
注意：此插件仅供自用，请勿分发，请勿商用，且不对你在使用中产生的任何问题造成的不良后果，承担责任。
插件更新
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 并设置，依喜好设置即可。
D 使用技巧
1. 点击画面任意处可以平滑下移到内容区。
2. 待补充……
拓展使用
启用插件 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 以图片顶部中心为基准，做左右摇摆（类似风吹的灯笼）。
D 分享画面
期待各位小伙伴分享自己依此创作的画面，你的昵称和博客链接将在本页展示。
节日配置
1. 从下表中下载（图片素材）文件包解压后，把图片素材上传至插件文件夹 LopwonFestive/img 中。
2. 将下表中对应（图片元素）代码粘贴至插件 Lopwon Festive 设置里的（画面图片元素）项中，全部替换之前的。
试试手气，直接中
厉害厉害
给博客加一点小动效真的很可爱
感谢哇，来试试
这个写的真的很好看
谢谢分享
该插件有没有最新版呢