Jquery Empire: Collapsing Site Navigation with jQuery: "View demo Download source Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. Wh....
Slide Out Boxes with jQuery and CSS3
The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff.
Jquery Empire: Custom Animation Banner with jQuery
Jquery Empire: Custom Animation Banner with jQuery: "View demo Download source In today’s tutorial we will be creating a custom animation banner with jQuery. The idea is to have different ....
Jquery Empire: Animated Portfolio Gallery with jQuery
Jquery Empire: Animated Portfolio Gallery with jQuery: "View demo Download source Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumb....
Jquery Empire: Full Page Image Gallery with jQuery
Jquery Empire: Full Page Image Gallery with jQuery: "View demo Download source In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrolla....
Jquery Empire: Slider Gallery with jQuery
Jquery Empire: Slider Gallery with jQuery: "View demo Download source This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an e....
Jquery Empire: Beautiful Photo Stack Gallery with jQuery and CSS3...
Jquery Empire: Beautiful Photo Stack Gallery with jQuery and CSS3...: "View demo Download source In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a s....
Jquery Empire: Slide Down Box Menu with jQuery and CSS3
Jquery Empire: Slide Down Box Menu with jQuery and CSS3: "View demo Download source In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item....
Jquery Empire: Related Posts Slide Out Boxes with jQuery and CSS3...
Jquery Empire: Related Posts Slide Out Boxes with jQuery and CSS3...: "View demo Download source The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog ol....
Related Posts Slide Out Boxes with jQuery and CSS3
View demo Download source
The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally,...
Slide Down Box Menu with jQuery and CSS3
View demo Download source
In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hoveri...
Image Highlighting and Preview with jQuery
View demo Download source
In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context. We will highlight images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the scre...
Interactive Photo Desk with jQuery and CSS3
View demo Download source
In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none...
Beautiful Photo Stack Gallery with jQuery and CSS3
View demo Download source
In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animati...
Slider Gallery with jQuery
View demo Download source
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 thumbnails will scroll to the end and move back to the first image. The user can scroll through the thumbnails by using the slider controls. When a thumbnail is clicked, it moves to the center and the full image preview opens. Navigating though the images will make them slide in and out from the sides, moving the underlying thumbnails container. When the preview is closed, the full image will fade back to the thumbna...
Full Page Image Gallery with jQuery
View demo Download source
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. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the ima...
Hover Slide Effect with jQuery
View demo Download source
Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images o...
Animated Portfolio Gallery with jQuery
View demo Download source
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. The image can be enlarged by clicking on it, making it appear as an overlay.
The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sid...
Custom Animation Banner with jQuery
View demo Download source
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.
We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.
The images used for the demo (mobile phones and tablet) are by talented Alex Gillis and you can find his amazing works on Deviantart. The Dell Vostro image is by Steven Housden and you can find his high quality works on his Deviantart page.
So, let’s get start...
Collapsing Site Navigation with jQuery
View demo Download source
Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. 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 like a card deck and the respective content area will slide out.
The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. The specific set can be found here.
So, let’s get start...
