Create a Stunning Sliding Door Effect with jQuery Introduction Continue from our previous thumbnail effect series. This is the third one. If you missed the previous two, you can visit the following links: Advertisement This tutorial is going to be awesome! Basically, this is what it does: Grab all the div with qitem class, find the image and replace it with four DIVs (four corners)Each of the corner will have the same background image (grabbed from qitem class's child image element) but with different background position: top left, top right, bottom left and bottom right. The following image illustrate how it works: It's a good practise to keep HTML as simple as possible. In the demo, we can see there are total of 9 items. <div class="qitem"><a href=" src="1.gif" alt="Test 1" title="" width="126" height="126"/></a><span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In CSS section, it's quite simple. For caption, position:absolute is a must to se the z-index. 3.
jQuery plugin: Tablesorter 2.0 Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!)under MIT or GPL licenses. Please with sugar on top! Don't hotlink the tablesorter.js files. Download it and host it on your servers. Update! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: NOTE! jQuery Browser Compatibility
13 Excellent jQuery Animation Techniques | Tutorials Only a few years ago, if something was animated on a website it was automatically assumed to be Flash. However, this is not the case today. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations. With several JavaScript frameworks available, jQuery is quickly becoming a favorite. Building an Animated Cartoon Robot with jQuery Animate a hover with jQuery How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery CSS Sprites2 – It’s JavaScript Time Build An Incredible Login Form With jQuery Learning jQuery: Revealing Photo Slider Learning jQuery: Fading Menu – Replacing Content Using jQuery for Background Image Animations Animated Menus Using jQuery Create a Cool Animated Navigation with CSS and jQuery Animated Drop Down Menu with jQuery jQuery Tutorials for Designers How to Load In and Animate Content with jQuery About the Author Related Posts
How to Load In and Animate Content with jQuery In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects. So first of all, I have put together a very simple layout for this example. Step 1 First thing's first, go and download the latest stable release of jQuery and link to it in your document: One of the best things, in my opinion, about jQuery is it’s simplicity. First let’s load the jQuery library and initiate a function when the document is ready (when the DOM is loaded). Step 2 So what we want to do is make it so that when a user clicks on a link within the navigation menu on our page the browser does not navigate to the corresponding page, but instead loads the content of that page within the current page. Let's summarize what we want this function to do in event order: Step 3 Step 4 Step 5
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery! Demo and Source Code Step 1 Let's begin by writing the necessary HTML to create a simple vertical navigation. I'm also going to add in a title element. Step 2 Now, let's create a HTML document where we can put the work we just did. There are a few things to note here: The ! Step 3 Now that we have our HTML file labelled and working, let's add some styles. Step 4 At this point your demo.html page should be looking something like this: So, it is finally time to begin using jQuery. Download the latest version of jQuery.Create a new file called sliding_effect.js and save it in the same directory as that of your HTML and CSS file.Lastly, insert the two previous files to your HTML document's <head>. This is what your HTML file's <head> should look like now:
10 Cool jQuery Animation Tutorials Here’s our collection of what we think are the 10 best jQuery Animation Tutorials you may have NOT seen before. Some of these tutorials may seem very simple but the results are fantastic and can form the base for something truly awesome. Enjoy. Related Posts: 1. Impressive Animated Landscape Header with jQuery It’s a cartoon themed landscape with elements which slide out to reveal additional content. SourceDemo 2. Gaya Kessler features a beautiful animation effect of puffing smoke in this tutorial. SourceDemo 3. After learning this tutorial you can understand how you can make BBC Radio 1 Zoom Tabs like effect where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture. SourceDemo 4. This project was created by layering several empty divs over each other with transparent PNGs as background images. SourceDemo 5. On many websites you should see the images moving continuously and automatically. SourceDemo 6. SourceDemo 7. SourceDemo 8. SourceDemo
How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Center the website Give the header a height and a background image Style and position the text within the header Create a shadow overlay Give basic style to the header and navigation bar. Here is the CSS: The jQuery Here is the jQuery:
Jcrop - Deep Liquid Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or block objects Supports aspect ratio locking Supports minSize/maxSize setting Callbacks for selection done, or while moving Keyboard support for nudging selection API features to create interactivity, including animation Support for CSS styling, now uses LESS Touch support for iOS, Android, etc Cross-platform Compatibility Firefox 2+ Safari 3+ Opera 9.5+ Google Chrome 0.2+ Internet Explorer 6+ May work in older versions or other modern browsers, these were tested. Documentation Archive Jcrop is free software released under MIT License.
Top & Free jQuery Animation Plugins jQuery Animation Plugins allows you to perform custom animations of a set of CSS properties. Here in this post, We’re going to share some best and free jQuery animation plugins. These plugins will surely help you attach stunning animations on your website. Check these out jQuery animation plugins. You might find these useful Transit Transit animation applies super smooth CSS transitions and transformations for jQuery. Spritely.net Spritely is a very beautiful jQuery animation plugin to create background animation and dynamic characters in pure JavaScript and HTML. Shadow animation jQuery plugin Shadow animation jQuery plugin allows you to enhance the functionality of animate function to support the CSS box shadow property. Motio Motio is a small JavaScript library for sprite based animations and panning. jQuery.animate() with GSAP GSAP plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. jQuery.pulse.js
Sexy Opacity Animation with MooTools or jQuery A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools. The XHTML <div id="forest-slot-1" class="opacity"><h2>The Forest</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. There's nothing too special about the HTML above; the awesomeness comes with CSS. The CSS To enhance the design of my content block, I'm adding a colorful background image behind where the content blocks will display. The MooTools JavaScript The structure for both the jQuery version and MooTools version is the same. The jQuery JavaScript $(document).ready(function() { var opacity = 0.7, toOpacity = 0.9, duration = 250; $('.opacity').css('opacity',opacity).hover(function() { $(this).fadeTo(duration,toOpacity); }, function() { $(this).fadeTo(duration,opacity); } );}); Be Heard
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready Posted by Maggie on 04/02/2009 Topics: css jQuery jQuery UI ThemeRoller ui design Update: We contributed this menu plugin to the jQuery UI library. We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. As noted in our original post, the iPod-style menu provides easy navigation of complex nested structures with any number of levels. Much of the functionality that controls the iPod style menu, like positioning and option selection, is shared by dropdown and flyout menus which are better suited for smaller data sets, so we extended the script to include support for these additional menu types. We also built in the ability to customize a menu's appearance, including active and hover states, by passing in classes as options. By default, the menu script will transform an unordered list of links into a simple dropdown menu: Demo Page When the menu content contains nested lists, by default it creates an iPod-style menu: Demo Page Demo Page How it works
jQuery Parallax Tutorial - Animated Header Background I think we all agree that the parallax effect can get you that WOW factor when someone visits your website. So, I thought i would show you a live jQuery parallax example. In this tutorial i will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.Update: The Parallax Plugin demo now works on jQuery 1.6.4+. I have updated this post, the demo and new download package to include working functionality with the new version of jQuery. Happy parallaxing! DemoDownload The Images You will need the background images for the parallax banner. Image layer1: The main background – green vector backgroundImage layer2: Overlay image – the frogImage layer3: Overlay image – the grassImage layer4: Overlay image – the butterflies Note: To edit vector files you will need an editor such as Adobe Illustrator/Photoshop. The Code Also add the css style required for the parallax: Finishing up