Skip to content

Instantly share code, notes, and snippets.

@ricardozea
Last active July 16, 2018 02:42
Show Gist options
  • Save ricardozea/74872cb4547a6c871860466dd30c6f07 to your computer and use it in GitHub Desktop.
Save ricardozea/74872cb4547a6c871860466dd30c6f07 to your computer and use it in GitHub Desktop.
Fade pages in and out when clicking on any internal links. External and `mailto:` links are treated as normal. Author: Adam Marsden Article: https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292
//**MINIMAL PAGE TRANSITIONS WITH JQUERY & CSS
//https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292
$(function() {
$("a").each(function() { /* [1] */
if ( location.hostname === this.hostname || !this.hostname.length ) { /* [1] */
var link = $(this).attr("href"); /* [2] */
if ( link.match("^#") ) { /* [3] */
$(this).click(function() {
var target = $(link); /* [4] */
target = target.length ? target : $("[name=" + this.hash.slice(1) +"]"); /* [4] */
if (target.length) {
$("html,body").animate({ /* [5] */
scrollTop: target.offset().top - 70 /* [5] */
}, 1000); return false; /* [5] */
}
});
} else if ( link.match("^mailto") ) { /* [6] */
// Act as normal /* [6] */
} else {
$(this).click(function(e) {
e.preventDefault(); /* [7] */
$("html").addClass("fadeSiteOut"); /* [8] */
setTimeout(function() { /* [9] */
window.location = link; /* [9] */
}, 500); /* [9] */
});
}
}
});
});
html { animation: fadeSiteIn .3s ease forwards; /* [1] */ }
html.fadeSiteOut { animation: fadeSiteOut .3s ease forwards; /* [2] */ }
@keyframes fadeSiteIn { /* [1] */
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeSiteOut { /* [2] */
from { opacity: 1; }
to { opacity: 0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment