8.9 优化主题动效

themes/Ying/layouts/_default/about.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div id="pjax-container">
-  <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > h2,#heatmap,p; cls: uk-animation-fade; delay: 0">
+  <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > h2,#heatmap,p; cls: uk-animation-slide-bottom-small; delay: 0">
     <h2 class="uk-visible@m">热力图</h2>
     {{ .Content }}
   </div>

themes/Ying/layouts/_default/archives.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div id="pjax-container">
-    <div class="post-content" style="list-style-type: none;" uk-scrollspy="target: > .link-title,.diy-h3,li; cls: uk-animation-fade; delay: 0">
+    <div class="post-content" style="list-style-type: none;" uk-scrollspy="target: > .link-title,.diy-h3,li; cls: uk-animation-slide-bottom-small; delay: 0">
         {{ $currentYear := 0 }}
         {{ $currentMonth := 0 }}
         {{ range .Site.RegularPages }}
@@ -9,7 +9,7 @@
                 {{ $month := .Date.Month }}
                 {{ if ne $year $currentYear }}
                     {{ with $currentYear }} {{ if ne $currentYear 0 }} </div> {{ end }} {{ end }}
-                    <div class="link-title a-title" uk-scrollspy="cls: uk-animation-slide-left-medium; repeat: false">
+                    <div class="link-title a-title" uk-scrollspy="cls: uk-animation-slide-bottom-small; repeat: false">
                         <span>{{ $year }}</span>
                     </div>
                     {{ $currentYear = $year }}
@@ -17,18 +17,18 @@
                 {{ end }}
                 {{ if ne $month $currentMonth }}
                     {{ with $currentMonth }} {{ if ne $currentMonth 0 }} </div> {{ end }} {{ end }}
-                    <h3 class="diy-h3" uk-scrollspy="cls: uk-animation-slide-right-medium; repeat: false" data-toggle="collapse"
+                    <h3 class="diy-h3" uk-scrollspy="cls: uk-animation-slide-bottom-small; repeat: false" data-toggle="collapse"
                         data-target="#collapse{{ $year }}{{ printf "%02d" $month }}" aria-expanded="false"
                         aria-controls="collapse{{ $year }}{{ printf "%02d" $month }}">
                         {{ $month | printf "%02d" }}月
                     </h3>
                     <div class="collapse" id="collapse{{ $year }}{{ printf "%02d" $month }}"
-                        uk-scrollspy="cls: uk-animation-slide-right-medium; repeat: false">
+                        uk-scrollspy="cls: uk-animation-slide-bottom-small; repeat: false">
                     {{ $currentMonth = $month }}
                 {{ end }}
                 <li data-date="{{ $year }}{{ printf "%02d" $month }}{{ .Date.Day }}">
                     <span class="articles_date_time">{{ .Date.Format "01/02" }}</span>
-                    <a class="a-archives" uk-scrollspy="cls: uk-animation-slide-left-medium; repeat: false"
+                    <a class="a-archives" uk-scrollspy="cls: uk-animation-slide-bottom-small; repeat: false"
                         href="{{ .Permalink }}">{{ .Title }}</a>
                 </li>
             {{ end }}

themes/Ying/layouts/_default/home.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div id="pjax-container">
+<div id="pjax-container" uk-scrollspy="target: > div,a; cls: uk-animation-slide-bottom-small; delay: 0">
     <article>
         <div class="recent-posts section">
             <h2 class="section-header">随笔<i class="ri-quill-pen-line"></i></h2>

themes/Ying/layouts/_default/links.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div id="pjax-container">
-    <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > .cf-friends; cls: uk-animation-fade; delay: 0">
+    <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > .cf-friends; cls: uk-animation-slide-bottom-small; delay: 0">
         {{ partial "link_items.html" . }}
         <div style="clear:both;"></div>
     </div>

themes/Ying/layouts/_default/ly.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
-<div id="pjax-container" uk-scrollspy="target: > #szh,hr,h2,p; cls: uk-animation-fade; delay: 0">
-  <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > #szh; cls: uk-animation-fade; delay: 0">
+<div id="pjax-container" uk-scrollspy="target: > #szh,hr,h2,p; cls: uk-animation-slide-bottom-small; delay: 0">
+  <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > #szh; cls: uk-animation-slide-bottom-small; delay: 0">
     {{ .Content }}
     <div id="szh">
       - 名称：优世界<br>

themes/Ying/layouts/_default/single.html

@@ -8,7 +8,7 @@
             <a href="{{ . }}">{{ . }}</a>
             {{ end }}
         </div>
-        <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p; cls: uk-animation-fade; delay: 0">
+        <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p,span; cls: uk-animation-slide-bottom-small; delay: 0">
             {{ .Content }}
         </div>
         <div class="post-tags" style="margin-top: -30px;">

themes/Ying/layouts/partials/artalk.html

@@ -1,7 +1,7 @@
 <!-- CSS -->
 <link href="/css/Artalk.css" rel="stylesheet" />
 <!-- Artalk -->
-<div id="Comments"></div>
+<div id="Comments" uk-scrollspy="target: div,span,img> ; cls: uk-animation-slide-bottom-small;"></div>
 <!-- JS -->
 <script src="/js/Artalk.js"></script>
 <script>

themes/Ying/static/js/main.js

@@ -37,10 +37,10 @@ $('.itp-index:odd').attr("style", "float: right;width:48%;");
 
 //文章图片懒加载
 lazyLoadInit({
-  coverColor: "white",
-  coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
-  offsetBottom: 0,
-  offsetTopm: 0,
+  // coverColor: "white",
+  // coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
+  offsetBottom: 800,
+  offsetTopm: 800,
   showTime: 1100
 });
 

themes/Ying/static/js/mypjax.js

@@ -157,10 +157,10 @@ document.addEventListener("pjax:success", function () {
     // 重载图片懒加载插件的js
     lazyimg_pjax()
     lazyLoadInit({
-        coverColor: "white",
-        coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
-        offsetBottom: 0,
-        offsetTopm: 0,
+        // coverColor: "white",
+        // coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
+        offsetBottom: 800,
+        offsetTopm: 800,
         showTime: 1100
     });
     // 激活文章图片灯箱