transport js

Author: Developer09264

assets/js/allQuotes.js

@@ -0,0 +1,21 @@
+
+const quoteListElement = document.getElementById("quote-list");
+
+fetch("../quotes.txt")
+    .then(response => {
+        if (!response.ok) throw new Error('Network response was not ok');
+        return response.text();
+    })
+    .then(data => {
+        quotes = data.split('\n').filter(quote => quote.trim() !== '');
+
+        // 将所有田语添加到田语列表
+        quotes.forEach(quote => {
+            const listItem = document.createElement("li");
+            listItem.innerHTML = quote;
+            quoteListElement.appendChild(listItem);
+        });
+    })
+    .catch(error => {
+        console.error('There was a problem with the fetch operation:', error);
+    });

assets/js/script.js

@@ -99,3 +99,30 @@ document.addEventListener('visibilitychange', function () {
     document.title = '田语 | 朴实无华，意蕴悠长';
   }
 });
+
+document.addEventListener("DOMContentLoaded", function () {
+
+  // 1. 选择所有需要动画的卡片
+  const cards = document.querySelectorAll('.nav-card');
+
+  // 2. 创建一个观察者 (Intersection Observer)
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      // 如果卡片进入了视口 (即用户滑到了这里)
+      if (entry.isIntersecting) {
+        // 添加 .show 类，触发 CSS 动画
+        entry.target.classList.add('show');
+
+        // 停止观察该元素 (保证动画只播放一次，往回滑不会再消失)
+        observer.unobserve(entry.target);
+      }
+    });
+  }, {
+    threshold: 0.1 // 意思是：当卡片露出 10% 的时候就开始播放动画
+  });
+
+  // 3. 让观察者开始观察每一个卡片
+  cards.forEach(card => {
+    observer.observe(card);
+  });
+});