A friend and I are making a website for a high-school project that we could hopefully use in the future. It's a digital portfolio for our illustration and concept art. We had an idea to do this for our website, but we have no idea how. We have basic knowledge of HTML & CSS, but haven't learned Java, so we have no idea how complicated it is to do this.

Basically, I want there to be a frame, 500 x 500, for example. There're are two buttons. One of the buttons when clicked, will have content that you can scroll through fly into the frame from the right. The other button will do the same, but fly in from the left. If it helps at all, the content is going to be our art pieces, so images.

I animated the framework incase my explanation isn't helpful. Here's a gif:
http://cdn.makeagif.com/media/2-06-2014/bAZKCq.gif

I'd really appreciate at least some feedback on this. I'm not asking for the code to do it, but a general direction on how to get started with this, or if something like this already exists.

Thanks.