Dynamics text shadow issue #1

klokantech · Jan 5, 2016 · 12036aa · 12036aa
1 parent aaec6f0
commit 12036aa
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -281,6 +281,7 @@ <h2>About us</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.11.2/ol.min.js" type="text/javascript"></script>
 <script src="js/ol-iiifviewer.js"></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script>
           document.getElementById('banner').style.height = (window.innerHeight - 72) + 'px';
 
@@ -373,6 +374,42 @@ <h2>About us</h2>
 
           }
 
+          // shim layer with setTimeout fallback
+              window.requestAnimFrame = (function(){
+                return  function( callback ){
+                          window.setTimeout(callback, 1000);
+                        };
+              })();
+
+          $(document).ready(function(){
+
+            var $shadow = $('#banner-content *');
+            var shadowLimit = 200;
+            var moveEvent = ('ontouchstart' in document.documentElement) ? "touchmove" : "mousemove";
+
+            (function animloop(){
+              requestAnimFrame(animloop);
+
+              $(window).bind(moveEvent, function(ev){
+                var $this = $(this);
+                var w      = $this.width();
+                var h      = $this.height();
+                var center = { x: w/2, y: h/2 };
+                var evX = (moveEvent == 'touchmove') ? ev.originalEvent.touches[0].clientX : ev.clientX;
+                var evY = (moveEvent == 'touchmove') ? ev.originalEvent.touches[0].clientY : ev.clientY;
+                var shadowX = (center.x - evX) / 20;
+                var shadowY = (center.y - evY) / 20;
+
+                shadowX = (shadowX > shadowLimit) ? shadowLimit : shadowX;
+                shadowX = (shadowX < shadowLimit*-1) ? shadowLimit*-1 : shadowX;
+                shadowY = (shadowY > shadowLimit) ? shadowLimit : shadowY;
+                shadowY = (shadowY < shadowLimit*-1) ? shadowLimit*-1 : shadowY;
+
+                $shadow.css({ textShadow: Math.ceil(shadowX) + 'px '+ Math.ceil(shadowY) +'px '+ Math.abs(shadowX*shadowY)/100 +'px rgba(0,0,0,0.4)' });
+             });
+            })();
+          }); 
+
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
           m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)