Reveal: jQuery Modal Plugin from ZURB - ZURB Playground - ZURB.com. Setting up Reveal modals is only three easy steps.
Attach the needed files, drop in your modal markup then add an attribute to your button. Reveal is awesome because it's easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it's fast, sexy and just works. Now let's see how easy is can be to get Reveal working! Reveal is now part of Foundation! This version of Reveal has been depreciated. Visit Foundation Step 1: Attach Needed Files Step 2: The Modal Markup Step 3: Attaching Your Handler By putting the "data-reveal-id" attribute on the anchor, when clicked the plugin matches the value of the "data-reveal-id" attribute (in this case "myModal") with an HTML element with that ID.
Basically, put the "data-reveal-id" attribute on an object and make it's value the ID of your modal. Options Every good plugin has options, and this one has just a few, but important ones: Isotope. Plugin - Create an Attractive Before and After Photo Effect with jQuery. Without Caption Caption 1.
10 Awesome Techniques and Examples of Animation with jQuery. Text with Moving Backgrounds with jQuery. Personally, I am a huge fan of negative space in design. This got me thinking while I was trying to accomplish something different. Normally a textual caption would be positioned above a background, but I wanted to do it the other way around: place the background in the letters.
I also wanted to add some nice dynamic effects to enhance the effect. This was amazingly easy to accomplish in jQuery with the use of a little creativity. This article will explain what you need to do create an effect like this yourself. Example What are we going to do? We are going to create a container which has a moving background, but only a set of letters will be visible of the background. To do this we need just a few things: A nice background pattern or image Letters punched out of an image Just a little jQuery code Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Step 1: Creating the “mask” Step 2: A little documenting and styling <! jQuery Smooth Div Scroll by Thomas Kahn - smooth content scrolling using jQuery. Create an Attractive Before and After Photo Effect with jQuery. Introduction 13 Jan 2011, Australia suffered a catastrophic flood disaster, almost 75% of Queensland was affected.
Inland Tsunami in Toowoomba, evacuation of Brisbane city, it was a total chaos in the entire state. Sudden flood which lead to torrential and ferocious flood destroyed homes and killed many. It will take 2 years to recover. If you wish to donate, please visit Queensland Government State Website. The reason I bought it up because I got this inspiration from this website - Queensland Floods - Before After. Well, it is saddening to see all the damages the flood did. You may want to check out the demo now: I keep the HTML really simple, just a div with 2 images in it. Value in ALT attribute will be used as captionwidth and height of the first image will be used for calculation, therefore, it's mandatory to have it defined This is what you need to use it: However, the content in the div will be totally revamped once it's processed by javascript.
CSS isn't that complicated as well. jQuery Approach by Scott Robbin. A jQuery plugin that allows you to animate CSS properties based on distance to an object by Scott Robbin Download Approach Now jQuery Approach works in a very similar manner to jQuery animate, however it animates over distance instead of time.
The closer you get to the object, the more the style will be applied. For example, you could use approach on an element's opacity, increasing the opacity as you get closer. Where can I get it? If you are interested in learning more about Approach, it's recommended that you view the project on GitHub. Support Basic support is offered through Github's issues tracker. If you are in need of immediate support, or would like customizations to the script, Premium Support is available for $17. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. Intelligist Share and demo code in-page, using GitHub gists.