Added fade-in-and-out on page load/exit

3 years ago · ad9542f368
6 changed files with 110 additions and 1 deletions
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@ -5,6 +5,11 @@ html {
 }

 html[data-theme="dark"] {
+
+  & #fader {
+    background: #121212;
+  }
+
  & * {
    background: #121212 !important;
    color: hsla(0, 0%, 100%, 0.87) !important;
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -6,6 +6,10 @@
 </head>

 <body class="d-flex flex-column min-vh-100">
+
+    <svg id="fader" class="fade-out"></svg>
+    <script>fadeInPage()</script>
+
    <a class="screen-reader-text" href="#content">Skip to content</a>

    <button aria-label="Toggle High Contrast" id="theme-toggle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Toggle High Contrast"
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -6,6 +6,10 @@
 </head>

 <body class="d-flex flex-column min-vh-100">
+
+    <svg id="fader" class="fade-out"></svg>
+    <script>fadeInPage()</script>
+
    <a class="screen-reader-text" href="#content">Skip to content</a>

    <button aria-label="Toggle High Contrast" id="theme-toggle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Toggle High Contrast" class="acctoggle">{{ partial "fontawesome.html" "solid/circle-half-stroke" }}</button>
--- a/layouts/_default/work/single.html
+++ b/layouts/_default/work/single.html
@ -6,6 +6,10 @@
 </head>

 <body class="d-flex flex-column min-vh-100" style="background-color: {{ .Params.background }};">
+
+    <svg id="fader" class="fade-out"></svg>
+    <script>fadeInPage()</script>
+    
    <a class="screen-reader-text" href="#content">Skip to content</a>

    <button aria-label="Toggle High Contrast" id="theme-toggle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Toggle High Contrast" class="acctoggle">{{ partial "fontawesome.html" "solid/circle-half-stroke" }}</button>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -31,6 +31,98 @@
 {{ end }} 
 {{ end }}

+
+<script>
+  function fadeInPage() {
+    if (!window.AnimationEvent) { return; }
+    var fader = document.getElementById('fader');
+    fader.classList.add('fade-out');
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    if (!window.AnimationEvent) { return }
+
+    var anchors = document.getElementsByTagName('a');
+
+    for (var idx = 0; idx < anchors.length; idx += 1) {
+      if (anchors[idx].hostname !== window.location.hostname) {
+        continue;
+      }
+
+      anchors[idx].addEventListener('click', function (event) {
+        var fader = document.getElementById('fader'),
+          anchor = event.currentTarget;
+
+        var listener = function () {
+          window.location = anchor.href;
+          fader.removeEventListener('animationend', listener);
+        };
+        fader.addEventListener('animationend', listener);
+
+        event.preventDefault();
+        fader.classList.add('fade-in');
+      });
+    }
+  });
+
+  window.addEventListener('pageshow', function (event) {
+    if (!event.persisted) {
+      return;
+    }
+    var fader = document.getElementById('fader');
+    fader.classList.remove('fade-in');
+  });
+</script>
+
+<style>
+  #fader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+    pointer-events: none;
+    background: white;
+    animation-duration: 300ms;
+    animation-timing-function: ease-in-out;
+  }
+
+  #fader:before {
+    content: 'fade'
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1
+    }
+
+    to {
+      opacity: 0
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0
+    }
+
+    to {
+      opacity: 1
+    }
+  }
+
+  #fader.fade-out {
+    opacity: 0;
+    animation-name: fade-out;
+  }
+
+  #fader.fade-in {
+    opacity: 1;
+    animation-name: fade-in;
+  }
+</style>
+
 <!-- Icons -->
 {{- partial "favicons.html" . }} {{- template "_internal/schema.html" . }} {{- template "_internal/opengraph.html" . }} {{- template "_internal/twitter_cards.html" . }} {{ range .Params.categories }}
 <meta property="article:section" content="{{ . }}" />
--- a/postcss.config.js
+++ b/postcss.config.js
@ -6,7 +6,7 @@ module.exports = {
        "./content/*.md",
        "./layouts/**/*.html",
      ],
-      safelist: ["arrow", "tooltip", "tooltip-arrow", "tooltip-inner"],
+      safelist: [""],
      blocklist: [""],
    },
  },