A personal breakthrough

Being my first post I thought I would do something about the website I’m in the middle of building (my web design and development portfolio). I had kind of a personal triumph today, in that I’m beginningto understand JQuery(a little). I was doing pretty well with AS 3.0 when I was learning it a couple of years ago, but I think that JAVA script and HTML 5 is where it’s at with web development. So my breakthrough as I like to call it (though it hardly was) is that I wrote a conditional statement, fully expecting it to miserably fail and require several hours of debugging. I was, however to my delight completely wrong and my little script worked as intended and the first time. I watched “The Social Network” last night, and it really inspired me to become a better programmer even though my main focus will likely remain more in design (not that I’ve really lacked in inspiration, but rather motivation).

I’ve been working on this social networking bar all day, but I’ve finally gotten over the hump as it were. I think I’ve gotten most of the bugs worked out and it’s even working respectably on IE6 the bane of all web designers everywhere. So here is a screenshot of it in action, but basically it’s like a drop down menu, but rather than drop down the element slides out. The coolest part is the animation I’ve accomplished where it pushes any elements in the <UL>on the right of the activated <div> to the right on the mouseOver. And then there is a really nice little snap and bounce when the user activates the .

pre state

This is how it looks before

Sliding Social Networking Bar

And after.

You can see how it crunches the two elements on the right hand side together, and when you release it they bounce back into place. I love playing with it, it’s kinda fun.

So far I’m really happy with the way my portfolio site is turning out. The color scheme is fairly playful, and modern retro. Just looking at this color block reminds me of a TV color test, which makes me think of an illustration I did a while back for a redbubble T-Shirt.

That’s it for now, but I’ll be posting some code pretty soon just encase some poor soul happens upon my blog and wants to accomplish a similar effect. I warn you, use my code as an example of how not to develop scripts.

Advertisements

~ by hyperionart on July 4, 2011.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: