Statement slider implemented

diff --git a/css/app.css b/css/app.css
index f7c0755..a8475d5 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6526,6 +6526,24 @@ main {
     .statements h1 img {
       display: none; } }
 
+#statement-pre-slider {
+  display: inline-block;
+  margin-left: -70px;
+  margin-right: 18px; }
+
+#statement-slider {
+  width: 100px;
+  display: inline-block; }
+
+@media only screen and (max-width: 40em) {
+  #statement-pre-slider {
+    display: block;
+    margin: 0 auto; }
+  #statement-slider {
+    width: auto;
+    display: inline-block;
+    margin: 0 auto; } }
+
 main.page-inside .statements {
   margin-bottom: 15px; }
 main.page-inside #content-wrapper #main-content h1 {

diff --git a/js/app.js b/js/app.js
index 1481ce2..92ac4e6 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -30,4 +30,16 @@ $(document).ready(function () {
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
     });
+
+    var c = 0;
+    var statements = ['Impress', 'Work', 'Appeal', 'Last', 'Amaze'];
+    slider = $('#statement-slider');
+    i = -1;
+    
+    var slideshow = setInterval(function(){
+        var val = statements[++i] || statements[i=0];
+        slider.fadeOut(function(){
+            $(this).text(val).fadeIn(1000);
+        });
+    },3000);
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 7b76e81..5a3990b 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -21,4 +21,16 @@ $(document).ready(function () {
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
     });
+
+    var c = 0;
+    var statements = ['Impress', 'Work', 'Appeal', 'Last', 'Amaze'];
+    slider = $('#statement-slider');
+    i = -1;
+    
+    var slideshow = setInterval(function(){
+        var val = statements[++i] || statements[i=0];
+        slider.fadeOut(function(){
+            $(this).text(val).fadeIn(1000);
+        });
+    },3000);
 });

diff --git a/parts/statements.php b/parts/statements.php
index 06ef1cc..f7b698e 100644 (file)
--- a/parts/statements.php
+++ b/parts/statements.php
@@ -1,11 +1,11 @@
 <div class="statements">
     <div class="row">
-        <h1 class="text-center">Modern <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Intelligent <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Powerful <br>Websites That Amaze</h1>
+        <h1 class="text-center">Modern <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Intelligent <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Powerful <br><div id="statement-pre-slider">Websites That </div><div id="statement-slider">Amaze</div></h1>
     </div>
     <div class="row medium-uncollapse large-collapse">
         <div class="small-12 columns">
             <div class="row">
-
+                
             </div>
         </div>
     </div>

diff --git a/scss/_main.scss b/scss/_main.scss
index a03b1c4..9c10c7f 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -13,6 +13,26 @@ main {
         }
     }
 }
+#statement-pre-slider {
+    display: inline-block;
+    margin-left: -70px;
+    margin-right: 18px;
+}
+#statement-slider {
+    width: 100px;
+    display: inline-block;
+}
+@media #{$small-only} {
+    #statement-pre-slider {
+        display: block;
+        margin: 0 auto;
+    }
+    #statement-slider {
+        width: auto;
+        display: inline-block;
+        margin: 0 auto;
+    }
+}
 main.page-inside {
     .statements {
         margin-bottom: 15px;