How to do a custom transition using Javascript

Question

So I am developing this site from scratch (first time ever) and I've made the general layout from the psd I made and everything is great, so I am now at the point where I want to refine the site a bit with some javascript effects-functions.

When I am at the index page, you have a banner, sidebar and content (articles). When I press the articles it goes to the article (obviously) but I want to make a custom loading page like this at 0:22: https://www.youtube.com/watch?v=k1q6Y_snURw#t=20

I've got to make or find a gif but say I've done that, how would I add this to the site?

The articles are all in a class by themselves although I guess I would have to use the ID for each specific article to get it to go to the respective article.

Answer 1

If i understand properly you want a smooth scrolling to the article. You can achieve this with using animate and scrollTop.

Is it possible to animate scrollTop with jQuery?

Now you need to select your article with a selector.

http://api.jquery.com/category/selectors/

Your saying that your article has is proper class. So the code will look like this :

$("sidebar").click(function () { 
    // "." is the selector for class and i assume the value of the sidebar match the class of article
    $("html, body").animate({ scrollTop: $("." + $(this).val()).position().top }); 
});

Hope this help.

Answer 2

EDIT: Pop this in a file and add a reference to it in every page that has a link:

function loadXMLDoc(name) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.addEventListener("load", transferComplete, false);
  xmlhttp.open("GET", name, true);
  document.getElementById("Loading").style.display = "block";
  xmlhttp.send();

  function transferComplete() {
    document.write(xmlhttp.responseText);
    history.replaceState(null, null, name);
  }
}

function AJAXcallback(e) {
  var e = window.e || e;
  var href = e.target.getAttribute("href");
  if (e.target.tagName !== 'A' || href[0] == "#" || href.substring(0, 11).toUpperCase() == "JAVASCRIPT:" || e.target.class == "noloadpage")
    return;
  e.preventDefault();
  loadXMLDoc(href);
}
if (document.addEventListener)
  document.addEventListener('click', AJAXcallback, false);
else
  document.attachEvent('onclick', AJAXcallback);

And something to show when the next page is loading (be sure to add the id "Loading") like this:

<div id="Loading" style="display:none">Loading</div>

This makes every link that isn't an anchor(#id) or function(javascript:whatever) and doesn't have the "noloadpage" class load with AJAX and show the Loading div while loading.