jquery latest Tooltip Styles

Today we’d like to share some tooltip styles and effects with you. Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity to add some subtle and unique effects to any design. So today we want to show you some possibilities of showing those elements in style.

We only use CSS transitions via hover and also some SVGs to create unique shapes. Icons are from Font Awesome and the profile pictures are from the Random User Generator.

Please note that we use some modern CSS properties, like 3D transforms, which only work in modern browsers.

There seems to be an issue with using a percentage-based transform-origin value for SVG paths in Firefox. You might not be able to see the correct transform effect, so we recommend using Google Chrome to see all the examples working correctly.

View demo    Download source

Read More

jQuery Latest dialog box (POPUP)

Last year we posted some inspiration for modal window effects and today we’d like to share some fresh ideas with you. Styles and trends change and this calls for different effects that fit to a modern UI. This new set contains some subtle animations and also some more fancy SVG morphing techniques for dialogs.

Please note that this was tested in latest browser versions only.

Please also note that IE11 does not seem to support vieport units in calc() which we use in some of the animation transforms.

View demo    Download source

Read More

jQuery latest Sliding Header Layout

Today we’d like to show you how to create a simple grid layout with a special header effect. The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. We’ll be using some techniques like Flexbox and CSS Transitions for modern browsers. For the trigger button that toggles the views, we’ll create a vector graphic with two groups, one containing a little grid and the other one containing a cross. These two groups will have their visibility toggled according to the current view (fullsreen header or grid).

View demo    Download source

Read More

Latest jQuery Image hover effects

We’ve updated and added some more effects to the Hover Effect Ideas. The second set contains some fresh styles that include the Font Awesome icon font and SVG backgrounds for some effects. The structure of the demos was a fullscreen grid before, but now we’ve adjusted it to contain single rows of figures where it’s easier to see how an effect looks in its normal state and when hovering.
As in the previous set, we try to make the effects as smooth as possible, not using any transition on properties that affect layout or painting. But trying out new things (like we do with SVG in the second set), there could be some glitches in Firefox on Windows (tiny border of SVG shown).
Please note that the effects have been tested in the latest versions of modern browsers. They might not work as expected in older browsers; you’ll have to provide a suitable fallback if you’d like to support those. 


View demo     Download source

Read More

Expanding Image Menu with jQuery

View demo     Download source

In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.
The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream.

Read More

Animated Content Menu with jQuery

View demo  Download source

Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.
The main idea is to have a restaurant menu with the different menu categories displayed. Each content are will have some foods/drinks listed. Once a content box is shown, the menu items are going to disappear. If we click on the close button to close the box, the menu items will be shown again.

Read More

Parallax Slider with jQuery

View demo    Download source

Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
The wonderful images are taken from Tetsumo’s Flickr Photo Stream: http://www.flickr.com/photos/tetsumo/
So, let’s start!

Read More

3D Wall Gallery

View demoDownload source
Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.
For seeing the 3D effect, please try the demo in Safari.
Summarized, you can do the following things in this gallery:

• Hover an image to see a description
• Slide through the images using the jQuery UI Slider at the top
• Use the mouse wheel to scroll through the images
• Use the thumbnail previewer at the bottom to choose an image
• Use the hash anchor for the image in the URL to get to it directly
• Click on an image to slide it to the left (notice the hash anchor in the URL)
• Turn it into a 3D wall when scrolling/sliding (Safari users)
• Flipping the perspective when changing the slide/scroll direction (Safari users)

We are using the jQuery hash change plugin by Ben Alman:
jQuery Hashchange Plugin
And we are also using the jQuery Mousewheel Plugin by Brandon Aaron:
jQuery Mousewheel Plugin
The beautiful photography is by Alan Antiporda from Illusive Photography and you can find his Flickr Photostream here: Illusive Photography Photostream

When viewed in the Safari browser, you will see the perspective happening while scrolling or sliding. When changing the direction of scrolling, you will notice that the perspective will tilt to the other side.

You can navigate through the images by either using the jQuery UI slider at the top or your mousewheel.

You can also use the thumbnails previewer to click on an image and get to it directly.

When hovering over an image you can see a little description at the top.
We hope that you enjoy our little experiment and find it useful!
View demo   Download source

Read More

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 screen.

Read More

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 thumbnail.

Read More

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 image.

Read More

jQuery Simple Modal form popup Demos

SimpleModal Demos – its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.
Demo :

Read More