OCram85/beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Alexander Filatov 2018-01-03 07:58:51 +01:00 committed by Dean Attali
parent 92c9cf8e4b
commit 7bc3cb20ea
2 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/main.css
View File

@ -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;
}

40
js/main.js
View File

@ -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();
}
}
};