• 1
• 2
• 3
• 4
• 5

ajax animation animationextender arrow aspnet august basically baxter big bit blocks box breakdown class classblockpage classes coda color comment content create creativeui css david days demo design div duration effect effects framework frameworks great height horizontal idea ii implementation interview javascript learned left lot margin markup move notice overflow page pages part pixels position properties required runatserver scriptaculous scroll scroller scrolling setup side simply site sites text top tricky ui web width work

Keyword Cloud Navigation Map

When I was building my portfolio page a few weeks ago, I came up with an idea for a side-scrolling page. The idea is basically, you click on an arrow and the content slides to the left or right. Cool idea, but I couldn’t wrap my head around how to get the CSS to work.

Shortly after I figured out how to get it all to work I learned that my unique idea wasn’t all that unique after all. Its still a great effect, and over the last few days I have seen a lot of people asking how to do it on various forums so it makes for a good tutorial.

When I originally started this article I was planning on using just the ASP.NET Ajax framework because that is what I was using for my latest project. However, once I got it up and running I was a bit disappointed in the performance of the animation. That is when I began hunting for another way to do it. By the end of my search I had delved in and created a side scroller using 3 different frameworks: ASP.NET Ajax, scriptaculous, and MooTools. All of them “get the job done”, but I learned that each have their own advantages and disadvantages.

Read Full Tutorial...