Added animation toggle option

5 files changed, 11 insertions, 7 deletions

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 261d12f..e441818 100644
--- a/exampleSite/config.yaml
+++ b/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

diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index 6286bd6..4049717 100644
--- a/layouts/partials/sections/header.html
+++ b/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 }}">

diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html
index c915674..2f3d35b 100644
--- a/layouts/partials/sections/hero/index.html
+++ b/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=""

diff --git a/layouts/partials/sections/hero/social.html b/layouts/partials/sections/hero/social.html
index ab5e8ef..0297e59 100644
--- a/layouts/partials/sections/hero/social.html
+++ b/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">

diff --git a/static/css/index.css b/static/css/index.css
index 611c3c9..85a062e 100644
--- a/static/css/index.css
+++ b/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;