Sunday, February 5, 2023
HomeTutorials30 jQuery Tutorials and Plugins from 2011

30 jQuery Tutorials and Plugins from 2011

jQuery is the premier library for coding JavaScript page effects. All you need is a good step by step tutorials that can make you feel like a professional Web Desinger. and today we just want list some of the 2011 tutorials which really stand out from the tradition javascript effect tutorials. Some of these you may have already seen, others might be new to you. Hope you will like the post.

1. Fullscreen Image 3D Effect with CSS3 and jQuery

The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.

 2. Create a Slick and Accessible Slideshow Using jQuery

In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

 3. jQuery Parallax Tutorial–Animated Header Background

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.

 4. Shuffle Between Images Using JQuery

Learn about creating collage image gallery using jquery, and better can be added with rotating feature too.

 5.  Bubble Slideshow Effect with jQuery

Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.

 6. How to Make a Slick Ajax Contact Form with jQuery and PHP

This tutorial shows you how to build a nice-looking, smooth contact form that visitors can use without having to leave the page they’re reading.

 7. Animated Content Menu with jQuery

This tutorial will tell you how to creates a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, the background image is going to change according to which menu item was clicked.

 8. How To Create a Cool Animated Menu with jQuery

In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

 9. Create a jQuery Image Cropping Plugin from Scratch

 10. jQuery Widths and Heights Tutorial

jQuery Tutorial makes it easy for you to use the dimensions of your factors as well as the particular internet browser eye-port. You can use the particular thickness() and height() means of finding the dimensions, or perhaps alternatively the innerWidth()/innerHeight()/outerWidth()/outerHeight() strategies, with respect to the proportions you need. Initial slightly example showing the actual differences and the some explanation:

 11. Making a Custom Facebook Wall with jQuery Templates

In this tutorial, we are going to create our own version of Facebook’s wall. We will be using Facebook’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.

 12. FitText – A jQuery plugin for inflating web type

 13. jQuery Tutorial – Create a Flexible Data Heat Map

Long tables of numbers are never fun to look at and when presenting this kind of data on the web, where attention spans are already at their limits, you need to be able to present the highlights as quickly as possible.

 14. Animated Form Switching with jQuery

In this tutorial they create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

 15. jQuery Image Gallery

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI

 16. Essential jQuery Plugin Patterns

They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide offers a great starting point for getting into writing plugins and widgets, but let’s take it further.

 17. jQuery’s Data Method – How and Why to Use It

jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean. As of jQuery 1.4.3 we also have the ability to use the method on regular JavaScript objects and listen for changes, which opens the doors to some quite interesting applications. | View Live Demo

 18. leanModal-A super simple plugin that works with your CSS.

 19. Image map with CSS3 & jQuery tooltips

Tooltips can play a big role in your web designs and that isn’t new anymore. Just use them correctly and they will help you improve user experience.

 20. MobilyMap

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

 21. Moving Boxes Content with jQuery

Learn to create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.

 22. Thumbnails Navigation Gallery with jQuery

 23. Create Simple One Page Profile With JQuery

 24. Overlay-like Effect with jQuery

This tutorial will tell you how to create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.

 25. Parallax Slider with jQuery

Learn to make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

 26. How to Scrape Web Pages with Node.js and jQuery

Node.js is growing rapidly; one of the biggest reasons for this is thanks to the developers who create amazing tools that significantly improve productivity with Node. In this article, we will go through the basic installation of Express, a development framework, and creating a basic project with it.

 27. Flexible Slide-to-top Accordion

In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

 28. Simple Tooltip w/ jQuery & CSS

 29. Simple Vote Using JQuery Animate

This is a very short post and simple idea to use JQuery animate function in voting system. It can be useful for replacing voting system that using many images. The idea is just expanding the div element (css width property) using animate function, where we just need to add the same value on the width element.

 30. Wave Display Effect with jQuery

How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content.

jQuery is designed to change the way that you write JavaScript. If you are new to jQuery or you want to improve your skills, here you can see 30 interesting tutorials.

RELATED ARTICLES
- Advertisment -
- Advertisment -

Most Popular