diff --git a/_config.yml b/_config.yml
index 631c778..540766c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -307,7 +307,6 @@ vendor:
     instantsearch: webcache|instantsearch.js@4.56.1/dist/instantsearch.production.min.js
     pace: webcache|pace-js@1.2.4/pace.min.js
     mermaid: webcache|mermaid@9.4.3/dist/mermaid.min.js
-    wow: webcache|wowjs@1.1.3/dist/wow.min.js
     firework: webcache|mouse-firework@0.0.4/dist/index.umd.js
     pjax: webcache|theme-shokax-pjax@0.0.3/dist/index.umd.js
     live2d:
@@ -328,4 +327,4 @@ vendor:
         - webcache|@fortawesome/fontawesome-free@6.5.1/css/brands.min.css
         - webcache|@fortawesome/fontawesome-free@6.5.1/css/v5-font-face.min.css
         - webcache|@fortawesome/fontawesome-free@6.5.1/css/v4-font-face.min.css
-    animate: webcache|wowjs@1.1.3/css/libs/animate.css
+    aos: webcache|@reimujs/aos@0.0.1/dist/aos.css
diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
index bb9eca1..0343a9b 100644
--- a/layout/_partial/after-footer.ejs
+++ b/layout/_partial/after-footer.ejs
@@ -3,6 +3,25 @@
 
 <%- js('js/script.js') %>
 
+<% if (theme.animation.enable) { %>
+  <%- js('js/aos.js') %>
+  <script>
+    var aosInit = () => {
+      AOS.init({
+        duration: 1000,
+        easing: "ease",
+        once: true,
+        offset: 50,
+      });
+    };
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', aosInit);
+    } else {
+      aosInit();
+    }
+  </script>
+<% } %>
+
 <%- js({src: 'js/pjax_script.js', 'data-pjax': true}) %>
 
 <script type="module" data-pjax>
diff --git a/layout/_partial/archive.ejs b/layout/_partial/archive.ejs
index 887b6d2..8dcff1e 100644
--- a/layout/_partial/archive.ejs
+++ b/layout/_partial/archive.ejs
@@ -3,17 +3,17 @@
   <%- partial('post', {post: post, index: true, even: i % 2 === 0}) %>
   <% }) %>
 <% } else { %>
-<div class="archives-outer-wrap wow fadeInUp">
+<div class="archives-outer-wrap" data-aos="fade-up">
   <div class="tag-wrap">
     <% site.tags.each((tag, i) => { %>
-      <div class="archives-tag-list-item">
+      <div class="archives-tag-list-item" data-aos="zoom-in">
         <a class="archives-tag-list-link" href="/<%= tag.path %>"><%= tag.name %></a>
       </div>
     <% }) %>
   </div>
   <div class="category-wrap">
     <% site.categories.each((cagetory, i) => { %>
-      <div class="archives-category-list-item">
+      <div class="archives-category-list-item" data-aos="zoom-in">
         <a class="archives-category-list-link" href="/<%= cagetory.path %>"><%= cagetory.name %></a>
       </div>
     <% }) %>
@@ -26,7 +26,7 @@
         </section>
       <% } %>
       <% last = year; %>
-      <section class="archives-wrap wow fadeInUp">
+      <section class="archives-wrap" data-aos="fade-up">
         <div class="archive-year-wrap">
           <a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a>
         </div>
@@ -41,7 +41,7 @@
   </div>
 <% } %>
 <% if (page.total > 1) { %>
-  <nav id="page-nav" class="wow fadeInUp">
+  <nav id="page-nav" data-aos="fade-up">
     <% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;" %>
     <%- paginator({
           prev_text: prev_text,
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index 0d93d98..3da1cf5 100644
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@@ -1,4 +1,4 @@
-<footer id="footer" class="wow fadeInUp">
+<footer id="footer">
   <div style="width: 100%; overflow: hidden">
     <div class="footer-line"></div>
   </div>
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
index 4f5bceb..7548d67 100644
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@@ -59,14 +59,6 @@
   <% } %>
   <%- js(vendorCdn(theme.vendor.js.pace)) %>
   <% if (theme.animation.enable) { %>
-    <%- css(vendorCdn(theme.vendor.css.animate)) %>
-    <%- js(vendorCdn(theme.vendor.js.wow)) %>
-    <script>
-      new WOW({
-        offset: 0,
-        mobile: true,
-        live: false
-      }).init();
-    </script>
+    <%- css(vendorCdn(theme.vendor.css.aos)) %>
   <% } %>
 </head>
diff --git a/layout/_partial/post.ejs b/layout/_partial/post.ejs
index 09f302b..eead807 100644
--- a/layout/_partial/post.ejs
+++ b/layout/_partial/post.ejs
@@ -1,5 +1,6 @@
 <% if (even === true) { %>
-  <div class="post-wrap-left wow fadeInUp">
+  <div class="post-wrapper">
+  <div class="post-wrap-left" data-aos="fade-up">
     <% if (post.link) { %>
       <a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url" target="_blank" aria-label="<%= post.title %>"></a>
     <% } else { %>
@@ -36,8 +37,10 @@
       </article>
     </div>
   </div>
+  </div>
 <% } else { %>
-  <div class="post-wrap-right wow fadeInUp">
+  <div class="post-wrapper">
+  <div class="post-wrap-right" data-aos="fade-up">
     <% if (post.link) { %>
     <a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url" target="_blank" aria-label="<%= post.title %>"></a>
     <% } else { %>
@@ -71,4 +74,5 @@
       </article>
     </div>
   </div>
+  </div>
 <% } %>
diff --git a/layout/_partial/post/category.ejs b/layout/_partial/post/category.ejs
index 85dfb37..942bfac 100644
--- a/layout/_partial/post/category.ejs
+++ b/layout/_partial/post/category.ejs
@@ -1,10 +1,10 @@
 <% if (post.categories && post.categories.length) { %>
-  <div class="article-category wow slideInLeft">
-    <%- list_categories(post.categories, {
-              show_count: false,
-              class: 'article-category',
-              style: 'none',
-              separator: ''
-            }) %>
+  <div class="article-category">
+    <%- listCategories(post.categories, {
+      show_count: false,
+      class: 'article-category',
+      style: 'none',
+      separator: ''
+    }, "zoom-in") %>
   </div>
 <% } %>
diff --git a/layout/_partial/post/date.ejs b/layout/_partial/post/date.ejs
index 5417811..923a43f 100644
--- a/layout/_partial/post/date.ejs
+++ b/layout/_partial/post/date.ejs
@@ -1,5 +1,5 @@
-<div class="<%= class_name %> wow slideInLeft">
-  <a href="<%- url_for(post.path) %>" class="article-date-link">
+<div class="<%= class_name %>">
+  <a href="<%- url_for(post.path) %>" class="article-date-link" data-aos="zoom-in">
     <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
     <time style="display: none;" id="post-update-time"><%= date(post.updated, date_format) %></time>
   </a>
diff --git a/layout/_partial/post/nav.ejs b/layout/_partial/post/nav.ejs
index d2a3be9..7536016 100644
--- a/layout/_partial/post/nav.ejs
+++ b/layout/_partial/post/nav.ejs
@@ -1,5 +1,5 @@
 <% if (post.prev || post.next) { %>
-  <nav id="article-nav" class="wow fadeInUp">
+  <nav id="article-nav" data-aos="fade-up">
     <% if (post.prev) { %>
       <div class="article-nav-link-wrap article-nav-link-left">
         <% if (post.prev.cover) { %>
diff --git a/layout/_partial/post/tag.ejs b/layout/_partial/post/tag.ejs
index cb3f42b..efef3b2 100644
--- a/layout/_partial/post/tag.ejs
+++ b/layout/_partial/post/tag.ejs
@@ -1,6 +1,6 @@
 <% if (post.tags && post.tags.length) { %>
-  <%- list_tags(post.tags, {
+  <%- listTags(post.tags, {
         show_count: false,
         class: 'article-tag'
-      }) %>
+      }, 'zoom-in') %>
 <% } %>
diff --git a/layout/_partial/sidebar.ejs b/layout/_partial/sidebar.ejs
index 03822f3..3cf8621 100644
--- a/layout/_partial/sidebar.ejs
+++ b/layout/_partial/sidebar.ejs
@@ -1,17 +1,19 @@
 <aside id="sidebar">
-  <div class="sidebar-wrap wow fadeInRight <% if (is_post()) { %>wrap-sticky<% } %>">
-    <% if (is_post()) { %>
-      <div class="sidebar-toc-sidebar"><%- partial('sidebar/toc-sidebar') %></div>
-      <div class="sidebar-common-sidebar hidden"><%- partial('sidebar/common-sidebar') %></div>
-    <% } else { %>
-      <%- partial('sidebar/common-sidebar') %>
-    <% } %>
-    <% if (is_post()) { %>
-      <div class="sidebar-btn-wrapper" style="position:static">
-        <div class="sidebar-toc-btn current"></div>
-        <div class="sidebar-common-btn"></div>
-      </div>
-    <% } %>
+  <div class="sidebar-wrapper">
+    <div class="sidebar-wrap <% if (is_post()) { %>wrap-sticky<% } %>" data-aos="fade-up">
+      <% if (is_post()) { %>
+        <div class="sidebar-toc-sidebar"><%- partial('sidebar/toc-sidebar') %></div>
+        <div class="sidebar-common-sidebar hidden"><%- partial('sidebar/common-sidebar') %></div>
+      <% } else { %>
+        <%- partial('sidebar/common-sidebar') %>
+      <% } %>
+      <% if (is_post()) { %>
+        <div class="sidebar-btn-wrapper" style="position:static">
+          <div class="sidebar-toc-btn current"></div>
+          <div class="sidebar-common-btn"></div>
+        </div>
+      <% } %>
+    </div>
   </div>
 
   <% if (!is_post() && theme.widgets) { %>
diff --git a/layout/_widget/archive.ejs b/layout/_widget/archive.ejs
index 2ab3c32..454c83b 100644
--- a/layout/_widget/archive.ejs
+++ b/layout/_widget/archive.ejs
@@ -1,8 +1,10 @@
 <% if (site.posts.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('archive_a') %></h3>
-    <div class="widget">
-      <%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('archive_a') %></h3>
+      <div class="widget">
+        <%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/category.ejs b/layout/_widget/category.ejs
index 49d685a..dfb01ef 100644
--- a/layout/_widget/category.ejs
+++ b/layout/_widget/category.ejs
@@ -1,8 +1,10 @@
 <% if (site.categories.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('categories') %></h3>
-    <div class="widget">
-      <%- list_categories({show_count: theme.show_count}) %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('categories') %></h3>
+      <div class="widget">
+        <%- list_categories({show_count: theme.show_count}) %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/recent_posts.ejs b/layout/_widget/recent_posts.ejs
index 4660aab..07c0178 100644
--- a/layout/_widget/recent_posts.ejs
+++ b/layout/_widget/recent_posts.ejs
@@ -1,14 +1,16 @@
 <% if (site.posts.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('recent_posts') %></h3>
-    <div class="widget">
-      <ul>
-        <% site.posts.sort('date', -1).limit(theme.recent_posts_limits).each((post) => { %>
-          <li>
-            <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
-          </li>
-        <% }) %>
-      </ul>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('recent_posts') %></h3>
+      <div class="widget">
+        <ul>
+          <% site.posts.sort('date', -1).limit(theme.recent_posts_limits).each((post) => { %>
+            <li>
+              <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
+            </li>
+          <% }) %>
+        </ul>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/tag.ejs b/layout/_widget/tag.ejs
index e03594c..2723aa5 100644
--- a/layout/_widget/tag.ejs
+++ b/layout/_widget/tag.ejs
@@ -1,8 +1,10 @@
 <% if (site.tags.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('tags') %></h3>
-    <div class="widget">
-      <%- list_tags({show_count: theme.show_count}) %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('tags') %></h3>
+      <div class="widget">
+        <%- list_tags({show_count: theme.show_count}) %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs
index 6c38a09..0f53469 100644
--- a/layout/_widget/tagcloud.ejs
+++ b/layout/_widget/tagcloud.ejs
@@ -1,8 +1,10 @@
 <% if (site.tags.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('tagcloud') %></h3>
-    <div class="widget tagcloud">
-      <%- tagcloud() %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('tagcloud') %></h3>
+      <div class="widget tagcloud">
+        <%- tagcloud() %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/scripts/helper/listCategories.js b/scripts/helper/listCategories.js
new file mode 100644
index 0000000..1635ea0
--- /dev/null
+++ b/scripts/helper/listCategories.js
@@ -0,0 +1,4 @@
+hexo.extend.helper.register("listCategories", (...args) => {
+  const result = hexo.extend.helper.store.list_categories.apply(hexo, args);
+  return result.replace(/<a class="([^"]+)" href="([^"]+)">/g, `<a class="$1" href="$2" data-aos="${args[2]}">`);
+});
\ No newline at end of file
diff --git a/scripts/helper/listTags.js b/scripts/helper/listTags.js
new file mode 100644
index 0000000..5b4e896
--- /dev/null
+++ b/scripts/helper/listTags.js
@@ -0,0 +1,4 @@
+hexo.extend.helper.register('listTags', (...args) => {
+  const result = hexo.extend.helper.store.list_tags.apply(hexo, args);
+  return result.replace(/<li class="([^"]+)">/g, `<li class="$1" data-aos="${args[2]}">`);
+});
\ No newline at end of file
diff --git a/scripts/tag/friendLink.js b/scripts/tag/friendLink.js
index e2ca5ca..55b1f66 100644
--- a/scripts/tag/friendLink.js
+++ b/scripts/tag/friendLink.js
@@ -40,7 +40,7 @@ const loadFile = (arg) => {
 };
 
 const insertHtml = (load) => {
-  let content = `<div class="friend-wrap wow fadeInUp">`;
+  let content = `<div class="friend-wrap" data-aos="zoom-in">`;
   load.forEach((item) => {
     if (!item.name || !item.url) return;
     content += template(item);
diff --git a/source/css/_animation.styl b/source/css/_animation.styl
index 650190a..408227c 100644
--- a/source/css/_animation.styl
+++ b/source/css/_animation.styl
@@ -20,4 +20,11 @@ vendors = official
 
 @keyframes transform-all
   100%
-    transform: translateX(-100px)
\ No newline at end of file
+    transform: translateX(-100px)
+
+if hexo-config("animation.enable")
+  body [data-aos='fade-up'] 
+    transform: translate3d(0, 30px, 0)
+
+  body [data-aos='zoom-in'] 
+    transform: scale(0.8)
\ No newline at end of file
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
index c39340a..1b19b6e 100644
--- a/source/css/_partial/article.styl
+++ b/source/css/_partial/article.styl
@@ -142,6 +142,7 @@ $article-meta-tag
     border-radius: post-radius
     transition: 0.3s
     padding: 1px 10px
+    box-shadow: 0 0 5px 3px var(--color-meta-shadow)
 
     footer
       font-size: font-size
@@ -239,6 +240,7 @@ $article-meta-tag
   padding: 10px 18px
   margin-top: article-padding
   margin-right: 10px
+  box-shadow: 0 0 5px 3px var(--color-meta-shadow)
 
 .article-tag-list-link
   &:before
diff --git a/source/css/_partial/footer.styl b/source/css/_partial/footer.styl
index 3400801..f616c8f 100644
--- a/source/css/_partial/footer.styl
+++ b/source/css/_partial/footer.styl
@@ -49,6 +49,7 @@
   border-radius: 5px
   transition: .3s
   padding: 5px 10px
+  box-shadow: 0 0 5px 3px var(--color-meta-shadow)
 
   p
     font-size: 14px;
diff --git a/source/css/_partial/post.styl b/source/css/_partial/post.styl
index ab81670..71e3d00 100644
--- a/source/css/_partial/post.styl
+++ b/source/css/_partial/post.styl
@@ -6,6 +6,7 @@
   height: 100%
 
 $post-wrap
+  width: 100%
   height: 230px
   margin-bottom: 40px
   position: relative
@@ -14,6 +15,12 @@ $post-wrap
   display: flex
   transition: .3s
 
+[data-theme="dark"] .post-wrap-left, [data-theme="dark"] .post-wrap-right
+  box-shadow: 0 0 10px 3px var(--color-hover-shadow)
+
+.post-wrapper
+  border-radius: post-radius
+  transition: .3s
   @media mq-normal
     &:hover
       transform: scale(1.015)
@@ -22,9 +29,6 @@ $post-wrap
       img
         transform: scale(1.05)
 
-[data-theme="dark"] .post-wrap-left, [data-theme="dark"] .post-wrap-right
-  box-shadow: 0 0 10px 3px var(--color-hover-shadow)
-
 .post-wrap-right
   flex-direction: row-reverse
 
@@ -39,6 +43,7 @@ $post-wrap
   height: 100%
   width: 100%
   padding: 20px
+  overflow: hidden
   box-sizing: border-box
 
 .post-meta
diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
index 674e915..a8ea2c7 100644
--- a/source/css/_partial/sidebar.styl
+++ b/source/css/_partial/sidebar.styl
@@ -12,6 +12,12 @@
 [data-theme="dark"] #mobile-nav .sidebar-wrap
   box-shadow: 0 0 0 0
 
+.sidebar-wrapper
+  transition: .3s
+  &:hover
+    transform: scale(1.015)
+    box-shadow: 0 0 10px 3px var(--color-hover-shadow)
+
 .sidebar-wrap
   width: 100%
   border-radius: post-radius
@@ -30,14 +36,6 @@
     position: sticky
     top: 5px
 
-  &:hover
-    transform: scale(1.015)
-    box-shadow: 0 0 10px 3px var(--color-hover-shadow)
-
-  #mobile-nav &:hover
-    transform: scale(1)
-    box-shadow: 0 0 0 0
-
 .sidebar-author
   display: flex
   flex-shrink: 0
diff --git a/source/css/_partial/widget.styl b/source/css/_partial/widget.styl
index 1dc3395..5c907f1 100644
--- a/source/css/_partial/widget.styl
+++ b/source/css/_partial/widget.styl
@@ -6,11 +6,13 @@
   box-shadow: 0 0 10px 3px var(--color-hover-shadow)
 
 .widget-wrap
-  margin: block-margin 0
+  margin: 40px 0
   background: var(--color-wrap)
   border-radius: post-radius
   transition: .3s
 
+.widget-wrapper
+  transition: .3s
   &:hover
     transform: scale(1.015)
     box-shadow: 0 0 10px 3px var(--color-hover-shadow)
diff --git a/source/js/aos.js b/source/js/aos.js
new file mode 100644
index 0000000..c9c9018
--- /dev/null
+++ b/source/js/aos.js
@@ -0,0 +1,251 @@
+// simplify from https://github.com/michalsnik/aos
+
+var debounce = (func, delay) => {
+  let timeoutId;
+
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+};
+
+var throttle = (func, limit) => {
+  let lastFunc, lastRan;
+
+  return (...args) => {
+    const context = this;
+    if (!lastRan || Date.now() - lastRan >= limit) {
+      func.apply(context, args);
+      lastRan = Date.now();
+    } else {
+      clearTimeout(lastFunc);
+      lastFunc = setTimeout(() => {
+        func.apply(context, args);
+        lastRan = Date.now();
+      }, limit - (Date.now() - lastRan));
+    }
+  };
+};
+
+var __aosScrollHandler;
+var __aosResizeHandler;
+var __observer;
+
+(() => {
+  let options = {
+    offset: 120,
+    delay: 0,
+    duration: 400,
+    disable: false,
+    once: false,
+    startEvent: "DOMContentLoaded",
+    throttleDelay: 99,
+    debounceDelay: 50,
+  };
+
+  let $aosElements = [];
+  let initialized = false;
+
+  const getOffset = (el) => {
+    let left = 0;
+    let top = 0;
+
+    while (el) {
+      left += el.offsetLeft - (el.tagName != "BODY" ? el.scrollLeft : 0);
+      top += el.offsetTop - (el.tagName != "BODY" ? el.scrollTop : 0);
+      el = el.offsetParent;
+    }
+
+    return {
+      top,
+      left,
+    };
+  };
+
+  const containsAOSNode = (nodes) => {
+    return [...nodes].some((node) => {
+      return (
+        node.dataset?.aos || (node.children && containsAOSNode(node.children))
+      );
+    });
+  };
+
+  const observe = (fn) => {
+    __observer?.disconnect();
+
+    __observer = new MutationObserver((mutations) => {
+      if (
+        mutations?.some(({ addedNodes, removedNodes }) =>
+          containsAOSNode([...addedNodes, ...removedNodes])
+        )
+      ) {
+        fn();
+      }
+    });
+
+    __observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
+  };
+
+  const setState = (el, top, once) => {
+    const attrOnce = el.node.getAttribute("data-aos-once");
+
+    if (top > el.position) {
+      el.node.classList.add("aos-animate");
+    } else if (attrOnce === "false" || (!once && attrOnce !== "true")) {
+      el.node.classList.remove("aos-animate");
+    }
+  };
+
+  const handleScroll = ($elements, once) => {
+    const threshold = window.innerHeight + window.scrollY;
+    $elements.forEach((el) => setState(el, threshold, once));
+  };
+
+  const calculateOffset = (el, optionalOffset) => {
+    let elementOffsetTop = 0;
+    let additionalOffset = 0;
+    const windowHeight = window.innerHeight;
+    const attrs = {
+      offset: el.getAttribute("data-aos-offset"),
+      anchor: el.getAttribute("data-aos-anchor"),
+      anchorPlacement: el.getAttribute("data-aos-anchor-placement"),
+    };
+
+    if (attrs.offset) {
+      additionalOffset = parseInt(attrs.offset);
+    }
+
+    if (attrs.anchor) {
+      el = _$(attrs.anchor) || el;
+    }
+
+    elementOffsetTop = getOffset(el).top;
+
+    switch (attrs.anchorPlacement) {
+      case "top-bottom":
+        // Default offset
+        break;
+      case "center-bottom":
+        elementOffsetTop += el.offsetHeight / 2;
+        break;
+      case "bottom-bottom":
+        elementOffsetTop += el.offsetHeight;
+        break;
+      case "top-center":
+        elementOffsetTop += windowHeight / 2;
+        break;
+      case "bottom-center":
+        elementOffsetTop += windowHeight / 2 + el.offsetHeight;
+        break;
+      case "center-center":
+        elementOffsetTop += windowHeight / 2 + el.offsetHeight / 2;
+        break;
+      case "top-top":
+        elementOffsetTop += windowHeight;
+        break;
+      case "bottom-top":
+        elementOffsetTop += el.offsetHeight + windowHeight;
+        break;
+      case "center-top":
+        elementOffsetTop += el.offsetHeight / 2 + windowHeight;
+        break;
+    }
+
+    if (!attrs.anchorPlacement && !attrs.offset) {
+      additionalOffset = optionalOffset;
+    }
+
+    return elementOffsetTop + additionalOffset;
+  };
+
+  const prepare = ($elements, options) => {
+    $elements.forEach((el) => {
+      el.node.classList.add("aos-init");
+      el.position = calculateOffset(el.node, options.offset);
+    });
+    return $elements;
+  };
+
+  const refresh = (initialize = false) => {
+    if (initialize) initialized = true;
+
+    if (initialized) {
+      $aosElements = prepare($aosElements, options);
+      handleScroll($aosElements, options.once);
+      return $aosElements;
+    }
+  };
+
+  const refreshHard = () => {
+    $aosElements = [..._$$("[data-aos]")].map((node) => ({
+      node,
+    }));
+    refresh();
+  };
+
+  const init = (opts) => {
+    options = { ...options, ...opts };
+    $aosElements = [..._$$("[data-aos]")].map((node) => ({
+      node,
+    }));
+    if (options.disable) {
+      $aosElements.forEach(({ node }) => {
+        node.removeAttribute("data-aos");
+        node.removeAttribute("data-aos-easing");
+        node.removeAttribute("data-aos-duration");
+        node.removeAttribute("data-aos-delay");
+      });
+      return;
+    }
+    document.body.setAttribute("data-aos-easing", options.easing);
+    document.body.setAttribute("data-aos-duration", options.duration);
+    document.body.setAttribute("data-aos-delay", options.delay);
+
+    if (
+      options.startEvent === "DOMContentLoaded" &&
+      ["complete", "interactive"].indexOf(document.readyState) > -1
+    ) {
+      refresh(true);
+    } else if (options.startEvent === "load") {
+      window.addEventListener(options.startEvent, () => {
+        refresh(true);
+      });
+    } else {
+      document.addEventListener(options.startEvent, () => {
+        refresh(true);
+      });
+    }
+
+    if (__aosResizeHandler) {
+      window.off("resize", __aosResizeHandler);
+      window.off("orientationchange", __aosResizeHandler);
+    }
+    __aosResizeHandler = debounce(refresh, options.debounceDelay);
+    window.on("resize", __aosResizeHandler);
+    window.on("orientationchange", __aosResizeHandler);
+
+    if (__aosScrollHandler) {
+      window.off("scroll", __aosScrollHandler);
+    }
+    __aosScrollHandler = throttle(
+      () => handleScroll($aosElements, options.once),
+      options.throttleDelay
+    );
+    window.on("scroll", __aosScrollHandler);
+
+    observe(refreshHard);
+
+    return $aosElements;
+  };
+
+  window.AOS = {
+    init,
+    refresh,
+    refreshHard,
+  };
+})();
diff --git a/source/js/insert_highlight.js b/source/js/insert_highlight.js
index f90c3e5..a04828d 100644
--- a/source/js/insert_highlight.js
+++ b/source/js/insert_highlight.js
@@ -71,6 +71,13 @@
     }, 1000);
   });
 
+  // clear clipboard when pjax:send
+  if (window.Pjax) {
+    window.addEventListener("pjax:send", () => {
+      clipboard.destroy();
+    }, { once: true });
+  }
+
   // 代码收缩
   _$$(".code-expand").forEach((element) => {
     element.off("click").on("click", function () {
diff --git a/source/js/pjax.js b/source/js/pjax.js
index 28afd35..7563a99 100644
--- a/source/js/pjax.js
+++ b/source/js/pjax.js
@@ -36,5 +36,6 @@ window.addEventListener("pjax:complete", () => {
 window.addEventListener("pjax:send", () => {
   window.lightboxStatus = "loading";
 });
-if (startLoading) window.addEventListener("pjax:send", startLoading);
-if (endLoading) window.addEventListener("pjax:complete", endLoading);
+if (window.startLoading) window.addEventListener("pjax:send", startLoading);
+if (window.endLoading) window.addEventListener("pjax:complete", endLoading);
+if (window.aosInit) window.addEventListener("pjax:success", aosInit);
\ No newline at end of file
diff --git a/source/js/pjax_script.js b/source/js/pjax_script.js
index e518bcb..b12c2ed 100644
--- a/source/js/pjax_script.js
+++ b/source/js/pjax_script.js
@@ -156,14 +156,22 @@ if (document.documentElement.scrollTop < 10) {
   sidebarTop.style.opacity = 0;
 }
 
-window.off("scroll").on("scroll", () => {
+var __sidebarTopScrollHandler;
+
+if (__sidebarTopScrollHandler) {
+  window.off("scroll", __sidebarTopScrollHandler);
+}
+
+__sidebarTopScrollHandler = () => {
   const sidebarTop = _$(".sidebar-top");
   if (document.documentElement.scrollTop < 10) {
     sidebarTop.style.opacity = 0;
   } else {
     sidebarTop.style.opacity = 1;
   }
-});
+};
+
+window.on("scroll", __sidebarTopScrollHandler);
 
 // toc
 _$$(".toc a").forEach((element) => {
diff --git a/source/js/script.js b/source/js/script.js
index b304f69..5eaba5b 100644
--- a/source/js/script.js
+++ b/source/js/script.js
@@ -122,4 +122,10 @@
       _$("#header-nav").classList.add("header-nav-hidden");
     }
   });
+
+  if (window.Pace) {
+    Pace.on('done', function () {
+      Pace.sources[0].elements = [];
+    });
+  }
 })();