Text 21 Feb 1 note 50 JQuery Tutorials to help you design

1. Circular Image Gallery by JQuery

This is great for providing an experience users are used to, but there are a few interesting alternatives that you may like to hear about – how about displaying your images or items around a shape like a circle or an ellipse instead?.

jquery-slideshow-tutorials-

2. Building the animated cartoon robot with Jquery

This project was created by layering several empty discover each other with transparent PNGs as background images.

image-architecture

3. Elegant Accordion with Jquery and CSS3

The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks. Ok, let’s start with the markup. The Markup the HTML will consist of a list where each accordion tab..

elegantacc

4. Animated Form switching With Jquery

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. …

AnimatedFormSwitching

5. Image wall with Jquery

The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and…

imagewall1

6. Grid Accordion with Jquery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens.

infogridexample

7. Coding a rotating Slide Show

We are going to use Jquery and CSS3 rotations, along with the Jquery rotate plug-in, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

the_slideshow

8. Bubbleriffic Effect with Jquery

The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. Clicking on a thumbnail will zoom in a big circle…

bubbleriffic

9. Custom Even Binding

Essentially, this is a horizontal accordion that also changes the text below it on each transition. The one difference between this and a traditional accordion is that when a slide becomes active or inactive, it doesn’t just shrink. Instead it slides behind the other slides.

mother-and-child

10. How to Use the Jquery UI Auto complete Widget

Auto-completing text fields can be a popular choice with visitors to your site because they make entering information much easier. They can be used on product search fields for example, or when a visitor must enter a country, or a city, or anything else that may be a choice from a common dataset.

message-palleete

11. Drag gable image boxes Grid

The idea is to have a drag gable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a full screen content area.

DraggableImageBoxesGrid

12. A Fresh Bottom Slide Out menu with Jquery

This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and…

bottomSlideOut

13. Create Image Slider for your Website

Jquery Accordion Image Slider using the Kqicks plug-in for Jquery. And while the instructions over at the plug-in site are fairly easy to follow, I figured I would write out my own little tutorial on how to create the accordion slider and provide you with an example in a zip folder that you can use for your website or your client’s websites.

accordion-slider-demo

14. Jquery Menu drop down tutorial

Before 2006, it was not possible to make transitions, animations and other decent web stuff quickly within seconds. You will find a lot of plug-in for menus, banners, etc. for the Jquery.

css-xhtml-view

15. Fancy Apple-Style Icon Slide out navigation

Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-style” don’t really go together, I thought that it’s time for something different.

applelikenav

16. Animate Panning Slide Show with Jquery

If there’s one thing that never seems to go out of style, it’s a good Jquery slideshow.

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.

panning-slideshow-screen

17. Rotate Image Slider with Jquery

n the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will.

RotatingImageSlider

18. Mosaic Slide Show

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow.

i1

19. Making Fresh Content accordion

When developing a website, it is a great challenge to be able to organize the content in such a way, that it is both intriguing and eye-catching.

541

20. Creating a sliding Image Plugin

I have created this Jquery demo plug-in which creates sliding-image puzzles based on containers that have images. Running the demo page we get this output.

jquery_sliding_puzzle_scree

21. Collapsing Site Navigation with Jquery

When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse…

collapsingsitenavigation

22. Create a slick tabbed content area using CSS and Jquery

Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple JavaScript, and then finally we’ll achieve the same thing using the Jquery library.

slik-tabbed

23. Sexy Drop down of Menu

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential.

sexy-drop-down

24. Create a fading Header

I’ve chosen Jquery because I like the way it’s built, find the elements you wish and do something with them. If you prefer another library, or just don’t want to use any library at all, that’s fine too

header1

25. Slider Viewer

Slide Viewer is a lightweight (3.5Kb) Jquery plug-in which allows to instantly creating an image gallery by writing just few lines of HTML such as an unordered list of images:

slide-bar

26. Thumbnails preview slider with Jquery

In this tutorial we will show you how to create and use a thumbnails preview slider with Jquery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little…

thumbnailsPreviewSlider2

27. Moving Boxes Content with Jquery

Today we will 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…

movingboxes

28. Full screen Slide Show

In today’s tutorial we’ll create a full screen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

fullscreenSlideshowHtml5

29. Vertical Sliding With Jquery

Today we want to share a slick and flexible vertical Jquery accordion with you. The main idea is to expand the accordion slices on click and show some more information.

verticalSlidingAccordion

30. Custom Animation Banner with Jquery

n today’s tutorial we will be creating a custom animation banner with Jquery. The idea is to have different elements in a banner that will animate step-wise in a custom way.

customAnimationBanner

31. Moleskin Note book With Jquery

Today we will show you how to use and customize the brilliant Jquery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskin notebook with latest posts from the blog.

Moleskine

32. Sliding Panel

One struggle that still remains today in web design are displaying all of the redundant information on every page. For example, a login forms. What if there was a way to easily make the content accessible on every page.

login-form

33. Creating a Keyboard

Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with Jquery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically change the keyboard when clicked.

create-key-board

34. Animate Curtain Openings with Jquery

This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.

curtain

35. 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 lets you show images and content in a unique form – a wave.

WaveDisplayEffect

36. Photo Slider Tutorial

It’s worth noting that you can easily use the photo slider to query a server script to load the images.

Photo-slider

37. Full screen Gallery with Thumbnail Flip

In this tutorial we will create a full screen gallery with Jquery. The idea is to have a thumbnail of the currently shown full screen image on the side that flips when navigating through the images.

fullscreenThumbnailFlip

38. Overlay like Effect with Jquery

Today we will 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…

overlayLikeEffect

39. How to Create Amazing Jquery Style Switcher

n this tutorial I will be showing you how to create a style switcher using Jquery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

day-and-night

40. Adding To our Leopard Desktop with Jquery

You guys are gonna totally FLIP when you hear what’s in this jam packed tutorial! More focus on the Dashboard and I’ll even go into how to create a stack, and some extra little bits to make it all click.

stacks_preview

41. A Fancy Apple.com

The website from Apple isn’t less: The layout is simple yet beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions about the several products they offer, making it really user-friendly.

search_suggestion

42. Create an amazing Music player

Create an amazing music player coded in xHTML & Jquery that made use of mouse gestures and hotkeys. You canClick & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

music-player

43. 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.

how-to-animate-in-jquare

44. Scrollable

We can only scroll by clicking on the arrow buttons or using the left and right arrow keys from your keyboard because we are aiming for a minimal setup. It’s important to understand how this example works because it teaches you the theory behind HTML scrolling.

scrobale-bars

45. Create a cool animated navigation

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the got for anything animated, these days with the magic of JavaScript we can avoid Flash altogether. Today we’re going to build a really cool animated navigation menu using just CSS and Jquery.

create-a-cool-animated-web-

46. Fading Menu and Replacing content

This example page has three menu items and three content areas: home, about, and contact. By default, the home button is selected, meaning that it’s menu graphic is at full opacity and it’s content area is shown:

fadingmenu

47. Polaroid Photo Viewer

By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a Polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right.

polaroid_css3_jquery

48. Awesome Bubble Navigation

The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the Jquery Easing Plugin for a even nicer effect. Ok, so let’s get started. The Markup the HTML will…

bubblenav

49. Beautiful Background Image Navigation

The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in…

backgroundImageNavigation

50. Word press Accordion banner rotator / slideshow

Welcome to our brand new Word Press banner plug-in. Beautiful Word press Accordion Slideshow will showcase your products or services in an impressive manner.

accordion-rotator-thumb-big

Source - 2expertsdesign

  1. sebastientarnowski posted this

Design crafted by Sébastien Tarnowski : Back-End Developer - Front-End Developer. Powered by Tumblr.