20 Fresh jQuery Tutorials You Probably Haven’t Read Before

Article written by:
  • Website Design
  • Updated: Jun 27, 2017

There are few things that are more exciting than tutorials and tricks for web development! The new technology and techniques enhance Internet capabilities and the overall experience for website visitors. In my work with various businesses and the development of their websites, jQuery is being used more than ever to add a dynamic flare to websites.

If you are looking to spice up your jQuery technique portfolio, check out these tutorials:


Slideshow Screenshot

Slideshows are a quick and easy way to demand attention on website home pages. Having an arsenal of different techniques will help you create unique, stand-out websites.

Horizontal Layout

Horizontal Layout Screenshot

I”m not sure what the appeal is, but I”ve always been a fan of horizontal layouts – and this one is great. This probably won”t be the top used technique, but it is a great tutorial to have for when you need an out of the ordinary website layout.

Audio Slideshow with jPlayer

Audio Slideshow Screenshot

This tutorial adds an extra kick to the average slideshow by adding audio.

Countdown Timer

Countdown Timer Screenshot

Countdowns can build anticipation and serve as a placeholder for future projects. This is a simple, clean timer, but it does the job nicely.

Direction Aware Hover Effect

Direction Aware Hover Effect Screenshot

So this isn”t solely a jQuery tutorial, but adding a little CSS3 really sets this hover effect apart.

Timeline Portfolio

Timeline Portfolio Screenshot

This tutorial puts a unique spin on the horizontal layout and will provide you with a unique way to visually depict company history, portfolio, life events, and so many other possibilities!

Parallax Content Slider

Parallax Content Slider Screenshot

So I cheated again by adding CSS3 to the mix, but this tutorial is too good not to include. This isn”t your average homepage content slider. They dynamic movement of all the various parts of the content will immediately capture the attention of website visitors.

404 Error Page

404 Page

Web design/development teams are utilizing 404 error pages as a new creative outlet. Here is a tutorial for an animated take on the trend.

Panning Slideshow

Panning Slideshow Screenshot

This tutorial will help you create a simple, but unique way to display images through a slideshow.

Cycle Images

Cycle Images Screenshot

This tutorial breaks down how to create a unique element. Check out thedemo to get the full effect!


Mosaic Screenshot

This tutorial is really several all in one. The huge number of available options make this tutorial a must read.

Simple Slideshow

Slideshow Screenshot

This is a very simple, straight forward image slider. A basic element that should be in every designers portfolio.

Shutter Folio

Shutter Folio Screenshot

This tutorial will help you add a creative twist to a photography portfolio.

Rotating Image Slider

Rotating Image Slider Screenshot

If you”re looking for creative inspiration, you”ll find it in this tutorial. Be warned though, your expectations for image slideshows will forever be heightened.

Expanding Image Menu

Expanding Image Menu Screenshot

Include all the information you want to without using up all of your space. This accordion style menu will prove useful in more than one situation.

Before and After

Before and After Screenshot

This is a fun effect to add a before and after look into your photography portfolio.

Background Image Slideshow

Slideshow Screenshot

A rotating background can help keep your homepage fresh and captivating.


Polaroid Screenshot

One of the biggest trends today is vintage. Anything (or idea) that was from before the turn of the millennium is coveted. Polaroid pictures happen to be a loved vintage concept. This tutorial will help you keep the idea, but bring it up to speed with today”s technology.

Mobile Navigation

Mobile Navigation Screenshot

If you have begun adding mobile websites into your portfolio, this tutorial is a must! Easily (and effectively) create a menu that displays well on mobile phones. This tutorial not only solves the issue of bad navigation, but it gives several solutions.

Fullscreen Slideshow

Fullscreen Slideshow Screenshot

Sometimes images are all you need to communicate. If you are looking to captivate visitors with stunning photographs or illustrations, this is the tutorial for you.

Article by Danielle Towner

Danielle Towner is a simple, small town girl that has discovered a passion for all things digital. With a degree in marketing and several years of agency experience under her belt she has played a significant role in nearly every type of marketing for clients of all shapes and sizes. She has conducted extensive market research studies, developed marketing plans, implemented advertising campaigns, managed email marketing efforts, designed marketing collateral, composed press release and sales copy, as well as developed and implemented social media strategies. With her eagerness to learn, she strives to always be on the cusp of the next big thing.

Get connected: