Add load animition for post header & home button.

iissnan · Jan 22, 2017 · 4d588f7 · 4d588f7
1 parent 15de2e1
commit 4d588f7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/layout/_macro/post-header.swig b/layout/_macro/post-header.swig
@@ -7,9 +7,11 @@
       </div>
       <h1>{{ page.title }}</h1>
       <h2 class="subtitle">{{ page.subtitle || '' }}</h2>
-      <span class="post-meta-item-text">{{ __('post.posted') }} </span>
-      <time itemprop="dateCreated" datetime="{{ moment(post.date).format() }}" content="{{ date(post.date, config.date_format) }}" title="{{ moment(post.date).format('YYYY-MM-DD HH:mm:ss') }}">
-        {{ date(post.date, config.date_format) }}
-      </time>
+      <div class="post-time">
+        <span class="post-meta-item-text">{{ __('post.posted') }} </span>
+        <time itemprop="dateCreated" datetime="{{ moment(post.date).format() }}" content="{{ date(post.date, config.date_format) }}" title="{{ moment(post.date).format('YYYY-MM-DD HH:mm:ss') }}">
+          {{ date(post.date, config.date_format) }}
+        </time>
+      </div>
   </div>
 {% endmacro %}
diff --git a/source/css/_common/components/header/site-home.styl b/source/css/_common/components/header/site-home.styl
@@ -1,10 +1,13 @@
 .site-home {
+    position: relative;
+    top: -10px;
     display: inline-block;
     color: white;
     font-size: 18px;
     font-weight: bolder;
     margin: 5px 20px;
     border: none;
+    opacity: 0;
 
     +tablet() {
         font-size: 50px;

diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl
@@ -12,9 +12,12 @@
     }
 
     .post-header {
+        position: relative;
+        top: -10px;
         width: 960px;
         margin: 80px auto 0;
         color: white;
+        opacity: 0;
 
         +mobile() {
             width: auto;

diff --git a/source/js/src/motion.js b/source/js/src/motion.js
@@ -190,6 +190,9 @@ $(document).ready(function () {
       var $brand = $('.brand');
       var $title = $('.site-title');
       var $subtitle = $('.site-subtitle');
+
+      var $postheader = $('.post-header');
+
       var $logoLineTop = $('.logo-line-before i');
       var $logoLineBottom = $('.logo-line-after i');
 
@@ -208,7 +211,7 @@ $(document).ready(function () {
       hasElement($title) && sequence.push({
         e: $title,
         p: {opacity: 1, top: 0},
-        o: { duration: 200 }
+        o: {duration: 200}
       });
 
       hasElement($subtitle) && sequence.push({
@@ -217,6 +220,12 @@ $(document).ready(function () {
         o: {duration: 200}
       });
 
+      hasElement($postheader) && sequence.push({
+        e: $postheader,
+        p: {opacity: 1, top: 0},
+        o: {duration: 200}
+      });
+
       if (sequence.length > 0) {
         sequence[sequence.length - 1].o.complete = function () {
           integrator.next();
@@ -255,7 +264,7 @@ $(document).ready(function () {
     },
 
     menu: function (integrator) {
-      $('.menu-item').velocity('transition.slideDownIn', {
+      $('.menu-item, .site-home').velocity('transition.slideDownIn', {
         display: null,
         duration: 200,
         complete: function () {