第一屏添加打字机效果和问候弹窗

settings.yaml

@@ -93,6 +93,15 @@ spec:
                   value: true
                 - label: 隐藏
                   value: false
+            - $formkit: repeater
+              name: typed
+              label: 打字机显示的文字
+              value: [ ]
+              children:
+                - $formkit: text
+                  name: text
+                  label: 文字
+                  placeholder: 请输入文字
             - $formkit: attachment
               name: index_img
               if: $get(enable_above).value

templates/assets/css/fullPage.css

@@ -1,8 +1,8 @@
 
 :root {
 
-    --light-grey:rgba(255,255,255,0.7);
+    --light-grey: rgba(255, 255, 255, 0.7);
-    --white: rgba(255,255,255,0.9);
+    --white: rgba(255, 255, 255, 0.9);
 }
 
 @media screen and (max-width: 768px) {
@@ -14,14 +14,16 @@
 }
 
 
-.back-home-button{
+.back-home-button {
-    color: rgba(255,255,255,0.7);
+    color: rgba(255, 255, 255, 0.7);
 }
-#nav #site-name{
+
+#nav #site-name {
     color: var(--light-grey);
 }
-#nav .site-page{
+
-    color: rgba(255,255,255,0.7);
+#nav .site-page {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 #page-header.full_page {
@@ -29,12 +31,14 @@
     background-attachment: fixed;
     border-radius: 0;
 }
+
 #page-header.full_page #site-info {
     position: absolute;
     top: 43%;
     padding: 0 10px;
     width: 100%;
 }
+
 #page-header #scroll-down {
     position: absolute;
     bottom: 0;
@@ -60,6 +64,7 @@
     -webkit-justify-content: center;
     justify-content: center;
 }
+
 #page-header #scroll-down .scroll-down-effects {
     position: relative;
     width: 100%;
@@ -132,4 +137,8 @@
 .pl-blur {
     /* 小图锯齿多，增加高斯模糊 */
     filter: blur(50px);
+}
+
+#nav a {
+    color: var(--light-grey);
 }

templates/modules/header/index-img.html

@@ -3,6 +3,7 @@
 <!-- 第一屏 -->
 <th:block th:fragment="index-img">
     <th:block th:if="${theme.config.top.above.enable_above}">
+        <div id="greetingBox"></div>
         <div class="pl-container">
             <div class="pl-img pl-blur pl-visible"></div>
             <div class="pl-img pl-visible"></div>
@@ -11,12 +12,187 @@
 
         <div id="site-info">
             <h1 id="site-title">[[${site.title}]]</h1>
+            <div id="site-subtitle">
+                <span id="subtitle"></span>
+                <span class="typed-cursor" aria-hidden="true"></span>
+            </div>
         </div>
         <div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
 
         <link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css'}">
 
         <style>
+            #site-title {
+                width: max-content;
+                max-width: 100%;
+                position: relative;
+                color: rgba(255, 255, 255, 0);
+                animation: 1.5s linear 1s 1 normal both running show;
+                margin: 0px auto !important;
+            }
+
+            #site-title::after {
+                content: "";
+                position: absolute;
+                left: 0px;
+                margin: auto;
+                border-radius: 12px;
+                top: 11px;
+                height: 55px;
+                width: 110%;
+                animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
+            }
+
+            @media screen and (max-width: 768px) {
+                #site-title::after {
+                    background: rgb(255, 255, 255) !important;
+                }
+            }
+
+            @media screen and (max-width: 768px) {
+                #site-subtitle::after {
+                    background: rgb(255, 255, 255) !important;
+                }
+            }
+
+            #site-subtitle {
+                width: 100%;
+                max-width: 100%;
+                position: relative;
+                animation: 1.5s linear 1s 1 normal both running show;
+                margin: 0px auto !important;
+            }
+
+            #site-subtitle::after {
+                content: "";
+                position: absolute;
+                left: 0px;
+                right: 0px;
+                margin: auto;
+                border-radius: 12px;
+                height: 100%;
+                width: 0%;
+                animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
+            }
+
+            @keyframes color_change {
+                0% {
+                    background: rgb(255, 255, 255);
+                }
+
+                100% {
+                    background: var(--xlfd-main);
+                }
+            }
+
+            @-webkit-keyframes color_change {
+                0% {
+                    background: rgb(255, 255, 255);
+                }
+
+                100% {
+                    background: var(--xlfd-main);
+                }
+            }
+
+            @-webkit-keyframes swipe_box {
+                0% {
+                    left: 0px;
+                    width: 0%;
+                }
+
+                50% {
+                    left: 0px;
+                    width: 100%;
+                }
+
+                100% {
+                    left: 100%;
+                    width: 0%;
+                }
+            }
+
+            @keyframes swipe_box {
+                0% {
+                    left: 0px;
+                    width: 0%;
+                }
+
+                50% {
+                    left: 0px;
+                    width: 100%;
+                }
+
+                100% {
+                    left: 100%;
+                    width: 0%;
+                }
+            }
+
+            @-webkit-keyframes swipe_box2 {
+                0% {
+                    left: 0px;
+                    width: 0%;
+                }
+
+                50% {
+                    left: 0px;
+                    width: 80%;
+                }
+
+                100% {
+                    left: 0px;
+                    width: 0%;
+                }
+            }
+
+            @keyframes swipe_box2 {
+                0% {
+                    left: 0px;
+                    width: 0%;
+                }
+
+                50% {
+                    left: 0px;
+                    width: 80%;
+                }
+
+                100% {
+                    left: 0px;
+                    width: 0%;
+                }
+            }
+
+            @-webkit-keyframes show {
+                0% {
+                    color: rgba(255, 255, 255, 0);
+                    text-shadow: transparent 2px 3px 10px;
+                }
+
+                81% {
+                    color: rgba(255, 255, 255, 0);
+                }
+
+                100% {
+                    color: rgb(255, 255, 255);
+                }
+            }
+
+            @keyframes show {
+                0% {
+                    color: rgba(255, 255, 255, 0);
+                    text-shadow: transparent 2px 3px 10px;
+                }
+
+                81% {
+                    color: rgba(255, 255, 255, 0);
+                }
+
+                100% {
+                    color: rgb(255, 255, 255);
+                }
+            }
+
             .pl-img {
                 background-image: url([[${theme.config.top.above.index_img}]]);
 
@@ -27,8 +203,125 @@
                     background-image: url([[${theme.config.top.above.phone_index_img}]]);
                 }
             }
-        </style>
 
+            .typed-cursor {
+                opacity: 1;
+            }
+
+            .typed-cursor.typed-cursor--blink {
+                animation: typedjsBlink 0.7s infinite;
+                -webkit-animation: typedjsBlink 0.7s infinite;
+                animation: typedjsBlink 0.7s infinite;
+            }
+
+            @keyframes typedjsBlink {
+                50% {
+                    opacity: 0.0;
+                }
+            }
+
+            @-webkit-keyframes typedjsBlink {
+                0% {
+                    opacity: 1;
+                }
+                50% {
+                    opacity: 0.0;
+                }
+                100% {
+                    opacity: 1;
+                }
+            }
+
+            #greetingBox {
+                position: fixed;
+                top: 10px;
+                left: 15%;
+                width: 400px;
+                text-align: center;
+                z-index: 999;
+                pointer-events: none
+            }
+
+            #greeting {
+                display: inline-block;
+                position: relative;
+                opacity: 0;
+                top: -110px;
+                padding: 5px 40px;
+                border-radius: 50px;
+                background-color: #fff;
+                color: #000;
+                font-size: small;
+                transition: .5s;
+                box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
+            }
+
+            #greeting.shown {
+                opacity: 1;
+                top: 0
+            }
+        </style>
+        <script th:inline="javascript">
+            function subtitleType() {
+                fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
+                    {
+                        const e = "出自 " + t.from;
+                        const n = [[${theme.config.top.above.typed}]].map((item)=>{
+                            return item.realNode.text;
+                        });
+                        n.unshift(t.hitokoto, e), window.typed = new Typed("#subtitle", {
+                            strings: n,
+                            startDelay: 300,
+                            typeSpeed: 100,
+                            loop: !0,
+                            backSpeed: 50
+                        })
+                    }
+                }))
+            }
+            "function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
+        </script>
+        <script>
+            (() => {
+                const e = [{greeting: "晚安😴", startTime: 0, endTime: 5}, {
+                    greeting: "早上好鸭👋, 祝你一天好心情！",
+                    startTime: 6,
+                    endTime: 9
+                }, {
+                    greeting: "上午好👋, 状态很好，鼓励一下～",
+                    startTime: 10,
+                    endTime: 10
+                }, {greeting: "11点多啦, 在坚持一下就吃饭啦～", startTime: 11, endTime: 11}, {
+                    greeting: "午安👋, 宝贝",
+                    startTime: 12,
+                    endTime: 14
+                }, {
+                    greeting: "🌈充实的一天辛苦啦！",
+                    startTime: 14,
+                    endTime: 18
+                }, {
+                    greeting: "19点喽, 奖励一顿丰盛的大餐吧🍔。",
+                    startTime: 19,
+                    endTime: 19
+                }, {greeting: "晚上好👋, 在属于自己的时间好好放松😌~", startTime: 20, endTime: 24}];
+                let t = document.createElement("div");
+                t.id = "greeting", setTimeout((() => {
+                    t.classList.add("shown")
+                }), 1e3);
+                let i = document.querySelector("#greetingBox");
+                i.appendChild(t);
+                const n = (new Date).getHours();
+                let r = "晚上好👋";
+                for (let t = 0; t < e.length; t++) if (n >= e[t].startTime && n <= e[t].endTime) {
+                    r = e[t].greeting;
+                    break
+                }
+                t.innerHTML = r, setTimeout((() => {
+                    t.classList.remove("shown"), setTimeout((() => {
+                        i.remove()
+                    }), 500)
+                }), 3e3)
+            })()</script>
     </th:block>
 </th:block>