Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does GitHub do its fancy page-wipe effect when navigating repositories?

  1. Using a modern browser, go to a project in GitHub (e.g., https://github.com/twitter/bootstrap)
  2. Click a subdirectory.

See the page-wipe effect before the subdirectory page loads? How does that work?

Update: More specifically, how does this happen perfectly and seamlessly before the next page is loaded? Can clicks be delayed? Is the next page loaded in the background?

like image 914
a paid nerd Avatar asked Nov 09 '11 15:11

a paid nerd


2 Answers

It uses history.pushState (part of the HTML5 history API) along with some sliding effects. See this link for a plugin + demo.

Also, just found Github's blog post on the topic!

like image 112
Dunhamzzz Avatar answered Oct 23 '22 08:10

Dunhamzzz


Seeing that github uses jquery, this is probably the answer you're looking for: http://api.jquery.com/category/effects/

like image 24
lanzz Avatar answered Oct 23 '22 07:10

lanzz