feat: parallax 小玩意

.vitepress/theme/index.js

@@ -4,6 +4,7 @@ import { h, watch } from 'vue'
 import DefaultTheme from 'vitepress/theme-without-fonts'
 import Download from '../../components/Download.vue'
 import Bilibili from '../../components/Bilibili.vue'
+import Parallax from '../../components/Parallax.vue'
 import './style.css'
 import './rainbow.css'
 
@@ -20,6 +21,7 @@ export default {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('Download', Download)
     ctx.app.component('Bilibili', Bilibili)
+    ctx.app.component('Parallax', Parallax)
     if (typeof window === 'undefined')
       return
 

components/Parallax.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { useParallax } from '@vueuse/core'
+const target = ref(null)
+
+
+const parallax = reactive(useParallax(target))
+
+const targetStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  transition: '.3s ease-out all',
+}
+const cardWindowStyle: CSSProperties = {
+  overflow: 'hidden',
+  fontSize: '6rem',
+  position: 'absolute',
+  top: 'calc(50% - 1em)',
+  left: 'calc(50% - 1em)',
+  height: '2em',
+  width: '2em',
+  margin: 'auto',
+}
+const layerBase: CSSProperties = {
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  transition: '.3s ease-out all',
+}
+const containerStyle: CSSProperties = {
+  margin: '3em auto',
+  perspective: '300px',
+}
+
+const layer0 = computed(() => ({
+  ...layerBase,
+  transform: `translateX(${parallax.tilt * 10}px) translateY(${
+    parallax.roll * 10
+  }px) scale(1)`,
+}))
+
+const layer1 = computed(() => ({
+  ...layerBase,
+  transform: `translateX(${parallax.tilt * 20}px) translateY(${
+    parallax.roll * 20
+  }px) scale(1.33)`,
+}))
+
+const layer2 = computed(() => ({
+  ...layerBase,
+  transform: `translateX(${parallax.tilt * 30}px) translateY(${
+    parallax.roll * 30
+  }px) scale(1.33)`,
+}))
+
+const layer3 = computed(() => ({
+  ...layerBase,
+  transform: `translateX(${parallax.tilt * 40}px) translateY(${
+    parallax.roll * 40
+  }px) scale(1.33)`,
+}))
+
+const layer4 = layerBase
+
+const cardStyle = computed(() => ({
+  background: '',
+  height: '20rem',
+  width: '15rem',
+  borderRadius: '5px',
+  border: '1px solid #000000',
+  overflow: 'hidden',
+  transition: '.3s ease-out all',
+  boxShadow: '0 0 20px 0 rgba(255, 255, 255, 0.1)',
+  transform: `rotateX(${parallax.roll * 20}deg) rotateY(${
+    parallax.tilt * 20
+  }deg)`,
+}))
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<template>
+  <div>
+    <div ref="target" :style="targetStyle">
+      <div :style="containerStyle">
+        <div :style="cardStyle">
+          <div :style="cardWindowStyle">
+            <img
+              :style="layer0"
+              src="/hdu-cs-wiki main.png"
+              class="image"
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

contributors.md

@@ -5,7 +5,7 @@ import { members } from './members.ts'
 </script>
 
 # 贡献者名单
-
+<Parallax/>
 以下为对本项目做出贡献的人员名单，排名不分先后。
 
 <VPTeamMembers size="small" :members="members" />

简介.md

@@ -1,4 +1,5 @@
 # HDU计算机科学讲义
+<Parallax />
 ## 序言
 
 相信看到这个wiki的同学都对计算机专业有着或多或少的期待，或许有人因小时候某次电视上的黑客操作所振奋，或许有人是被全民编程的时代浪潮席卷而来，渴望着高薪的工作，或者又有人因为渴望着用编程改变世界。
@@ -38,7 +39,8 @@
 **群号：669895692**
 
 ::: tip 🤔
-#### **为什么我要花大量的时间与折磨受这样的训练？**
+
+### 为什么我要花大量的时间与折磨受这样的训练？
 
 因为你来大学的主要目的，就是进行学习，而学校的传授的内容往往是不能满足成为一个合格的 CSer 的全部需求的。
 
@@ -49,6 +51,7 @@
 教育除了知识的记忆之外， 更本质的是能力的训练， 即所谓的 training。 而但凡 training 就必须克服一定的难度， 否则你就是在做重复劳动， 能力也不会有改变。 如果遇到难度就选择退缩， 或者让别人来替你克服本该由你自己克服的难度， 等于是自动放弃了获得 training 的机会， 而这其实是大学专业教育最宝贵的部分。 —— etone
 
 :::
+
 ## 学习原则
 
 1. 建议保持至少一半时间在实操，一半时间在学理论知识，比例未必正确的，但是强调实操和反馈的重要性，如果你上来就拿一本经典的花书看，只看理论或者上来就整一段开源代码，势必会陷入不同程度的盲目和困苦当中。