Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Calvin Maighan
12,061 PointsHow Can I Make Smooth PAGE Transitions?
So I was looking for answers for a css height problem I had and stumbled upon this Website by chance: mjau-mjau.com.
At first the special part was that his gallery took up 100% of the viewport which is what I wanted to do (Can be solved with the 'vh' unit). Then I clicked on a link on his site and WOWZA!
There is a perfectly smooth transition and animation between all of his pages! I was shocked at first cause I've never experienced a Zero lag delay on the internet like that.He has a blog post suggesting this new concept to preload the entire DOM element through Ajax: http://mjau-mjau.com/blog/preload-website/
Even after reading the blog though, I don't quite understand how to do it. Could one of the teachers make a video response about it? This looks like something people need to know about and could put treehouse students ahead of the pack!
Or else if some one could explain it to me in the comments?
Thanks, Have a nice day!
2 Answers
Ryan Duchene
Courses Plus Student 46,022 PointsThe transition on that site is pretty awesome, and I really love it. But I can almost guarantee you that it's not zero-lag; he's just done a ton of stuff to make it appear as if there's very little lag. I'm also confident that it has little to do with the DOM caching concept, although that sounds pretty cool as well.
The transition from page to page is doubtless controlled by Ajax (Dave McFarland teaches a course on Ajax here at Treehouse, and it's great), and everything else appears to be controlled with either CSS animation or advanced JavaScript animation (so a library like GSAP). Getting all those ducks in a row might be somewhat tricky, though (especially with DOM caching); I may try it out in Workspaces later.
About the DOM caching: I tried navigating around on the site and it is very zippy, doubtless due to his method. I'll try experimenting with this method on some other stuff of mine to get some more tangible results.
Basically, the way it works is that he's storing his web content on your computer using HTML5 local storage between the different pages whilst loading all his CSS and JS at the start of your session. Pretty slick indeed. I copied one of his entries into a text file and it's over six hundred thousand characters long.
Aaron Graham
18,033 PointsRyan Duchene pretty much summed it up, however I have to disagree on one point. I think the quick transitions have everything to do with his DOM caching concept. He is basically grabbing the entire site content (less the images), gzipped, in one AJAX call and loading it into a local storage object. Subsequent page requests are able to do a quick lookup on the local storage object, and if the page is there, load the content from there. Way faster than another request to the server.