jQuery is an application that can be developed for various purposes related to several other web applications. In addition, jQuery can also be used to make beautify a web page. Where with some of the features found in jQuery, a programmer and web designer can make modifications page web site with various forms of animation are gorgeous, and of course depending on the designer’s own creativity.
Before you continue reading this post, I would like to recommend some of our other articles about this topic, such as 25 Creative Solutions for Websites Using Hand-Drawn Elements, 22 Required Chrome Extensions for Web Developers or 40 Fresh Jquery Image Gallery Plugins.
If you want to try some of the functions contained in jQuery, you can get some references can be found on the internet about the techniques that you can develop on the jQuery application. Some simple examples that you can try a technique such as create slideshows, animations images, images gallery rotations, and a few other examples.
Knowing the importance of HTML standards, authors are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.
Jonathan Snook has an article up “Content Overlay with CSS” in which extra content is revealed in a certain area when it is moused over. This inspired author to try to do something similar with jQuery. His first thought was a thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
Scrollable is the most successful tool in jQuery library. Any size and shape. Infinite loops and more. You can scroll through these elements by clicking on the arrow buttons or using the left and right arrow keys from your keyboard.
Flip is a jQuery plugin that will flip easily your elements in four directions.
These tooltips will act a little bit smarter than our basic version. The script will skip links with empty or missing title tags, but more important: the tooltips will try to stay in the browser viewport.
There are so many kinds of tabbed menu nowadays. Still author really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust him it only takes a few minutes (He is not such a hard-working developer to write something longer then that).
Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It’s a good “space-saver” and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.
A couple of months ago author found hisself looking for a jQuery plugin to create a horizontal accordion. He needed a simple and clean solution for one of his projects and, at a first glance, Slidedeck seemed to be what he was looking for. Unfortunately, this turned out to be not that flexible as he wished it to be. Hence, he decided to create his own horizontal accordion plugin.
Be the end of this tutorial, we’ll have a slideshow that transitions by changing the visible window. You will need to download two plugins for this tutorial: one for easing animations and one for timing slide changes.
Today we are going to make a jQuery plugin which uses YouTube’s chromeless player, and creates our own set of minimalistic controls, which allows for perfect integration with your designs. The supported controls include a Play/Pause/Replay button, and a clickable progress bar.
In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time.
In 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.
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.
The app is divided in three steps – in step one you provide a list of the contestants’ name and email, divided by a comma (each contestant on a separate line). In the second step, you provide a prize name and a number, signifying the number of copies that have been offered. In the last step, you get a randomly selected list of contestants and their prizes.
Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.
In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).
In this tutorial we are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.
jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
Today we want to show you how to create a neat 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
The two key effects Tim is using are a simplified accordion and a hover effect. It’s worth noting that the hover effect only works in WebKit (Safari & Chrome), but he will show you how to create the effect using jQuery too.
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
The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning.
jQuery Image Slider with Unique Effects
In this tutorial, we are going to build a web page using HTML 5, CSS and jQuery techniques. The tutorial aims to demonstrate how to build a website when the specifications are finalized.
In this tutorial we are going to create a blogroll slider that shows the latest post of your favorite blogs. We will be using jQuery, PHP and XSL. The aim is to get a given RSS feed of a blog and parse the XML data with the help of PHP.
We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen.
the select elements are impossible to change beyond a certain extent. This is why, today authors are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.
Today we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output.
We are going to create an animated 404 page, which you can easily customize and improve.
In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page.
Today we are going to do the first tutorial on the site, which is both design and code oriented, to bring you the full web development experience.
In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse.
Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item.