Avatar now fades with jQuery (#293) (#295)

css/main.css

@@ -172,11 +172,7 @@ img {
 }
 
 .navbar-custom .avatar-container {
-  opacity: 1;
   position: absolute;
-  -webkit-transition: opacity 0.5s ease-in-out;
-  -moz-transition: opacity 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
   left: 50%;
   width: 50px;
   margin-top: -25px;
@@ -196,10 +192,6 @@ img {
   display: block;
 }
 
-.navbar-custom.top-nav-short .avatar-container{
-  opacity: 0;
-}
-
 .navbar-custom.top-nav-expanded .avatar-container  {
   display: none;
 }

js/main.js

@@ -10,11 +10,13 @@ var main = {
     $(window).scroll(function() {
         if ($(".navbar").offset().top > 50) {
             $(".navbar").addClass("top-nav-short");
+            $(".navbar-custom .avatar-container").fadeOut(500);
         } else {
             $(".navbar").removeClass("top-nav-short");
+            $(".navbar-custom .avatar-container").fadeIn(500);
         }
     });
-    
+
     // On mobile, hide the avatar when expanding the navbar menu
     $('#main-navbar').on('show.bs.collapse', function () {
       $(".navbar").addClass("top-nav-expanded");
@@ -22,7 +24,7 @@ var main = {
     $('#main-navbar').on('hidden.bs.collapse', function () {
       $(".navbar").removeClass("top-nav-expanded");
     });
-	
+
     // On mobile, when clicking on a multi-level navbar menu, show the child links
     $('#main-navbar').on("click", ".navlinks-parent", function(e) {
       var target = e.target;
@@ -34,7 +36,7 @@ var main = {
         }
       });
     });
-    
+
     // Ensure nested navbar menus are not longer than the menu header
     var menus = $(".navlinks-container");
     if (menus.length > 0) {
@@ -60,12 +62,12 @@ var main = {
       });
 
       fakeMenu.remove();
-    }        
+    }
-    
+
-    // show the big header image	
+    // show the big header image
     main.initImgs();
   },
-  
+
   initImgs : function() {
     // If the page was large images to randomly select from, choose an image
     if ($("#header-big-imgs").length > 0) {
@@ -78,57 +80,57 @@ var main = {
 	  var src = imgInfo.src;
 	  var desc = imgInfo.desc;
   	  main.setImg(src, desc);
-  	
+
 	  // For better UX, prefetch the next image so that it will already be loaded when we want to show it
   	  var getNextImg = function() {
 	    var imgInfo = main.getImgInfo();
 	    var src = imgInfo.src;
-	    var desc = imgInfo.desc;		  
+	    var desc = imgInfo.desc;
-	    
+
 		var prefetchImg = new Image();
   		prefetchImg.src = src;
 		// if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
-		
+
   		setTimeout(function(){
                   var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
   		  $(".intro-header.big-img").prepend(img);
   		  setTimeout(function(){ img.css("opacity", "1"); }, 50);
-		  
+
 		  // after the animation of fading in the new image is done, prefetch the next one
   		  //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
 		  setTimeout(function() {
 		    main.setImg(src, desc);
 			img.remove();
   			getNextImg();
-		  }, 1000); 
+		  }, 1000);
-  		  //});		
+  		  //});
   		}, 6000);
   	  };
-	  
+
 	  // If there are multiple images, cycle through them
 	  if (main.numImgs > 1) {
   	    getNextImg();
 	  }
     }
   },
-  
+
   getImgInfo : function() {
   	var randNum = Math.floor((Math.random() * main.numImgs) + 1);
     var src = main.bigImgEl.attr("data-img-src-" + randNum);
 	var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
-	
+
 	return {
 	  src : src,
 	  desc : desc
 	}
   },
-  
+
   setImg : function(src, desc) {
 	$(".intro-header.big-img").css("background-image", 'url(' + src + ')');
 	if (typeof desc !== typeof undefined && desc !== false) {
 	  $(".img-desc").text(desc).show();
 	} else {
-	  $(".img-desc").hide();  
+	  $(".img-desc").hide();
 	}
   }
 };