Smooth Page Transitions

Hey there!

I’m trying to create a smooth transition on this personal website (4ndygu.github.io), where clicking “blog” moves my whole content column containing the “Andy Gu” section up out of the screen, ushering in the content column of my actual Blog column. I’ve been trying to load the “mainbar” div with the HTML from the mainbar at blog.html, but I’m having trouble facilitating this transition - Can anyone help me out?

Hi,

I’m not sure I get what you are trying to do. At present it just seems as you load the blog.html page when you click blog?

If you want a transition then you will need the blog content in the same page as the home page in a hidden div (or loaded with ajax) so that you can manipulate both via script at the same time.

Hey Paul,

Thanks! I was trying to get a transition, and I ended up using a hidden div. Its updated now here! 4ndygu.github.io
Is using Ajax a better idea? I read about it, but I’m not too sure.

If its just some static text then a hidden div will be ok. If it was some changing data from a database or a file that was constantly updated then ajax might be better.

Also remember that if the div is hidden (or loaded with ajax) then it is inaccessible to search engines if the element contains important content. In that case rather than display:none hide the element off screen (or with other methods) and then bring it back when needed.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.