feat: first screen description add typewriter effect

Author: XPoet

layout/_partial/first-screen.ejs

@@ -1,7 +1,6 @@
 <%
 const { description: fs_description, hitokoto: fs_hitokoto } = theme?.style?.first_screen || {}
-const { description: c_description } = config
-let final_description = fs_description || c_description || ''
+let final_description = fs_description || ''
 final_description = final_description.split('||').map(desc => desc.trim())
 if (final_description.length > 2) { final_description.length = 2 }
 const { enable: sc_enable, links: sc_links } = theme?.social_contact || {}
@@ -12,9 +11,15 @@ const { enable: sc_enable, links: sc_links } = theme?.social_contact || {}
 
         <div class="middle-placeholder border-box">
             <% if (final_description.length || fs_hitokoto === true) { %>
-                <div class="description hitokoto">
-                    <% for (const idx in final_description) { %>
-                        <div class="desc-item"><%= final_description[idx] %></div>
+                <div class="description border-box">
+                    <% if (fs_hitokoto === true) { %>
+                        <div class="desc-item border-box"><span class="desc hitokoto"></span><span class="cursor">｜</span></div>
+                    <% } else { %>
+                        <% for (const idx in final_description) { %>
+                            <% if (final_description[idx]) { %>
+                                <div class="desc-item border-box"><span class="desc"><%= final_description[idx] %></span><span class="cursor">｜</span></div>
+                            <% } %>
+                        <% } %>
                     <% } %>
                 </div>
             <% } %>
@@ -65,6 +70,5 @@ const { enable: sc_enable, links: sc_links } = theme?.social_contact || {}
                 </div>
             <% } %>
         </div>
-
     </div>
 </div>

scripts/helpers/export-config.js

@@ -40,7 +40,6 @@ hexo.extend.helper.register('exportThemeConfig', function () {
     style: theme.style || {},
     local_search: theme.local_search || {},
     code_block: theme.code_block || {},
-    side_tools: theme.side_tools || {},
     pjax: theme.pjax || {},
     lazyload: theme.lazyload || {},
     comment: theme.comment || {},

source/css/common/animated.styl

@@ -42,6 +42,34 @@ transition-t(property, delay, duration, function) {
 }
 
 
+.title-hover-animation {
+  position relative
+  display inline-block
+  color var(--text-color-2)
+  line-height 1.3
+  vertical-align top
+  border-bottom none
+
+  &::before {
+    position absolute
+    bottom -4px
+    left 0
+    width 100%
+    height 2px
+    background-color var(--text-color-2)
+    transform scaleX(0)
+    visibility hidden
+    content ""
+    transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out")
+  }
+
+  &:hover::before {
+    transform scaleX(1)
+    visibility visible
+  }
+}
+
+
 @keyframes fade-in-down {
   0% {
     transform translateY(-50px)
@@ -84,31 +112,12 @@ transition-t(property, delay, duration, function) {
   }
 }
 
-.title-hover-animation {
-  position relative
-  display inline-block
-  color var(--text-color-2)
-  line-height 1.3
-  vertical-align top
-  border-bottom none
-
-  &::before {
-    position absolute
-    bottom -4px
-    left 0
-    width 100%
-    height 2px
-    background-color var(--text-color-2)
-    transform scaleX(0)
-    visibility hidden
-    content ""
-    transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out")
+@keyframes blink-caret {
+  from
+  to {
+    opacity 0
   }
-
-  &:hover::before {
-    transform scaleX(1)
-    visibility visible
+  50% {
+    opacity 1
   }
 }
-
-

source/css/layout/_partial/first-screen.styl

@@ -54,13 +54,23 @@ $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
         color var(--first-screen-font-color-dark)
 
         .desc-item {
-          color var(--first-screen-font-color-dark)
+          .desc
+          .cursor {
+            color var(--first-screen-font-color-dark)
+          }
         }
       }
 
 
       .desc-item {
-        color var(--first-screen-font-color-light)
+        .desc {
+          color var(--first-screen-font-color-light)
+        }
+
+        .cursor {
+          color var(--first-screen-font-color-light)
+          animation blink-caret 0.8s step-end infinite
+        }
       }
 
 

source/js/utils.js

@@ -561,6 +561,53 @@ KEEP.initUtils = () => {
             })
           })
         })
+    },
+
+    initTypewriter() {
+      const fsc = KEEP.theme_config?.style?.first_screen || {}
+      const isHitokoto = fsc?.hitokoto === true
+
+      if (fsc?.enable !== true) {
+        return
+      }
+
+      if (fsc?.enable === true && !isHitokoto && !fsc?.description) {
+        return
+      }
+
+      const descBox = document.querySelector('.first-screen-content .description')
+      if (descBox) {
+        descBox.style.opacity = '0'
+
+        setTimeout(
+          () => {
+            descBox.style.opacity = '1'
+            const descItemList = descBox.querySelectorAll('.desc-item')
+            descItemList.forEach((descItem) => {
+              const desc = descItem.querySelector('.desc')
+              const cursor = descItem.querySelector('.cursor')
+              const text = desc.innerHTML
+              desc.innerHTML = ''
+              let charIndex = 0
+
+              if (text) {
+                const typewriter = () => {
+                  if (charIndex < text.length) {
+                    desc.textContent += text.charAt(charIndex)
+                    charIndex++
+                    setTimeout(typewriter, 100)
+                  } else {
+                    cursor.style.display = 'none'
+                  }
+                }
+
+                typewriter()
+              }
+            })
+          },
+          isHitokoto ? 400 : 300
+        )
+      }
     }
   }
 
@@ -596,4 +643,7 @@ KEEP.initUtils = () => {
 
   // tabs active handle
   KEEP.utils.tabsActiveHandle()
+
+  // first screen typewriter
+  KEEP.utils.initTypewriter()
 }