feat: animation effect

yuan-sunflower · Nov 8, 2022 · 3f2ac56 · 3f2ac56
1 parent 8195087
commit 3f2ac56
Show file tree

Hide file tree

Showing 13 changed files with 476 additions and 219 deletions.
diff --git a/package.json b/package.json
@@ -41,35 +41,37 @@
     "@docusaurus/preset-classic": "^2.0.1",
     "@docusaurus/theme-live-codeblock": "^2.0.1",
     "@docusaurus/theme-search-algolia": "^2.0.1",
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.1.19",
     "@giscus/react": "^2.0.6",
     "@popperjs/core": "^2.11.2",
+    "@react-spring/web": "^9.5.5",
     "dayjs": "^1.10.7",
     "docusaurus-plugin-image-zoom": "^0.1.1",
     "docusaurus-plugin-matomo": "^0.0.6",
     "docusaurus-plugin-sass": "^0.2.2",
     "ora": "^5.3.0",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
+    "react-awesome-reveal": "^4.1.0",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
-    "react-spring": "^8.0.27",
-    "react-tooltip": "^4.2.21",
     "react-use": "^17.4.0",
+    "react-use-gesture": "^9.1.3",
     "sass": "^1.54.8"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^2.0.1",
     "@docusaurus/module-type-aliases": "^2.0.1",
     "@tsconfig/docusaurus": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.32.0",
+    "@typescript-eslint/parser": "^5.42.1",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.7.1",
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",

diff --git a/src/components/BlogInfo/index.tsx b/src/components/BlogInfo/index.tsx
@@ -5,19 +5,20 @@ import type {
   BlogTags,
   BlogPost,
 } from '@docusaurus/plugin-content-blog';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faTag,
   faArchive,
   faBook,
   faThLarge,
 } from '@fortawesome/free-solid-svg-icons';
-import {IconProp} from '@fortawesome/fontawesome-svg-core';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import Link from '@docusaurus/Link';
-import {SocialLinks} from '@site/src/components/Hero';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import { SocialLinks } from '@site/src/components/Hero';
+import { useThemeConfig } from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { Fade } from "react-awesome-reveal";
 
 type Count = {
   blog: number;
@@ -34,10 +35,10 @@ export function BlogUser({
   isNavbar?: boolean;
 }) {
   const {
-    siteConfig: {tagline},
+    siteConfig: { tagline },
   } = useDocusaurusContext();
   const {
-    navbar: {title, logo = {src: ''}},
+    navbar: { title, logo = { src: '' } },
   } = useThemeConfig();
 
   const logoLink = useBaseUrl(logo.src || '/');
@@ -64,9 +65,8 @@ export function BlogUser({
 
   return (
     <div
-      className={`row ${
-        isNavbar ? 'bloginfo__card-navbar' : 'bloginfo__card'
-      }`}>
+      className={`row ${isNavbar ? 'bloginfo__card-navbar' : 'bloginfo__card'
+        }`}>
       <Link href="/about">
         <img className="bloginfo__img" src={logoLink} alt="logo"></img>
       </Link>
@@ -90,7 +90,7 @@ export function BlogUser({
             icon={faTag as IconProp}
             width="16"
             height="16"
-            style={{transform: 'rotate(90deg)'}}
+            style={{ transform: 'rotate(90deg)' }}
           />{' '}
           {count.tag}
         </Link>
@@ -115,14 +115,14 @@ export function BlogUser({
           maxWidth: '100%',
           padding: '0.5em 0',
           justifyContent: 'space-evenly',
-          ...(isNavbar ? {borderBottom: '1px solid #eee'} : null),
+          ...(isNavbar ? { borderBottom: '1px solid #eee' } : null),
         }}
       />
     </div>
   );
 }
 
-const TagsSection = ({data}: {data: BlogTag[]}) => {
+const TagsSection = ({ data }: { data: BlogTag[] }) => {
   return (
     <div className="bloginfo__tags">
       {data
@@ -163,27 +163,32 @@ export default function BlogInfo() {
   return (
     <div className="bloginfo col col--3 margin-bottom--md">
       <section className="bloginfo__content">
-        <div className="bloghome__posts-card bloginfo__user margin-bottom--md">
-          <BlogUser count={count} />
-        </div>
-        <div className="bloghome__posts-card margin-bottom--md">
-          <div className="row bloginfo__card">
-            <div>
-              <FontAwesomeIcon
-                icon={faTag as IconProp}
-                style={{transform: 'rotate(90deg)'}}
-                color="#12affa"
-                width="16"
-                height="16"
-              />
-              <Link className="margin-horiz--sm" href="/tags">
-                标签
-              </Link>
+        <Fade direction='up' triggerOnce={true}>
+
+          <div className="bloghome__posts-card bloginfo__user margin-bottom--md">
+            <BlogUser count={count} />
+          </div>
+          <div className="bloghome__posts-card margin-bottom--md">
+            <div className="row bloginfo__card">
+              <div>
+                <FontAwesomeIcon
+                  icon={faTag as IconProp}
+                  style={{ transform: 'rotate(90deg)' }}
+                  color="#12affa"
+                  width="16"
+                  height="16"
+                />
+                <Link className="margin-horiz--sm" href="/tags">
+                  标签
+                </Link>
+              </div>
+              <TagsSection data={Object.values(tagData)} />
             </div>
-            <TagsSection data={Object.values(tagData)} />
           </div>
-        </div>
+        </Fade>
+
       </section>
+
     </div>
   );
 }
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useTrail, animated} from 'react-spring';
+import { useTrail, animated } from '@react-spring/web';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
@@ -21,31 +21,26 @@ import Button from '../Button';
 import styles from './styles.module.css';
 
 function Hero() {
-  const {
-    i18n: {currentLocale},
-  } = useDocusaurusContext();
-
-  // animation
-  const animatedTexts = useTrail(5, {
-    from: {opacity: 0, transform: 'translateY(3em)'},
-    to: {opacity: 1, transform: 'translateY(0)'},
+  const trails = useTrail(5, {
+    from: { opacity: 0, transform: 'translate3d(0px, 3em, 0px)' },
+    to: { opacity: 1, transform: 'translate3d(0px, 0px, 0px)' },
     config: {
       mass: 3,
-      friction: 45,
       tension: 460,
+      friction: 45,
     },
   });
 
   return (
     <animated.div className={styles.hero}>
       <div className={styles.bloghome__intro}>
-        <animated.div style={animatedTexts[0]} className={styles.hero_text}>
+        <animated.div style={trails[0]} className={styles.hero_text}>
           <Translate id="homepage.hero.greet">你好! 我是</Translate>
           <span className={styles.intro__name}>
             <Translate id="homepage.hero.name">愧怍</Translate>
           </span>
         </animated.div>
-        <animated.p style={animatedTexts[1]}>
+        <animated.p style={trails[1]}>
           <Translate id="homepage.hero.text">
             {`在这里你能了解到各类实战开发的所遇到的问题，帮助你在学习的过程了解最新的技术栈，并希望我的个人经历对你有所启发。`}
           </Translate>
@@ -68,13 +63,14 @@ function Hero() {
                   <Translate id="hompage.hero.text.link">网址导航</Translate>
                 </Link>
               ),
-            }}>
+            }}
+          >
             {`或许你需要{note}、{project}、{link}。`}
           </Translate>
         </animated.p>
-        <SocialLinks animatedProps={animatedTexts[4]} />
+        <SocialLinks animatedProps={trails[4]} />
         {
-          <animated.div style={animatedTexts[2]}>
+          <animated.div style={trails[2]}>
             <Button isLink href={'./about'}>
               <Translate id="hompage.hero.text.introduce">自我介绍</Translate>
             </Button>
@@ -86,9 +82,9 @@ function Hero() {
   );
 }
 
-export function SocialLinks({animatedProps, ...props}) {
-  const {siteConfig} = useDocusaurusContext();
-  const {themeConfig} = siteConfig;
+export function SocialLinks({ animatedProps, ...props }) {
+  const { siteConfig } = useDocusaurusContext();
+  const { themeConfig } = siteConfig;
   const socials = themeConfig.socials as {
     github: string;
     twitter: string;
@@ -97,7 +93,7 @@ export function SocialLinks({animatedProps, ...props}) {
     qq: string;
     wx: string;
     cloudmusic: string;
-    zhihu: string
+    zhihu: string;
   };
 
   return (
@@ -129,7 +125,6 @@ export function SocialLinks({animatedProps, ...props}) {
       {/* <a href={socials.cloudmusic} target="_blank">
         <CloudMusicIcon />
       </a> */}
-
     </animated.div>
   );
 }

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -69,9 +69,10 @@ html {
   --divider-color: #ebebeb;
   --post-shadow-color: rgb(220 220 220 / 30%);
   --post-shadow: 0 0 20px 10px var(--post-shadow-color);
-  --content-background-color: #fafafa;
-  --blog-item-background-color: linear-gradient(145deg, #fff, hsl(0deg 0% 95%));
-  --blog-item-shadow: 0 20px 60px #ddd, 0 0 10px 0 hsl(0deg 0% 95%);
+  --content-background-color: #fcfcfc;
+  --blog-item-background-color: linear-gradient(180deg, #fff, #fcfcfc);
+  --blog-item-shadow: 0 20px 20px rgb(0 0 0 / 2.5%), 0 50px 80px rgb(0 0 0 / 9%);
+
   --ifm-heading-color: #000;
 
   -webkit-font-smoothing: unset;
@@ -218,8 +219,9 @@ html[data-theme='dark'] .theme-code-block {
 /* 首页背景 */
 .container-wrapper {
   background: var(--content-background-color);
-  box-shadow: 0 -16px 24px var(--post-shadow-color);
-  box-shadow: var(--blog-item-shadow);
+
+/*   box-shadow: 0 -16px 24px var(--post-shadow-color);
+  box-shadow: var(--blog-item-shadow); */
 }
 
 /* navbar */

diff --git a/src/data/friend.ts b/src/data/friend.ts
@@ -1,6 +1,6 @@
 export type Friend = {
   title: string;
-  description?: string;
+  description: string;
   website: string;
   avatar?: any;
 };

diff --git a/src/data/website.ts b/src/data/website.ts
@@ -2,7 +2,7 @@ import {Friends} from './friend';
 export interface Website {
   name: string;
   logo: string;
-  desc?: string;
+  desc: string;
   href: string;
   tags?: string[];
 }
@@ -457,7 +457,7 @@ export const websiteData: WebsiteCategory[] = [
         desc: '通过简单的动画基元使您的组件栩栩如生',
         logo: 'https://react-spring.dev/favicon.ico',
         href: 'https://react-spring.dev/',
-        tags: ['前端', 'React', '小程序'],
+        tags: ['前端', 'React', '动画'],
       },
     ],
   },