title: javascript/angularjs - fade out
body: <p>I have a picture with an icon in the middle that indicates the ability to scroll for the user. When the user scrolls, I would like to fade the icon out. Right now I can hide the picture but would like the fade effect.</p>
  
  <p>Here is my view:</p>
  
  <pre><code>&lt;div style="overflow: scroll;"&gt;
      &lt;img id="fullImage" ng-src="{{imageUrl}}" imageonload&gt;
      &lt;img id="drag-arrows" class="drag-arrows" ng-src="images/icon-drag.png"/&gt;
      &lt;h3 id="optionName" class="optionName"&gt;{{ optionName }}&lt;/h3&gt;
      &lt;a class="close-reveal-modal" ng-click="cancel()"&gt;&lt;img class="cancel-icon" ng-src="images/icon-close-fullscreen.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my directive that listens on the touchmove event to hide the drag arrows icon:</p>
  
  <pre><code>modalController.directive('imageonload', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              element.bind('load', function() {
  
                  var img = document.getElementById("fullImage");
  
                  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  
                  var imageWidth = img.width;
                  var imageHeight = img.height;
  
                  var aspectRatio = imageWidth / imageHeight;
  
                  if (w &lt; imageWidth &amp;&amp; h &lt; imageHeight){
                    // scale image down
                    var widthDiff = imageWidth - w;
                    var heightDiff = imageHeight - h;
  
                    if(widthDiff &lt;= heightDiff){
                      imageWidth = w;
                      imageHeight = w / aspectRatio;
                    }
                    else{
                      imageHeight = h;
                      imageWidth = h * aspectRatio;
                    }
                  }
                  else if (w &lt; imageWidth &amp;&amp; h &gt; imageHeight) {
                    // fill image vertically
                    imageHeight = h;
                    imageWidth = h * aspectRatio;
                  }
                  else if (w &gt; imageWidth &amp;&amp; h &lt; imageHeight) {
                    // fill image horizontally
                    imageWidth = w;
                    imageHeight = w / aspectRatio;
                  }
                  else {
                    // fill image in both directions
                    var widthDiff = w - imageWidth;
                    var heightDiff = h - imageHeight;
  
                    if(widthDiff &gt;= heightDiff){
                      imageWidth = w;
                      imageHeight = w / aspectRatio;
                    }
                    else{
                      imageHeight = h;
                      imageWidth = h * aspectRatio;
                    }
                  }
  
                  img.style.width = imageWidth + "px";
                  img.style.height = imageHeight + "px";
                  img.style.maxWidth = "none";
  
                  // add scroll left to parent container
                  var container = img.parentNode;
                  var scrollLeft = (imageWidth - w) / 2;
                  container.scrollLeft = scrollLeft;
  
              });
  
              element.bind('touchmove', function(){
  
                var arrows = document.getElementById("drag-arrows");
                arrows.style.display = "none";
  
              });
          }
      };
  });
  </code></pre>
  
  <p>Any suggestions on how to create this fade effect especially the correct angularjs way if possible?</p>