Side Scrolling Portfolio Site

[jdleblanc]

I’d like to create a simple side scrolling portfolio style site with only CSS. I want to stay away from using javascript. Does anyone know the best way to accomplish this using CSS3 besides absolute positioning? Are there any new features with CSS3 that would be good for this?

[Historical Forums User]

Hey jdleblanc, my first inclination is to ask, “why side-scrolling?” I’m just wondering. I think its okay for a personal site or a portfolio site – depending on what you want that site to accomplish. What kind of work do you hope to attract? Or is this just for fun? If you’re looking for corporate-type clients, I’d advise against side-scrolling. Anyways, just know that your portfolio needs to match the needs of future clients.

The best minimal side-scrolling portfolio I’ve seen is Jon Contino’s. http://joncontino.com/selected-works

He has implemented javascript (for navigation and keypress) but the layout is do-able with CSS.

Also, why do you want to stay away from javascript? Javascript isn’t that difficult, and you’ve got a whole community here that could help you along. As far as the ‘how’ of building this, I need to know how extensive your knowledge of CSS and HTML is.

[jdleblanc]

(aaronsilber) – A side scrolling site seems appropriate for a portfolio. A portfolio is traditionally in book format; you turn pages right to left. I guess it’s slightly counterintuitive because we’ve become accustom to vertical-ness on the web, but I don’t see it hindering anyone’s user experience if it’s done well. Thanks for the link. That’s what I’m trying to accomplish.

[Historical Forums User]

You’re right @jdleblanc – it just depends on what your portfolio is of. If it’s there to display your web design skills, you may not want to use a side-scrolling layout. Illustrations, photography, and images of work all seem appropriate.

A layout like the one I linked to is easy enough to accomplish in an hour. Do you need any help? The most obvious way you could implement CSS3 would be to use a box-shadow on your images.

[Historical Forums User]

@jdleblanc – Hello again! I posted my last comment, then started to think through how to accomplish a side-scrolling site with images, and realized there were probably a few tricky parts. So I dove into code, and created the site in about 45 minutes without javascript.

http://www.meetaaronsilber.com/sidescroll/index.html

If you were to add images to the list, the container will automatically expand to fit them, so you wouldn’t ever have to give the container an explicit width (or height actually). I used images with different heights to show you how they would look, and that they would not break the layout.

I didn’t really comment my code, so if you have any questions, please ask. This was fun!

P.S. – anyone wondering where all the cats came from. Its a super-awesome service called ‘placekitten’. I use it for all my layout needs (and it brightens my day!).

http://placekitten.com/

[jdleblanc]

Haha. The kittens are hilarious. Good job whipping out a side scrolling site in no time. I thought of just using an unordered list like that, but then it became complicated in my brain when I thought about adding text. Some times the simple stuff gets me.

[jdleblanc]

Thanks Aaron. This has been really helpful. I’m feeling the effects of having not even thought about code for the past few years. I’m very rusty.

[mixxmac]

Great job @aaronsilber! And, thanks for the kittens link.

[jdleblanc]

I didn’t even know there was such a thing as the white-space property. That was the key!

[Historical Forums User]

@mixxmac @jdleblanc – hey thanks guys! There are quite a few tricks in there that make this possible, white-space being a biggie. Notice also that the img tags within the portfolio ul are styled with “vertical-align: top;” Without that, they would all be aligned at the bottom, and it wouldn’t look very nice. Again, any questions, just drop me a line.

[Johnnyb]

One usability pro I like about vertically scrolling sites is that I use the wheel on my mouse to navigate the page up and down when I browse, I rarely use the actual scrollbar. But I would be unable to do that with a horizontally scrolling site. I don’t know if that’s an issue for most users, but it is for me, and I think it’s one of the reasons why a lot of sites are vertically layed out like you say.

[jdleblanc]

Very good point about the wheel. That didn’t even cross my mind. I have the Mac mouse with the wheel that works any direction.

[soap]

ive seen very cool sites with not necessarily side scrolling but where everything is actually on one page and certain anchors move elements around creating “new” pages.

nothing wrong with this :)

[Author]

Posts