Merge pull request #74 from NishantTharani/animation-toggle

Added animation toggle option by @NishantTharani

exampleSite/config.yaml

@@ -55,6 +55,9 @@ params:
   # Note the lack of "" in true, it should be of boolean type.
   useBootstrapCDN: false
 
+  # Whether the fade animations on the home page will be enabled
+  animate: true
+
   theme:
     disableThemeToggle: false
     # defaultTheme: "light" # dark

layouts/partials/sections/header.html

@@ -24,7 +24,7 @@
 
 <!-- Navbar -->
 <header>
-    <nav class="pt-3 navbar navbar-expand-lg">
+    <nav class="pt-3 navbar navbar-expand-lg {{ if .Site.Params.animate }}animate{{ end }}">
         <div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
             <!-- navbar brand -->
             <a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">

layouts/partials/sections/hero/index.html

@@ -2,7 +2,7 @@
 <section id="hero" class="py-5 align-middle">
     <div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-8 content" id="primary-font">
+            <div class="col-sm-12 col-md-12 col-lg-8 content {{ if .Site.Params.animate }}animate{{ end }}" id="primary-font">
                 <span class="subtitle">
                     {{ .Site.Params.hero.intro }}
                 </span>
@@ -30,7 +30,7 @@
             </div>
             <div class="col-sm-12 col-md-12 col-lg-4">
                 <div class="row justify-content-center">
-                    <div class="col-sm-12 col-md-9 pt-5 image px-5 px-md-5 px-lg-0 text-center">
+                    <div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center">
                         <img src="{{ .Site.Params.hero.image }}" 
                             class="img-thumbnail mx-auto" 
                             alt=""

layouts/partials/sections/hero/social.html

@@ -1,4 +1,4 @@
-<span id="loading-icons" style="display: none;">
+<span id="loading-icons" style="display: {{ if .Site.Params.animate }}none{{else}}block{{ end }};">
     {{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}
     <span class="px-1">
         <a href="{{ .url }}" target="_blank" class="btn social-icon">

static/css/index.css

@@ -51,10 +51,11 @@
   }
 }
 
-header .navbar {
+header .navbar.animate {
     animation: fade-up 0.5s ease-in;
 }
 
+
 /* ToolTip */
 
 .tooltip {
@@ -75,7 +76,7 @@ header .navbar {
     line-height: 2rem;
     max-width: 100%;
 }
-#hero .content {
+#hero .content.animate {
     animation: fade-left 1s ease-out;
 }
 
@@ -108,7 +109,7 @@ header .navbar {
     opacity: 0.8;
 }
 
-#hero .image img {
+#hero .image.animate img {
     animation: fade-in 1s ease-out;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: box-shadow 0.3s;