Website Effects

I like cool websites. I don't find them too much on my own (most of my web browsing consists of reading articles, which tend to exist on pretty straightforward sites), but when I do, I make note of them. So it was that bookmark folder I looked in as I began to plot out my portfolio site.

After some searching and a little help from a friend, I came across Codrops. The rest of my day was completely absorbed. I have a tendency to go on tutorial binges, and this was one of my most productive. I don't want to build my entire portfolio site using material from Codrops, but it might happen.

So here's what I found.

First up is the first tutorial on the site: a stack gallery. It's a simple, but fun, transition for a gallery that takes the images and shuffles them around. Maybe it just appeals to the part of me that likes playing Magic, but I think it' an interesting effect to fancy up a part of the site that would otherwise just have a boring old transition. I'm not sure that this is necessarily what I need for my site; it doesn't necessarily fit in with the whiteboard theme.

The demo of the effect

Next is the so called "YouTube menu"effect. This is a tidy way to condense categories, and it's something I might utilize on my gallery tab (clicking gallery would cause the different categories to expand out in this way). When it's condensed, the bar looks very clean, and as long as you have the room for the expansion, it can transition nicely.

The codrops guy really likes green

Then there's my personal favorite, the SVG Drawing animation. The first thing I thought of when I saw this was having my little whiteboard wanderer logo be drawn in. This is by far the most confusing tutorial for me so far; it uses an SVG, CSS, and some javascript. All things I'm fairly comfortable with, but things that are going to require a lot of work on my end. I'm a little concerned about browser limitations when it comes to svg and css transitions, but that's a bridge I'll have to cross soon.

The animation effect mid-transition

The last effect I'm considering is the Off-canvas navigation. It's an odd effect, but I can see it playing into the whiteboard aspect. I'm just concerned that having my navigation not always on screen will have a negative effect on the website itself. I've gotten a mixed bag of answers from people about if they like it or not; as long as I make the navigation pull-up an obvious thing, I think it can work. I've tried to reflect this in my wireframe sketches.

the scale back and rotate object. it could give a cool effect as if it were a whiteboard!

Either way, I've got my work cut out in getting these effects to apply to an actual site! Stay tuned!