add some animation

.vitepress/theme/Layout.vue

@@ -1,9 +1,8 @@
-
-
 <template>
     <DefaultTheme.Layout id="k-layout">
-
     </DefaultTheme.Layout>
+    <ScrollBar />
+
 </template>
 
 <script setup lang="ts">
@@ -12,6 +11,13 @@ import DefaultTheme from 'vitepress/theme';
 import { nextTick, onMounted, provide } from 'vue';
 import mediumZoom from "medium-zoom";
 import { animateIn, animateOut } from './hook/animate';
+import ScrollBar from './components/scrollbar/index.vue';
+
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// 注册插件
+gsap.registerPlugin(ScrollTrigger);
 
 const data = useData()
 const router = useRouter()
@@ -21,6 +27,7 @@ const enableTransitions = () =>
 
 const isDark = data.isDark;
 
+
 const setupMediumZoom = () => {
     mediumZoom("[data-zoomable]", {
         background: "transparent",
@@ -65,14 +72,78 @@ const handleRouteChangeStart = async (to: string) => {
 const handleRouteChangeComplete = async (to: string) => {
     await animateOut();
     setupMediumZoom();
+
+    makeHomeAnimation();
 };
 
 
 router.onBeforeRouteChange = handleRouteChangeStart;
 router.onAfterRouteChange = handleRouteChangeComplete;
 
+function makeHomeAnimation() {
+    if (router.route.path !== '/openmcp/') {
+        return;
+    }
+
+    gsap.from(".main", {
+        opacity: 0,      // 初始透明度
+        x: -100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+    gsap.from(".VPHero .VPImage", {
+        opacity: 0,      // 初始透明度
+        x: 100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+    gsap.from(".VPFeatures.VPHomeFeatures", {
+        opacity: 0,      // 初始透明度
+        y: 100,          // 初始位置（向下偏移100px）
+        duration: 1.2,     // 动画时长
+        ease: "power2.out", // 缓动函数（平滑结束）
+    });
+
+
+    const elements = [
+        { selector: ".bilibili-player-container", start: "top 65%", end: "top 65%" },
+        { selector: "#openmcp-为谁准备", trigger: '#openmcp-为谁准备', start: "top 65%", end: "top 65%" },
+        { selector: ".k-tabs", trigger: '#openmcp-为谁准备', start: "top 65%", end: "top 65%" },
+        { selector: "#问题解答-faq", trigger: '#问题解答-faq', start: "top 65%", end: "top 65%" },
+        { selector: ".el-collapse", trigger: '#问题解答-faq', start: "top 65%", end: "top 65%" },
+    ];
+
+    elements.forEach(element => {
+        gsap.fromTo(element.selector, 
+            {
+                opacity: 0,
+                y: 100,
+                duration: 1.2,
+                ease: "power2.out",
+            },
+            { 
+                opacity: 1,
+                y: 0,
+                duration: 1.2, // 延长动画时间
+                ease: "power2.out", // 添加缓动效果
+                scrollTrigger: {
+                    trigger: element.trigger || element.selector,
+                    start: "top 70%",
+                    end: "top 70%",
+                    scrub: false,
+                    toggleActions: "play none reverse none",
+                }
+            }
+        );
+    });
+}
+
 onMounted(() => {
     setupMediumZoom();
+
+    makeHomeAnimation();
 });
 </script>
 
@@ -82,6 +153,13 @@ onMounted(() => {
     transition: background-color 0.15s ease, color 0.3s ease;
 }
 
+
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    width: 0px;
+}
+
 .medium-zoom-overlay {
     backdrop-filter: blur(5rem);
 }
@@ -109,5 +187,4 @@ onMounted(() => {
     transform: translateY(100px);
     opacity: 0;
 }
-
 </style>

.vitepress/theme/components/KTab/index.vue

@@ -78,6 +78,7 @@ const tabsContainer: TabsContainer = reactive({
         const container = tabsContainer.panelContainer;
         const panels = Array.from(container.children) as HTMLElement[];
 
+        // 进行动画切换
         panels.forEach((panel, index) => {
             console.log('index', index);
             console.log('id', id);

.vitepress/theme/components/bilibli-player/index.vue

@@ -54,7 +54,7 @@ function playVideo() {
     aspect-ratio: 16/9;
     border-radius: .5em;
     overflow: hidden;
-    border: 2px solid var(--vp-c-brand-3);
+    border: 3px solid var(--vp-c-brand-2);
 }
 
 .cover-container {
@@ -78,7 +78,7 @@ function playVideo() {
     width: 64px;
     height: 64px;
     border-radius: 50%;
-    background-color: var(--vp-c-brand-3);
+    background-color: var(--vp-c-brand-2);
     border: none;
     color: var(--vp-c-bg);
     cursor: pointer;

.vitepress/theme/components/scrollbar/controller.ts

@@ -0,0 +1,25 @@
+import { reactive } from 'vue';
+
+interface ScrollbarController {
+    element: any;
+    display: boolean;
+    height: number;
+    width: number;
+    top: number;
+    opacity: number;
+    percentage: number;
+}
+
+export const scrollbarController = reactive<ScrollbarController>({
+    element: undefined,
+    display: true,
+    height: 200,
+    width: 5,
+    top: 0,
+    opacity: 0,
+    percentage: 0
+});
+
+export const navigationBarController = reactive({
+    show: true
+});

.vitepress/theme/components/scrollbar/index.vue

@@ -0,0 +1,113 @@
+<template>
+    <div
+        class="k-scrollerbar"
+        :style="scrollbarStyle"
+        :ref="el => scrollbarController.element = el"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+    >
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { scrollbarController } from './controller';
+import { navigationBarController } from './controller';
+
+const scrollbarStyle = computed(() => ({
+    height: scrollbarController.height + 'px',
+    width: scrollbarController.width + 'px',
+    opacity: scrollbarController.opacity
+}));
+
+let disappearHandler: undefined | number = undefined;
+
+function clearDisappearHandler() {
+    if (disappearHandler) {
+        clearTimeout(disappearHandler);
+    }
+}
+
+function hideDisappearHandler(timeout=500) {
+    disappearHandler = setTimeout(() => {
+        scrollbarController.opacity = 0;
+    }, timeout);
+}
+
+function onMouseEnter() {
+    clearDisappearHandler();
+    scrollbarController.opacity = 1;
+    scrollbarController.width = 8;
+}
+
+function onMouseLeave() {
+    scrollbarController.width = 5;
+    hideDisappearHandler(1000);
+}
+
+function onScroll(event) {    
+    clearDisappearHandler();
+    scrollbarController.opacity = 1;
+    // 总高度
+    const totalHeight = document.documentElement.scrollHeight;
+    // 视窗高度
+    const viewportHeight = window.innerHeight;
+    
+    // 如果视窗高度都大于总高度，不需要显示
+    if (viewportHeight >= totalHeight) {
+        scrollbarController.opacity = 0;
+        return;
+    }
+
+    // 当前的滚动距离 [0, totalHeight - viewportHeight]
+    const scrollPosition = window.scrollY;
+
+    // 计算滚动条的大小和位置
+    const ratio = viewportHeight / totalHeight;
+    const scrollbarHeight = Math.max(20, viewportHeight * ratio);
+
+    // top 取值为 [0, viewportHeight - scrollbarHeight]
+    const percentage = scrollPosition / (totalHeight - viewportHeight);
+    const scrollbarTop = percentage * (viewportHeight);
+    
+    scrollbarController.height = scrollbarTop;
+    // scrollbarController.top = scrollbarTop;
+    scrollbarController.percentage = percentage;
+}
+
+function onScrollEnd() {
+    hideDisappearHandler();
+}
+
+function onWheel(event) {
+    if (event.deltaY > 0) {
+        navigationBarController.show = false;        
+    } else {
+        navigationBarController.show = true;
+    }
+}
+
+document.addEventListener('scroll', onScroll);
+document.addEventListener('scrollend', onScrollEnd);
+document.addEventListener('resize', onScroll);
+document.addEventListener('wheel', onWheel);
+
+</script>
+
+<style>
+.k-scrollerbar {
+    left: 0;
+    top: 0;
+    background-color: var(--vp-c-brand-2);
+    border-radius: .3em;
+    position: fixed;
+    z-index: 200;
+    transition-property: width, opacity;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+}
+
+
+</style>

.vitepress/theme/css/animation.css

@@ -0,0 +1,52 @@
+
+
+.tagline {
+    width: fit-content;
+}
+
+.tagline {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    padding: 0.5rem 0;
+    cursor: pointer;
+}
+
+.tagline:hover::before {
+    transform: translateX(0);
+}
+
+.tagline::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    background-color: var(--vp-c-brand-2);
+    transform: translateX(-105%);
+    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+
+.VPFeatures .item {
+    cursor: pointer;
+    transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.VPFeatures .item:hover {
+    transform: scale(1.05);
+}
+
+.VPFeatures .item .box {
+    transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
+    border-radius: .5em;
+}
+
+.VPFeatures .item:hover .box {
+    background-color: var(--vp-c-brand-3);
+}
+
+.VPFeatures .item:hover .box .details {
+    color: var(--vp-c-white);
+}

.vitepress/theme/css/style.css

@@ -49,10 +49,14 @@
     --vp-c-default-3: var(--vp-c-gray-3);
     --vp-c-default-soft: var(--vp-c-gray-soft);
 
-	--vp-c-brand-1: #d8a8e7; /* 较深的变体 */
+    --vp-c-brand-1: #d8a8e7;
-	--vp-c-brand-2: #C285D6; /* 基底颜色 */
+    /* 较深的变体 */
-	--vp-c-brand-3: #a368b8; /* 较浅的变体 */
+    --vp-c-brand-2: #C285D6;
-	--vp-c-brand-soft: rgba(194, 133, 214, 0.1); /* 半透明的柔和版本 */
+    /* 基底颜色 */
+    --vp-c-brand-3: #a368b8;
+    /* 较浅的变体 */
+    --vp-c-brand-soft: rgba(194, 133, 214, 0.1);
+    /* 半透明的柔和版本 */
 
     --vp-c-tip-1: var(--vp-c-brand-1);
     --vp-c-tip-2: var(--vp-c-brand-2);
@@ -232,7 +236,7 @@ iframe {
 
 /* 自定义全局滚动条样式 */
 ::-webkit-scrollbar {
-  width: 8px;
+    width: 0px;
 }
 
 ::-webkit-scrollbar-track {
@@ -247,3 +251,20 @@ iframe {
 ::-webkit-scrollbar-thumb:hover {
     background: var(--vp-c-brand-2);
 }
+
+/* 设置选中文本的背景色和文字颜色 */
+::selection {
+    background: var(--vp-c-brand-2);
+    color: white;
+}
+
+/* 兼容 Firefox */
+::-moz-selection {
+    background: var(--vp-c-brand-2);
+    color: white;
+}
+
+.VPHero .name.clip {
+    color: var(--vp-c-brand-2) !important;
+    background-color: var(--vp-c-brand-2) !important;
+}

.vitepress/theme/index.mts

@@ -20,6 +20,7 @@ import { ElCollapse, ElCollapseItem, ElTimeline, ElTimelineItem } from 'element-
 import './css/style.css';
 import './css/iconfont.css';
 import './css/element-plus.css';
+import './css/animation.css';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css';
 import '@nolebase/vitepress-plugin-inline-link-preview/client/style.css';

package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "dependencies": {
         "element-plus": "^2.9.11",
+        "gsap": "^3.13.0",
         "vitepress": "^1.6.3"
       },
       "devDependencies": {
@@ -3962,6 +3963,11 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
+    },
     "node_modules/hachure-fill": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "element-plus": "^2.9.11",
+    "gsap": "^3.13.0",
     "vitepress": "^1.6.3"
   },
   "devDependencies": {