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).
The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.
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.
When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you very quickly moused back and forth over the menu items some of the transitional color would “stick”. Liam generously rewrote the code to be a bit smarter for me, and I asked him to write this tutorial.
Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.
Developers often seek the functionality provided by sliders in order to fit lots of information in the space provided. But creating such a slider is not as difficult as you might think. With a little planning and some experimenting, you can create one rather quickly.
When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Let’s get started!
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation,
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.
This tutorial is a complete source for JQuery For Absolute Beginners.
A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are. Another great thing about tag-clouds is that they can be used to describe the frequency of anything; you can link to articles, blog posts, images, video, or anything else that you have in abundance on your site.
Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I’ll show you how to build a custom accordion that is more “bandwidth efficient”.
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
You might think to yourself, “What is all the fuss with jQuery? You have to download a bunch of plugins to even make the library worth while.”. First, that isn’t true. Second, the jQuery library was specifically designed for that very purpose. By keeping the core library as small as possible – about 16 kb – users can then apply additional plugins at their own discretion. Today, I’ll teach you how to build your first “Center” plugin from scratch. Let’s get started!
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.
jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. It’s usually frowned upon to rely heavily on jQuery to design your sites, but it’s fun to go wild every now and then. In this tutorial I’ll teach you how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don’t have space for!
In 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.
View TutorialSliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
CSS sprites can dramatically increase a website’s performance, and with jQuery, we can implement awesome transition effects easily. Let’s get started.
Since last some weeks i have started learning jQuery, and today i thought why not give a tutorial on jquery and css. So i come up with this amazing tutorial (amazing for me atleast), which uses only pure CSS and jQuery to design a whole portfolio website suited for any shared hosting, no photoshop or any other design software required. Here we go…
This tutorial il show you some simple effects you can use to spice up your websites using jquery. Your probably thinking oh no not another coding language ive got to learn.
Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.
With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it.
Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.
In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks.
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
In this tutorial we want to create a unique picture gallery utilizing the CSS. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures.
Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it’s hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin.
Makara is web designer and he writing about graphic and web design, social media, blogging and freelancing and features articles on 1stepwebdesign.com