If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you mouseover on it, the icon on the left “jumps” for a few times. The animation looks really attractive.
Janko is going to show you how to create the Skype-like Buttons using jQuery and some simple CSS. The code is tested in Firefox, Safari and IE7.
Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/skype_buttons/
License: License Free
Soh Tanaka has written a tutorial about making a Fancy Thumbnail Hover Effect with jQuery. Basically all they are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment with css), and padding when we hover over. During this animation, they also switch the value of the z-index, so that the selected image stays on top of the rest.
It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/image-zoom/
License: License Free
For freelancing designers, the online portfolio is one the best ways to get some work. Every prospect will check it before hiring you for the job, so it must be good. JQuery can be a great tool to improve your portfolio, whether it’s for eye candy, usability or functionalities. In the following collection you will find some great jQuery scripts and tutorials that’s help you to get a better portfolio
Tabs can be a great way to make informations about a project quickly available without leaving the page. For example you can insert project details in a secondary tab because you know that only a few visitors will have interest in it.
If you want to show a project’s evolution, jQuery cycle could be the way to go. It is basically a slideshow with cool transition effects, and the ability to use different actions to move from one slide to another.
If you are going to use a tooltip to display further technical informations, do it with style. This script and tutorial teaches you to create a bubble just as pretty as the ones on Coda’s website.
If you have designs where the details have a lot of importance, you should use this script to let your site’s visitors know that you don’t neglect details in your designs.
Nice flipping effect for your divs, images, or whatever you want to put in it.
A cool carousel jQuery that allows you to display different media types, perfect for multimedia designers.
If you read a lot of web design blogs, you’ve probably seen this one over and over. I still could not leave it out of this list as it’s a great way to display design work.
Nifty little effect for menus, can also be used for other things if you are creative (and I am sure you are).
If you have a lot of projects and designs to show, this could be the right navigation to use for your portfolio.
Excellent tutorial to create a filterable portfolio with jQuery.
Beautiful menu effect that captures your attention towards the menu element you are hovering.
Want to get rid of people with too low budgets? This could be the way to go. The jQuery Calculation plugin could allow you to give an estimate of what their request will cost.
Tired of receiving incomplete form submissions from your portfolio site? Try the jQuery form validation plugin and the people trying to contact you will not be able to send a message if they didn’t fill in the form properly.
In your portfolio you will probably want to emphasize on your content and images. Accordion menus can be a good way to declutter your sidebar and give more space to content.
It’s good to explain your workflow on your portfolio website, it gives your potential clients a good indication of what they can expect when working with you. Using a sequential list is a good way to do this, learn how in Web Designer Wall’s tutorial.
Good form styling does not only look nicer, it’s also often more usable.
If you are really proud of your studio, you can give a good feel of what it looks like with this virtual tour jQuery plugin.
To give informations about an image or project, image notes are the perfect solution. You can easily point out details and give in-context explanations.
Supersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow. There is no extra whitespace, no scrollbars - the entire browser window is always filled. It is lightweight and plays nice with Firefox, Safari, Opera, IE7, and IE6. Requirements: jQuery Framework Accessible News Slider is a JavaScript plugin built for the jQuery library. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items. If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism. Hitting the “Enter” key while focused on the hidden “Skip to News” anchor will mimic the same behavior, since it is assumed the user is tabbing through content. The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. The ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6. Requirements: jQuery Framework Agile Carousel is a jQuery plugin that allows you to easily create a custom carousel. Call jQuery UI to enable many different additional transition types and easing methods. It uses PHP to draw images from the folder you specify. You can also configure Agile Carousel with many different options including controls, slide timer length, easing type, transition type (e.g. blind, drop, pulsate, shake, slide and etc…) and more. The script is currently in beta version, security & feature enhancements are on the way. Requirements: jQuery Framework This dynamic JavaScript slideshow is feature packed and under 5KB. You can find the new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder). This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. This script is available for any personal or commercial projects under the creative commons license and is offered as-is, no free support provided. Requirements: Javascript Enabled The s3Slider jQuery plugin is made by example of JonDesign’s smooth slideshow script. The author needed something like that for jQuery. Since he didnt find it after a small research, he decided to build it by himself. This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. This plugin has been tested and is known to work in Firefox, Opera, Safari, Internet Explorer and Google Chrome. Requirements: jQuery Framework Devthought has created an elegant, lightweight slideshow script called BarackSlideshow. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. Devthought came up with a new class that receives the images and loading spinner as parameters as well. The CSS plays a major role. You should analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean. Requirements: Mootools Framework This is an automated news slider using the new AS3 XML features. The main propose of this news slider is show news on the front page, with a title, an image, some descriptive text, and a link to the full article. It loads 4 articles and changes from one article to another automatically in a lapsus of time, and the user could stop, rewind or forward whenever he wants. The data source uses XML, so it could be adapted to any programming language that could generate XML data. Requirements: - noobSlide is a mootools based slide show gallery. You can see 7 different styles of images galleries / slide shows. I think they are working smoothly and looking nice. However, I particular like example 6 and 7. If your web application / website is already using mootools, noobSlide is definitely a good choice to power your image gallery. noobSlide is licensed under MIT License. Requirements: Mootools Framework Couloir Slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. It is a very good resources for creating a gallery with resizing and fading effects. You are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs. Requirements: Any Modern Browsers with Javascript Enabled SmoothGallery is a javascript gallery and slideshow system using MooTools. It allows you to have simple and cross-fading image galleries, timed slideshows and showcases.Unlike Lightbox 2, you can define the time of switching pictures automatically.And also, you can jump to a specific picture from the pictures menu and do not need to flick through all pictures in between. Requirements: Firefox, Opera, Safari, Internet Explorer 6.0+
Supersized - Full Screen Slideshow jQuery Plugin
Demo: http://buildinternet.com/live/supersized/
License: License Free
Accessible News Slider Plugin Built for jQuery
Demo: http://www.reindel.com/accessible_news_slider/
License: License Free
Create Custom Carousel with Agile Carousel jQuery Plugin
Demo: http://code.google.com/p/agile-carousel/
License: New BSD License
Free Dynamic Javascript Slideshow Under 5KB
Demo: http://sandbox.leigeber.com/javascript-slideshow/
License: Creative Commons License
Build Your Own Slideshow with s3Slider jQuery Plugin
Demo: http://www.serie3.info/s3slider/demonstration.html
License: Creative Commons 2.5 License
Elegant and Lightweight Slideshow Script
Demo: http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html
License: MIT License
Automated News Slider using AS3 XML Feature
Demo: http://works.faustocarrera.com.ar/news_slider/
License: License Free
noobSlide - Mootools Slide Show Image Galleries
Demo: http://efectorelativo.net/laboratory/noobSlide/sample.html
License: MIT License
Couloir.org Resizing and Fading Slideshow Gallery
Demo: http://www.couloir.org/js_slideshow
License: Creative Commons License
JonDesign’s SmoothGallery for Slideshows
Demo: http://smoothgallery.jondesign.net/showcase/gallery
License: GPL License
Read more...
Drop Shadow jQuery plugin - a great jQuery plugin to add soft drop shadows. Check out all the options you have like: distance and direction to offset the shadow, the shadow spread or dispersion, opacity, shadow color, and more.
The shadows it creates are not bound to the original elements, so they won’t move or change size automatically if the original elements change.
It is only intended for adding a few drop shadows to mostly stationary objects, like a page heading, a photo, or content containers. Complete instructions for use are provided inside the script.
iPhone Slide to Unlock Effect - a great tutorial, with all the source files, on how to create the iPhone unlock screen with XHTML, CSS and jQuery.
View iPhone Slide Effect Demo.
Tested in Firefox 3, Internet Explorer 7, Safari 3 and Opera 9.63.
Jquery Fade In.Fade Out - the effect can be assigned to basically anything in a website, an image, text, a link or even a div.
The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. A simple effect you can use to spice up your websites using jQuery.
View Fade in.Fade Out demo.
MooTools Slider - a simple step-by-step tutorial, with source files, on how to implement slider with horizontal scrolling and animated effects using MooTools. This is just a basic proposal you can customize and reuse quickly.
Take a look at the live preview and download the source code ready to use in your web projects.
imgPreview - jQuery plugin that allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time!
The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive, it does not require any hooks to target specific links - no non-semantic classes.
View imgPreview Demos.
ListNav jQuery plugin - an easy way to unobtrusively add a letter based alphabetical navigations widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Tested on IE6, IE7, Firefox 2 and 3 (Windows and Mac), Safari (Windows and Mac).
If You Like My Post Comment Me,Thanks You And Visit Again
Read more...
JS Charts - a Free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting. No additional plugins or server modules are required. Just include js charts scripts, prepare your chart data in XML or JavaScript Array and your chart is ready! Tested in (Windows) Firefox 1.5+, Internet Explorer 6 and 7, Safari 3.1+, Opera 9 + and (Mac) Firefox 1.5+, iPhone 1+ and Safari 2+
If You Like My Post Comment Me,Thanks You And Visit Again
Read more...
Supersized - a jQuery plugin that automatically resize background images to the size of the browser window and runs them as a slideshow with no extra whitespace, no scrollbars - the entire browser window is always filled.
It is lightweight and plays nice with all major browsers, tested in Firefox, Safari, Opera, IE7, and IE6.
See it in action - Live Demo
ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol
