diff --git a/_config.yml b/_config.yml
index e809ad5..3233843 100755
--- a/_config.yml
+++ b/_config.yml
@@ -408,8 +408,13 @@ plugins:
     css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
     js: https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js
 
-  # Page Scrolling Animation
-  scrollreveal: #https://cdn.jsdelivr.net/npm/scrollreveal@4.0.5/dist/scrollreveal.min.js
+  # https://scrollrevealjs.org/api/reveal.html
+  scrollreveal:
+    js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.6/dist/scrollreveal.min.js
+    distance: 8px
+    duration: 800 # ms
+    interval: 100 # ms
+    scale: 1 # 0.1~1
 
   # Codeblock Copy Button
   clipboard: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index a741a6f..92d0c67 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -1,7 +1,7 @@
 <% var sections = page.body ? page.body : theme.layout.on_page.body; %>
 <% sections.forEach(function(widget_id){ %>
   <% if (widget_id == 'article') { %>
-    <article id="<%= post.layout %>" class="post white-box <%- theme.style.body.effect.join(' ') %> article-type-<%= post.layout %>" itemscope itemprop="blogPost">
+    <article id="<%= post.layout %>" class="post white-box reveal <%- theme.style.body.effect.join(' ') %> article-type-<%= post.layout %>" itemscope itemprop="blogPost">
       <%- partial('meta', {post: post, position: 'header'}) %>
       <section class="article typo">
         <div class="article-entry" itemprop="articleBody">
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index fff91a2..603b048 100755
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -23,14 +23,16 @@
 <% if (theme.plugins.instant_page) { %>
   <script async src="<%- theme.plugins.instant_page %>" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
 <% } %>
-<% if (theme.plugins.scrollreveal) { %>
-  <script src="<%- theme.plugins.scrollreveal %>"></script>
+<% if (theme.plugins.scrollreveal && theme.plugins.scrollreveal.js) { %>
+  <script src="<%- theme.plugins.scrollreveal.js %>"></script>
   <script type="text/javascript">
     $(function() {
-      const $reveal = $('.reveal');
-      if ($reveal.length === 0) return;
-      const sr = ScrollReveal({ distance: 0 });
-      sr.reveal('.reveal');
+      ScrollReveal().reveal('.l_main .reveal', {
+        distance: '<%- theme.plugins.scrollreveal.distance %>',
+        duration: '<%- theme.plugins.scrollreveal.duration %>',
+        interval: '<%- theme.plugins.scrollreveal.interval %>',
+        scale: '<%- theme.plugins.scrollreveal.scale %>'
+      });
     });
   </script>
 <% } %>
diff --git a/layout/_third-party/comments.ejs b/layout/_third-party/comments.ejs
index 4d72b80..b171777 100644
--- a/layout/_third-party/comments.ejs
+++ b/layout/_third-party/comments.ejs
@@ -25,7 +25,7 @@
 %>
 
 <% if (enableDisqus || enableLivere || enableGitalk || enableValine || enableMiniValine) { %>
-  <article class="post white-box comments <%- theme.style.body.effect.join(' ') %>">
+  <article class="post white-box reveal comments <%- theme.style.body.effect.join(' ') %>">
     <section class="article typo">
       <p ct><%- theme.comments && theme.comments.title %></p>
       <% if (theme.comments && theme.comments.subtitle) { %>
diff --git a/layout/archive.ejs b/layout/archive.ejs
index e7b0a1c..f10e124 100755
--- a/layout/archive.ejs
+++ b/layout/archive.ejs
@@ -3,7 +3,7 @@
 	<% if (page.year || page.month) { %>
 		<%- partial('_partial/archive') %>
 	<% } else { %>
-	  <article id="archive-page" class="post article white-box <%- theme.style.body.effect.join(' ') %>">
+	  <article id="archive-page" class="post article white-box reveal <%- theme.style.body.effect.join(' ') %>">
 	    <section class="archive">
 	      <%
 	        var year = -1, postid = -1;
diff --git a/layout/category.ejs b/layout/category.ejs
index 41459b2..b281001 100755
--- a/layout/category.ejs
+++ b/layout/category.ejs
@@ -5,7 +5,7 @@
     <% if (page.layout == 'category') { %>
       <section class="post-list <%- theme.layout.multiple_columns ? 'multiple-columns' : '' %>">
         <div class='post-wrapper'>
-          <article id="archive-page" class="post article white-box <%- theme.style.body.effect.join(' ') %>">
+          <article id="archive-page" class="post article white-box reveal <%- theme.style.body.effect.join(' ') %>">
             <section class="archive">
               <div class="archive-item archive-year mark">
                 <h2><%- page.title %></h2>
diff --git a/layout/links.ejs b/layout/links.ejs
index f1b85ff..fd4d54d 100755
--- a/layout/links.ejs
+++ b/layout/links.ejs
@@ -1,6 +1,6 @@
 <%- partial('_pre') %>
 <div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
-  <article id="<%= page.layout %>" class="post white-box <%- theme.style.body.effect.join(' ') %> article-type-<%= page.layout %>" itemscope itemprop="blogPost">
+  <article id="<%= page.layout %>" class="post white-box reveal <%- theme.style.body.effect.join(' ') %> article-type-<%= page.layout %>" itemscope itemprop="blogPost">
     <%- partial('_partial/meta',{post:page, position:'header'}) %>
       <section class="article article-entry l_friends">
         <%- page.excerpt %>
diff --git a/layout/tag.ejs b/layout/tag.ejs
index a2c4515..c60520d 100755
--- a/layout/tag.ejs
+++ b/layout/tag.ejs
@@ -5,7 +5,7 @@
     <% if (page.layout == 'tag') { %>
       <section class="post-list <%- theme.layout.multiple_columns ? 'multiple-columns' : '' %>">
         <div class='post-wrapper'>
-          <article id="archive-page" class="post article white-box <%- theme.style.body.effect.join(' ') %>">
+          <article id="archive-page" class="post article white-box reveal <%- theme.style.body.effect.join(' ') %>">
             <section class="archive">
               <div class="archive-item archive-year mark">
                 <h2><%- page.title %></h2>
diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index 2b42f12..99d950b 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -366,3 +366,7 @@ div.hoverbox
 
 .white-box
   background: $color-card
+
+if hexo-config('plugins.scrollreveal.js')
+  .reveal
+    visibility: hidden