From f2a46337880d122b44353303683e0b8ee8b002a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E9=98=B4=E5=A4=A9?= <overcast404@163.com>
Date: Sat, 16 Mar 2024 06:40:57 +0000
Subject: [PATCH] docs: update home

---
 home.html | 693 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 683 insertions(+), 10 deletions(-)
diff --git a/home.html b/home.html
index c9ad040..16f34b4 100644
--- a/home.html
+++ b/home.html
@@ -2,18 +2,691 @@
 title: 欢迎
 description: 
 published: true
-date: 2024-03-16T06:37:41.495Z
+date: 2024-03-16T06:40:55.541Z
 tags: 
 editor: code
 dateCreated: 2023-02-19T05:55:06.863Z
 -->
 
-<h1>这里存放的是吴阴天可以对外开放的数据</h1>
-<h2>如果你来错了地方，那你可以试试看：</h2>
-<ol>
-  <li>可以找到我所有酷酷东西的<a href="https://ocer.cc">主页（维护中）</a>。</li>
-  <li>含有我对于一切事物思考的<a href="https://world.ocer.cc">我的博客</a>。</li>
-  <li>我的一些<a href="https://now.ocer.cc">碎碎念</a>。</li>
-  <li>可能你想要我得到的一些好看图片？那可以看看<a href="https://chevereto.ocer.cc/">我的图床</a>。</li>
-  <li>我的代码都是开源的，如果需要，你可以在我的<a href="https://gitea.ocer.cc/">代码仓库</a>找到。</li>
-</ol>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CSS Cards</title>
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  
+<div class="app">
+  <div class="cardList">
+    <button class="cardList__btn btn btn--left">
+      <div class="icon">
+        <svg>
+          <use xlink:href="#arrow-left"></use>
+        </svg>
+      </div>
+    </button>
+
+    <div class="cards__wrapper">
+      <div class="card current--card">
+        <div class="card__image">
+          <img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
+        </div>
+      </div>
+
+      <div class="card next--card">
+        <div class="card__image">
+          <img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
+        </div>
+      </div>
+
+      <div class="card previous--card">
+        <div class="card__image">
+          <img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <button class="cardList__btn btn btn--right">
+      <div class="icon">
+        <svg>
+          <use xlink:href="#arrow-right"></use>
+        </svg>
+      </div>
+    </button>
+  </div>
+
+  <div class="infoList">
+    <div class="info__wrapper">
+      <div class="info current--info">
+        <h1 class="text name">Highlands</h1>
+        <h4 class="text location">Scotland</h4>
+        <p class="text description">The mountains are calling</p>
+      </div>
+
+      <div class="info next--info">
+        <h1 class="text name">Machu Pichu</h1>
+        <h4 class="text location">Peru</h4>
+        <p class="text description">Adventure is never far away</p>
+      </div>
+
+      <div class="info previous--info">
+        <h1 class="text name">Chamonix</h1>
+        <h4 class="text location">France</h4>
+        <p class="text description">Let your dreams come true</p>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="app__bg">
+    <div class="app__bg__image current--image">
+      <img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
+    </div>
+    <div class="app__bg__image next--image">
+      <img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
+    </div>
+    <div class="app__bg__image previous--image">
+      <img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
+    </div>
+  </div>
+</div>
+
+<div class="loading__wrapper">
+  <div class="loader--text">Loading...</div>
+  <div class="loader">
+    <span></span>
+  </div>
+</div>
+
+
+<svg class="icons" style="display: none;">
+  <symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+    <polyline points='328 112 184 256 328 400'
+           style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+  </symbol>
+  <symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+    <polyline points='184 112 328 256 184 400'
+           style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+  </symbol>
+</svg>
+
+<script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
+<script type="text/javascript" src="script.js"></script>
+</body>
+  <script type="text/javascript">
+  console.clear();
+
+const { gsap, imagesLoaded } = window;
+
+const buttons = {
+	prev: document.querySelector(".btn--left"),
+	next: document.querySelector(".btn--right"),
+};
+const cardsContainerEl = document.querySelector(".cards__wrapper");
+const appBgContainerEl = document.querySelector(".app__bg");
+
+const cardInfosContainerEl = document.querySelector(".info__wrapper");
+
+buttons.next.addEventListener("click", () => swapCards("right"));
+
+buttons.prev.addEventListener("click", () => swapCards("left"));
+
+function swapCards(direction) {
+	const currentCardEl = cardsContainerEl.querySelector(".current--card");
+	const previousCardEl = cardsContainerEl.querySelector(".previous--card");
+	const nextCardEl = cardsContainerEl.querySelector(".next--card");
+
+	const currentBgImageEl = appBgContainerEl.querySelector(".current--image");
+	const previousBgImageEl = appBgContainerEl.querySelector(".previous--image");
+	const nextBgImageEl = appBgContainerEl.querySelector(".next--image");
+
+	changeInfo(direction);
+	swapCardsClass();
+
+	removeCardEvents(currentCardEl);
+
+	function swapCardsClass() {
+		currentCardEl.classList.remove("current--card");
+		previousCardEl.classList.remove("previous--card");
+		nextCardEl.classList.remove("next--card");
+
+		currentBgImageEl.classList.remove("current--image");
+		previousBgImageEl.classList.remove("previous--image");
+		nextBgImageEl.classList.remove("next--image");
+
+		currentCardEl.style.zIndex = "50";
+		currentBgImageEl.style.zIndex = "-2";
+
+		if (direction === "right") {
+			previousCardEl.style.zIndex = "20";
+			nextCardEl.style.zIndex = "30";
+
+			nextBgImageEl.style.zIndex = "-1";
+
+			currentCardEl.classList.add("previous--card");
+			previousCardEl.classList.add("next--card");
+			nextCardEl.classList.add("current--card");
+
+			currentBgImageEl.classList.add("previous--image");
+			previousBgImageEl.classList.add("next--image");
+			nextBgImageEl.classList.add("current--image");
+		} else if (direction === "left") {
+			previousCardEl.style.zIndex = "30";
+			nextCardEl.style.zIndex = "20";
+
+			previousBgImageEl.style.zIndex = "-1";
+
+			currentCardEl.classList.add("next--card");
+			previousCardEl.classList.add("current--card");
+			nextCardEl.classList.add("previous--card");
+
+			currentBgImageEl.classList.add("next--image");
+			previousBgImageEl.classList.add("current--image");
+			nextBgImageEl.classList.add("previous--image");
+		}
+	}
+}
+
+function changeInfo(direction) {
+	let currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info");
+	let nextInfoEl = cardInfosContainerEl.querySelector(".next--info");
+
+	gsap.timeline()
+		.to([buttons.prev, buttons.next], {
+		duration: 0.2,
+		opacity: 0.5,
+		pointerEvents: "none",
+	})
+		.to(
+		currentInfoEl.querySelectorAll(".text"),
+		{
+			duration: 0.4,
+			stagger: 0.1,
+			translateY: "-120px",
+			opacity: 0,
+		},
+		"-="
+	)
+		.call(() => {
+		swapInfosClass(direction);
+	})
+		.call(() => initCardEvents())
+		.fromTo(
+		direction === "right"
+		? nextInfoEl.querySelectorAll(".text")
+		: previousInfoEl.querySelectorAll(".text"),
+		{
+			opacity: 0,
+			translateY: "40px",
+		},
+		{
+			duration: 0.4,
+			stagger: 0.1,
+			translateY: "0px",
+			opacity: 1,
+		}
+	)
+		.to([buttons.prev, buttons.next], {
+		duration: 0.2,
+		opacity: 1,
+		pointerEvents: "all",
+	});
+
+	function swapInfosClass() {
+		currentInfoEl.classList.remove("current--info");
+		previousInfoEl.classList.remove("previous--info");
+		nextInfoEl.classList.remove("next--info");
+
+		if (direction === "right") {
+			currentInfoEl.classList.add("previous--info");
+			nextInfoEl.classList.add("current--info");
+			previousInfoEl.classList.add("next--info");
+		} else if (direction === "left") {
+			currentInfoEl.classList.add("next--info");
+			nextInfoEl.classList.add("previous--info");
+			previousInfoEl.classList.add("current--info");
+		}
+	}
+}
+
+function updateCard(e) {
+	const card = e.currentTarget;
+	const box = card.getBoundingClientRect();
+	const centerPosition = {
+		x: box.left + box.width / 2,
+		y: box.top + box.height / 2,
+	};
+	let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);
+	gsap.set(card, {
+		"--current-card-rotation-offset": `${angle}deg`,
+	});
+	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	gsap.set(currentInfoEl, {
+		rotateY: `${angle}deg`,
+	});
+}
+
+function resetCardTransforms(e) {
+	const card = e.currentTarget;
+	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
+	gsap.set(card, {
+		"--current-card-rotation-offset": 0,
+	});
+	gsap.set(currentInfoEl, {
+		rotateY: 0,
+	});
+}
+
+function initCardEvents() {
+	const currentCardEl = cardsContainerEl.querySelector(".current--card");
+	currentCardEl.addEventListener("pointermove", updateCard);
+	currentCardEl.addEventListener("pointerout", (e) => {
+		resetCardTransforms(e);
+	});
+}
+
+initCardEvents();
+
+function removeCardEvents(card) {
+	card.removeEventListener("pointermove", updateCard);
+}
+
+function init() {
+
+	let tl = gsap.timeline();
+
+	tl.to(cardsContainerEl.children, {
+		delay: 0.15,
+		duration: 0.5,
+		stagger: {
+			ease: "power4.inOut",
+			from: "right",
+			amount: 0.1,
+		},
+		"--card-translateY-offset": "0%",
+	})
+		.to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
+		delay: 0.5,
+		duration: 0.4,
+		stagger: 0.1,
+		opacity: 1,
+		translateY: 0,
+	})
+		.to(
+		[buttons.prev, buttons.next],
+		{
+			duration: 0.4,
+			opacity: 1,
+			pointerEvents: "all",
+		},
+		"-=0.4"
+	);
+}
+
+const waitForImages = () => {
+	const images = [...document.querySelectorAll("img")];
+	const totalImages = images.length;
+	let loadedImages = 0;
+	const loaderEl = document.querySelector(".loader span");
+
+	gsap.set(cardsContainerEl.children, {
+		"--card-translateY-offset": "100vh",
+	});
+	gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
+		translateY: "40px",
+		opacity: 0,
+	});
+	gsap.set([buttons.prev, buttons.next], {
+		pointerEvents: "none",
+		opacity: "0",
+	});
+
+	images.forEach((image) => {
+		imagesLoaded(image, (instance) => {
+			if (instance.isComplete) {
+				loadedImages++;
+				let loadProgress = loadedImages / totalImages;
+
+				gsap.to(loaderEl, {
+					duration: 1,
+					scaleX: loadProgress,
+					backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`,
+				});
+
+				if (totalImages == loadedImages) {
+					gsap.timeline()
+						.to(".loading__wrapper", {
+						duration: 0.8,
+						opacity: 0,
+						pointerEvents: "none",
+					})
+						.call(() => init());
+				}
+			}
+		});
+	});
+};
+
+waitForImages();
+
+  </script>
+<style>
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");
+:root {
+   --card-width: 200px;
+   --card-height: 300px;
+   --card-transition-duration: 800ms;
+   --card-transition-easing: ease;
+}
+
+ * {
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+}
+ body {
+   width: 100%;
+   height: 100vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   background: rgba(0, 0, 0, 0.787);
+   overflow: hidden;
+}
+ button {
+   border: none;
+   background: none;
+   cursor: pointer;
+}
+ button:focus {
+   outline: none;
+   border: none;
+}
+ .app {
+   position: relative;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+ .app__bg {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   z-index: -5;
+   filter: blur(8px);
+   pointer-events: none;
+   user-select: none;
+   overflow: hidden;
+}
+ .app__bg::before {
+   content: "";
+   position: absolute;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background: #000;
+   z-index: 1;
+   opacity: 0.8;
+}
+ .app__bg__image {
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
+   width: 180%;
+   height: 180%;
+   transition: transform 1000ms ease, opacity 1000ms ease;
+   overflow: hidden;
+}
+ .app__bg__image img {
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+}
+ .app__bg__image.current--image {
+   opacity: 1;
+   --image-translate-offset: 0;
+}
+ .app__bg__image.previous--image, .app__bg__image.next--image {
+   opacity: 0;
+}
+ .app__bg__image.previous--image {
+   --image-translate-offset: -25%;
+}
+ .app__bg__image.next--image {
+   --image-translate-offset: 25%;
+}
+ .cardList {
+   position: absolute;
+   width: calc(3 * var(--card-width));
+   height: auto;
+}
+ .cardList__btn {
+   --btn-size: 35px;
+   width: var(--btn-size);
+   height: var(--btn-size);
+   position: absolute;
+   top: 50%;
+   transform: translateY(-50%);
+   z-index: 100;
+}
+ .cardList__btn.btn--left {
+   left: -5%;
+}
+ .cardList__btn.btn--right {
+   right: -5%;
+}
+ .cardList__btn .icon {
+   width: 100%;
+   height: 100%;
+}
+ .cardList__btn .icon svg {
+   width: 100%;
+   height: 100%;
+}
+ .cardList .cards__wrapper {
+   position: relative;
+   width: 100%;
+   height: 100%;
+   perspective: 1000px;
+}
+ .card {
+   --card-translateY-offset: 100vh;
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
+   display: inline-block;
+   width: var(--card-width);
+   height: var(--card-height);
+   transition: transform var(--card-transition-duration) var(--card-transition-easing);
+   user-select: none;
+}
+ .card::before {
+   content: "";
+   position: absolute;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background: #000;
+   z-index: 1;
+   transition: opacity var(--card-transition-duration) var(--card-transition-easing);
+   opacity: calc(1 - var(--opacity));
+}
+ .card__image {
+   position: relative;
+   width: 100%;
+   height: 100%;
+}
+ .card__image img {
+   position: absolute;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+}
+ .card.current--card {
+   --current-card-rotation-offset: 0;
+   --card-translateX-offset: 0;
+   --card-rotation-offset: var(--current-card-rotation-offset);
+   --card-scale-offset: 1.2;
+   --opacity: 0.8;
+}
+ .card.previous--card {
+   --card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
+   --card-rotation-offset: 25deg;
+}
+ .card.next--card {
+   --card-translateX-offset: calc(var(--card-width) * 1.1);
+   --card-rotation-offset: -25deg;
+}
+ .card.previous--card, .card.next--card {
+   --card-scale-offset: 0.9;
+   --opacity: 0.4;
+}
+ .infoList {
+   position: absolute;
+   width: calc(3 * var(--card-width));
+   height: var(--card-height);
+   pointer-events: none;
+}
+ .infoList .info__wrapper {
+   position: relative;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   justify-content: flex-start;
+   align-items: flex-end;
+   perspective: 1000px;
+   transform-style: preserve-3d;
+}
+ .info {
+   margin-bottom: calc(var(--card-height) / 8);
+   margin-left: calc(var(--card-width) / 1.5);
+   transform: translateZ(2rem);
+   transition: transform var(--card-transition-duration) var(--card-transition-easing);
+}
+ .info .text {
+   position: relative;
+   font-family: "Montserrat";
+   font-size: calc(var(--card-width) * var(--text-size-offset, 0.2));
+   white-space: nowrap;
+   color: #fff;
+   width: fit-content;
+}
+ .info .name, .info .location {
+   text-transform: uppercase;
+}
+ .info .location {
+   font-weight: 800;
+}
+ .info .location {
+   --mg-left: 40px;
+   --text-size-offset: 0.12;
+   font-weight: 600;
+   margin-left: var(--mg-left);
+   margin-bottom: calc(var(--mg-left) / 2);
+   padding-bottom: 0.8rem;
+}
+ .info .location::before, .info .location::after {
+   content: "";
+   position: absolute;
+   background: #fff;
+   left: 0%;
+   transform: translate(calc(-1 * var(--mg-left)), -50%);
+}
+ .info .location::before {
+   top: 50%;
+   width: 20px;
+   height: 5px;
+}
+ .info .location::after {
+   bottom: 0;
+   width: 60px;
+   height: 2px;
+}
+ .info .description {
+   --text-size-offset: 0.065;
+   font-weight: 500;
+}
+ .info.current--info {
+   opacity: 1;
+   display: block;
+}
+ .info.previous--info, .info.next--info {
+   opacity: 0;
+   display: none;
+}
+ .loading__wrapper {
+   position: fixed;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   background: #000;
+   z-index: 200;
+}
+ .loading__wrapper .loader--text {
+   color: #fff;
+   font-family: "Montserrat";
+   font-weight: 500;
+   margin-bottom: 1.4rem;
+}
+ .loading__wrapper .loader {
+   position: relative;
+   width: 200px;
+   height: 2px;
+   background: rgba(255, 255, 255, 0.25);
+}
+ .loading__wrapper .loader span {
+   position: absolute;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background: #f00;
+   transform: scaleX(0);
+   transform-origin: left;
+}
+ @media only screen and (min-width: 800px) {
+   :root {
+     --card-width: 250px;
+     --card-height: 400px;
+  }
+}
+ .support {
+   position: absolute;
+   right: 10px;
+   bottom: 10px;
+   padding: 10px;
+   display: flex;
+}
+ .support a {
+   margin: 0 10px;
+   color: #fff;
+   font-size: 1.8rem;
+   backface-visibility: hidden;
+   transition: all 150ms ease;
+}
+ .support a:hover {
+   transform: scale(1.1);
+}
+ </style>
+</html>
\ No newline at end of file
