Allow elements to fade in for landing pages

_includes/scripts/fade-in-on-view.js

@@ -0,0 +1,22 @@
+(function () {
+  var SOURCES = window.TEXT_VARIABLES.sources;
+  window.Lazyload.js(SOURCES.jquery, function () {
+    $.fn.inViewport = function (cb) {
+      return this.each(function (i, el) {
+        function visPx() {
+          var H = $(this).height(),
+            r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
+          return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
+        } visPx();
+        $(window).on("resize scroll", visPx);
+      });
+    }
+      ;
+
+    $(function () {
+      $("[fade-in]:not([fade-in=none],[viewed=true])").inViewport(function (px) {
+        if (px) $(this).attr("viewed", true);
+      });
+    });
+  })
+})();

_layouts/landing.html

@@ -13,11 +13,11 @@
     {%- include snippets/get-nav-url.html path=_section.background_image.src -%}
     {%- assign _url = __return -%}
     {%- if _section.theme == 'light' -%}
-      <section class="hero hero--center hero--light" id="hero-{{ forloop.index }}"
+      <section class="hero hero--center hero--light" id="hero-{{ forloop.index }}" fade-in="{{ _section.fade-in | default: "none" }}"
     {%- elsif _section.theme == 'dark' -%}
-      <section class="hero hero--center hero--dark" id="hero-{{ forloop.index }}"
+      <section class="hero hero--center hero--dark" id="hero-{{ forloop.index }}" fade-in="{{ _section.fade-in | default: "none" }}"
     {%- else -%}
-      <section class="hero hero--center" id="hero-{{ forloop.index }}"
+      <section class="hero hero--center" id="hero-{{ forloop.index }}" fade-in="{{ _section.fade-in | default: "none" }}"
     {%- endif -%}
     {%- if _section.background_color -%}
         style="background-image: url({{ _url }}); background-color: {{ _section.background_color }};">
@@ -175,4 +175,7 @@ <h4>{{ child.title }}</h4>
   </div>
 </div>
 
-{{ content }}
+{{ content }}
+<script>
+  {%- include scripts/fade-in-on-view.js -%}
+</script>

_layouts/page.html

@@ -69,7 +69,7 @@
 
       <div class="page__main-inner">
       {%- if _header != false -%}
-        <div class="page__header d-print-none">
+        <div class="page__header d-print-none" fade-in="{{ page.header.fade-in | default: "none" }}">
         {%- assign _header_theme = page.header.theme | default: layout.header.theme -%}
         {%- if _header_theme == 'dark'-%}
           {%- include header.html theme='dark' background=page.header.background -%}
@@ -142,7 +142,7 @@
                 <div class="hero overlay" style="{{ _header_style }}">
               {%- endif -%}
             {%- endif -%}
-                <div class="hero__content">
+                <div class="hero__content" fade-in="{{ page.article_header.fade-in | default: "none" }}">
                   {%- if _full_width == false -%}
                     <div class ="main">
                   {%- endif -%}
@@ -266,5 +266,9 @@
 </script>
 {%- endif -%}
 
+{%- if page.article_header.fade-in or page.header.fade-in -%}
+  {% include scripts/fade-in-on-view.js %}
+{%- endif -%}
+
 {%- include markdown-enhancements.html -%}
 {%- include pageview.html -%}

_sass/animate/_fade-in-down.scss

@@ -8,3 +8,7 @@
     @include transform(translateY(0));
   }
 }
+
+[fade-in=down][viewed=true] {
+  animation: fade-in-down 0.8s ;
+}

_sass/animate/_fade-in-up.scss

@@ -8,3 +8,7 @@
     @include transform(translateY(0));
   }
 }
+
+[fade-in=up][viewed=true] {
+  animation: fade-in-up 0.8s ;
+}

_sass/animate/_fade-in.scss

@@ -6,3 +6,7 @@
     opacity: 1;
   }
 }
+
+[fade-in=true][viewed=true] {
+  animation: fade-in 0.8s ;
+}

docs/_docs/en/2.3-layouts.md

@@ -61,18 +61,20 @@ Base on Base Layout.
 
 ### header
 
-| Variable          | Option Values         | Description |
-| ---               | ---                   | ---         |
-| **theme**         | light, dark           | |
-| **background**    | `!!str`               | Available when specified theme. |
+| Variable          | Option Values                   | Description |
+| ---               | ---                             | ---         |
+| **theme**         | light, dark                     | |
+| **background**    | `!!str`                         | Available when specified theme. |
+| **fade-in**       | false (default), true, up, down | If and how the header should fade in when viewed |
 
 ### article_header
 
-| Variable          | Option Values         | Description |
-| ---               | ---                   | ---         |
-| **type**          | overlay, cover        | |
-| **align**         | left (default), center| |
-| **theme**         | light (default), dark | |
+| Variable          | Option Values                   | Description |
+| ---               | ---                             | ---         |
+| **type**          | overlay, cover                  | |
+| **align**         | left (default), center          | |
+| **theme**         | light (default), dark           | |
+| **fade-in**       | false (default), true, up, down | If and how the header should fade in when viewed |
 | **background_color** | `!!str`            | Available when type is `overlay`. If set to a dark color, you need set theme as 'dark'. |
 | **background_image** | `!!map`            | Available when type is `overlay`, set as `false` can overwrite `cover` to disable background image. |
 | **image**         | `!!map`               | Available when type is `cover`. |

docs/_docs/zh/2.3-layouts.md

@@ -62,21 +62,23 @@ graph TB;
 ### header
 
 | 配置项             | 可选值                 | 描述        |
-| ---               | ---                   | ---         |
-| **theme**         | light, dark           | 当 type 为 `translucent` 时有效。 |
-| **background**    | `!!str`               | 当指定了 theme 值时有效。 |
+| ---               | ---                             | ---         |
+| **theme**         | light, dark                     | 当 type 为 `translucent` 时有效。 |
+| **background**    | `!!str`                         | 当指定了 theme 值时有效。 |
+| **fade-in**       | false (default), true, up, down | If and how the header should fade in when viewed |
 
 ### article_header
 
 | 配置项             | 可选值                 | 描述        |
 | ---               | ---                   | ---         |
 | **type**          | overlay, cover        | |
 | **align**         | left (default), center | |
-| **theme**         | light (default), dark | |
-| **background_color** | `!!str`            | 当 type 为 `overlay` 时有效。当设置的背景色较深时，你需要设置 `theme` 为 dark。 |
-| **background_image** | `!!map`            | 当 type 为 `overlay` 时有效，设置为 `false` 可覆盖 `cover` 禁止背景图片。 |
-| **image**         | `!!map`               | 当 type 为 `cover` 时有效。 |
-| **actions**       | `!!seq`               | |
+| **theme**         | light (default), dark           | |
+| **fade-in**       | false (default), true, up, down | If and how the header should fade in when viewed |
+| **background_color** | `!!str`                      | 当 type 为 `overlay` 时有效。当设置的背景色较深时，你需要设置 `theme` 为 dark。 |
+| **background_image** | `!!map`                      | 当 type 为 `overlay` 时有效，设置为 `false` 可覆盖 `cover` 禁止背景图片。 |
+| **image**         | `!!map`                         | 当 type 为 `cover` 时有效。 |
+| **actions**       | `!!seq`                         | |
 
 ### article_header.background_image