GlassBox is a JavaScript library that allows you to add Windows Vista-like transparent effects on your website. It runs on top of the the Prototype and Script.aculo.us library and comes complete with an API documentation and tons of examples. It is released under the MIT license.
I’ve seen at least three submissions over here at CSS Vault of sites that use the “Step Carousel” effect. I did not even know what it was called until I saw this article, which outlines the steps needed to accomplish the effect using the jQuery library.
The result looks very nice and the animation is very smooth. The only issue is that this tutorial takes so many steps and makes use of inline JavaScript, though I suppose they can easily be converted to DOM-based JQuery statements, separating the presentation layer from the backend.
iBegin has just released iBox, a “lightweight, fast, and flexible” lightbox script.
It supports the following content types:
Images
It supports image overlaying and will automatically scale down the window if the browser’s viewpane is too small.
Documents
Displays linked documents in a similar fashion as Images.
Inline Containers
iBox can also display containers (e.g. hidden DIVs) within the same page.
YouTube Videos (Flash Video)
iBox’s architecture supports plugins. Images, Documents, and Inline Containers are all plugins, and YouTube Videos is provided as an example for developers to make their own plugins.
One notable aspect of iBox is its support for non-JavaScript capable browsers. It supports a target attribute which specifies the target document to be loaded, so that you can specify a different value for the HREF attribute. Very nifty.
Links:
jQuery happens to be my favorite JavaScript framework, so I was very happy when Noupe came up with a list of 50+ Amazing Jquery Examples. The article has “Part 1″ attached to it so expect to see more. The list ranges from useful to awesome to just cool, such as the following:
This technique uses CSS pseudo selectors to the drop cap effect without modifying the HTML code.
For the poor folks who use IE6, David Kaneka came up with a JavaScript (jQuery) based solution that we can use.
So go ahead and see how it’s done or check out the demo page.
WebDesignerWall has come up with a trick that uses nothing but a little CSS and PNG to apply gradient effect onto plain HTML text. The trick involves overlaying a blank block element that contains a translucent PNG gradient on top of the regular text.
As can be seen in this demo page, it actually looks pretty good.
There are a few limitations to this, of course. One being that the gradient will have to use the same color as the text’s background. Second, the background will have to be a solid color.
Finally, it requires the PNG hack to work on IE6, which relies on JavaScript. So, if the viewer happens to have JavaScript turned off, be prepared to see some cross-browser uglyness:
All in all a novel idea, but I’m not so sure I want to risk the chance of loosing a visitor though an accidental flash of ugly design.
Lightview is an AJAX image viewer similar to the ever so famous Lightbox JS. It features very nice, PNG-less, customizable rounded corners, a slideshow mode, pulsing captions, and a very clean and smooth blackout animation and slideshow transition.
One thing that I really like about Lightview is that the image remains stationary when scrolling unlike in Lightbox where the image scrolls with the content.
Still, the script was implemented on Scriptaculous and Prototype, which, given the size of these things may not be the way to go for sites optimized for speed. For those looking for a lighter lightbox alternative, Slimbox may be the better choice.
Another article demonstrating what could be done by combining effects such as opacity, shadows, and tiger striping.
Currently they are claiming that only Opera 9.5 beta renders the demo correctly — not really useful right seeing that Opera has been stuck at ~1.5% market share, and I am sure only a handful of them actually use the beta.
Posting this from my sleek and super fast Mozilla Firefox 3 Beta 2.
Update: Link to the article (thanks, mediter!)
swIR uses JavaScript and Flash to dynamically apply visual effects to images on a web page, using a method similar to sIFR (Scalable Inman Flash Replacement). Probably the most interesting feature of this is the ability to scale an image long with the text. It reportedly crashes Opera, though.
It is also incompatible with other JS libraries like Prototype or MooTools and doesn’t work with hot-linked images (because of security restrictions in Flash), and you can sometimes get a FOUC (flash of unstyled content) when the image loads before JavaScript replaces it.
Given that CSS 3 can already do almost all of these effects, I am eager to explore other possibilities with Flash-based image replacement. While I expect the adoption of CSS 3 enabled browsers to come slowly, I hope the maintainers of this project will not loose interest and keep it alive with fresh ideas that cannot be done with CSS or CSS 3. How about dynamic image composition, or creating interesting button effects with the images?
You are currently browsing the archives for the Effects category.
