Merge pull request #157 from rl-institut/feature/animations

Add animations and a link to credits

CHANGELOG.md

@@ -32,7 +32,9 @@ Here is a template for new release sections
 - links from logo (#129)
 - about-map page (#153)
 - fadein for features (#155)
-
+- automatic redraw of gauges when scrolling over (#157)
+- automatic interval change of feature when section is in viewport (#157)
+- link to web development credit page (#157)
 ### Changed
 - allow use of variable via URL (#76)
 - make table in about responsive and centered (#88)

app/static/js/features.js

@@ -122,4 +122,46 @@ $('.feature-previous').on("click", function() {
   // Select the new tab and deselect the previously selected
   selectedTab.className = 'opt--content';
   prevTab.className = 'selected--opt--content';
-});
+});
+
+// triggers a carousel of the features
+var refreshInterval = 8000 //in ms
+var featureInView = false;
+var intervalID = null;
+$(window).scroll(function() {
+   var hT = featureDiv.offset().top,
+       hH = featureDiv.outerHeight(),
+       wS = $(this).scrollTop();
+   if (wS < (hT + hH) && wS > hT - hH){
+       if(featureInView == false) {
+             intervalID = setInterval(function(){ $('.feature-next').click(); }, refreshInterval);
+       }
+       featureInView = true;
+   }
+   else{
+        if(featureInView == true) {
+            if(intervalID != undefined){
+                clearInterval(intervalID);
+            }
+        }
+        featureInView = false;
+   }
+});
+
+// triggers a redraw of the gauges when scrolling over the Our progress in number div
+var inView = false;
+var progressDiv = $("#landing-progress");
+$(window).scroll(function() {
+   var hT = progressDiv.offset().top,
+       hH = progressDiv.outerHeight(),
+       wS = $(this).scrollTop();
+   if (wS < (hT + hH/2) && wS > hT - hH/2){
+       if(inView == false) {
+        $(".GaugeMeter").gaugeMeter()
+       }
+       inView = true;
+   }
+   else{
+        inView = false;
+   }
+});

app/templates/base.html

@@ -147,8 +147,14 @@ <h1>Stay in touch</h1>
           <div class="cell medium-4 center--align">
             <p>&copy; {{ current_year }} All Rights Reserved by <b> nigeriase4all.gov.ng</b></p>
           </div>
-          <div class="cell medium-4 large-3 footer-license__img">
-            <img src="{{ url_for('static', filename='logos/logo-5-blitz.png') }}">
+          <div class="cell medium-4 large-3 grid-x">
+            <div class="cell medium-offset-1 medium-9 center--align">
+              <a href="{{ url_for('about-map.about')}}" target="_blank">Web Development</a>
+            </div>
+            <div class="cell medium-2 footer-license__img">
+              <img src="{{ url_for('static', filename='logos/logo-5-blitz.png') }}">
+            </div>
+            </div>
           </div>
         </div>
       </div>