The Process of Redesign
I found a useful tutorial on Codrops and used this code as a starting off point. I found a thumbnail scrolling plug-in at Malihu Web Design that functioned the way I wanted it too. Then I had to figure out how to pull it all together. This took me a reeeaaaallllly long time. Having worked with authoring software like Flash and Director in the past, I am familiar with Actionscript and Lingo programming, but it was slow-going.
What I needed to figure out
- Calculating how to place each portfolio image of differing sizes depending on mouse location, then make it scrollable with mouse movement.
- Getting the forward and back button to navigate the 2 different thumbnail scrollers.
- Getting the layout to look the way I want with css3
Some tips for do-it-yourself beginners
- Decide what you want your website to do and then figure out how to do it.
- Force yourself to type all the code. It's tempting to just cut and paste and tell yourself you know it, but forcing yourself to type it all out will make you learn it better.
- Sometimes drawing diagrams help. I had a tough time figuring our how to center and place the displayed image correctly. It got really confusing with margins, padding, window height, header height, display area, mouse position, different image dimensions.... I messed around with the numbers forever, got really frustrated, then resorted to drawing it out and labeling all these dimensions to clear my head. After seeing all the dimensions drawn out I suddenly knew what I had been doing wrong.