Talking about Javascript.
You know I am trying to use Gallery theme for triqui.com
Yesterday I played a bit with the theme and I completely screwed everything… something like “how to destroy a complex theme in a matter of minutes”.
Then I decided to code something similar by myself. That’s the only way I know to custom everything whenever I want.
One of the best features of Gallery theme is the slider effect, so I played a bit with jQuery until I achieved something similar.
I have to say I tried to make it with Scriptaculous but for these simple effects nothing beats jQuery in my opinion.
Not the classic "Lorem Ipsum"
Line 6: importing jQuery library
Line 8: we can call it a listener for the document to be ready. When it’s ready, it executes the function
Line 9: fading the content of the text element to transparent. This way I am starting with a transparent text. Obviously I can set this from the css declaration, but I wanted to do it with jQuery because it’s cool :)
Line 10: this is a listener for the container element. Listens for the mouse to be over it.
Line 11: stopping previous animations and moving the block element (the image with the text) up by 25 pixels and once the animation finishes, fades in the text element. This replicates the Gallery rollover effect, and I can display text on multiple rows. The overlow:hidden style at line 24 gives the feeling the image is sliding like a garage door and not simply moving.
Do not use relative positioning in block element or it won’t work on IE7 (yet anohter IE7 bug…)
Line 13: listener for the mouse leaving the container element
Line 14: fading away text element and moving the block element to its original position
And this is the result. As you can see it’s pretty similar to the original Gallery effect.
Move the mouse on the image and see
Download the source code with jQuery compressed library.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.