At the same time as ago, the popular tech blog TechCrunch started a new design for their website. Beside with design, they released logo and want make this logo in HTML using jQuery.
In this tutorial author is going to make an amazing gallery with scrollable thumbnails that slide out from a navigation. You can use jQuery and some CSS3 properties for the style.
The design we’ll be creating lists out the top albums from our Last.fm profile by displaying the cover art with a subtle shadow. When the link is hovered, a retro vinyl record will slide out from the cover, purely for visual interest and extra cool factor points.
Let’s start with the markup.
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
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.
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. They are a clever and engaging mechanism for packing a lot of information in a small space…
A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.
Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. 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 (random).
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 when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.
This tutorial will show you how to create a slick menu with a nice animation feature on hover. The idea is to create various elements slide out, change and animate the background color of the item and then slide the elements back in with a different color
jQuery slideshows are the best way to show lots of information on webpage its cover small space of the page with cool functionality. Let’s start build your own slideshow using this tutorial.
jQuery Thumbs dynamically enfold links and images within span tag. You can define default width and height in the css file.
Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an
e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.
With the help of some small HTML, nifty CSS and loads of jQuery, we’re able to create an animated fullscreen background image slideshow. Read the rest of this article to learn how it’s built.
In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.
Apple has long applied a winning strategy in marketing – create well designed products, have a dedicated fan base, and let the hype build up before every product release.
This is also the case with the latest version of their iPhone. But what I found interesting is the term they coined – “Retina display” and the promo image accompanying it.