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 Drag and Drop

Sometimes we wonder how to pack all those possible actions into a UI. From buttons to drop-downs to menus—there are certainly many possibilities. Another idea is to employ some kind of drag and drop interaction. Today we want to share some explorations in these kind of interactions with you. The idea is to allow to drag an item and then show some droppable area that stands for certain actions. This saves a lot of UI space and gives an interesting dynamic to interactions. There are many applicable scenarios; think of categorizing and organizing content (i.e. like the Pinterest boards) or performing any type of actions (like in mail apps or in content management systems).
The demos are just some experimental ideas of how these kind of interactions can be imagined. We’ve based our demo script on Draggabilly by David DeSandro, and extended some of the behavior, i.e. allowing to scroll and treating drop actions. There are also other libraries out there, like for example jQuery UI but Draggabilly is very solid and it supports touch and multi-touch, which is really great. We’re also using Font Awesome for the icons and based the box-shadow expansion effect in the icon demo on the one seen in Palettab, an awesome Chrome extension that will give you color inspiration with every fresh tab.


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

Latest jQuery Resizing and Cropping Images with Canvas

In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications.
In a real world example a website or app might use a technique like this to resize and frame a profile picture before uploading. Whilst we could do this on the server, it would require the transfer of a potentially large file, which is slow. Instead we can resize the image on the client side before uploading it, which is fast.
We do this by creating an HTML5 <canvas> element and drawing the image to the canvas at a particular size, then extracting the new image data from the canvas as a data URI. Most browsers have good support for these methods, so you can probably use this technique right now, however just be aware of some limitations unrelated to browser support such as quality and performance.
Resizing very large images can cause the browser to slow down or in some cases, even crash. It makes sense to set reasonable limits on the file size just as you would when uploading a file. If quality is important you may find the resized image looks undesirable due to how the browser resampled it. There are some techniques to improve the quality of images downscaled with canvas, but they are not covered in this tutorial.
Take a look at the final result in this demo or download the ZIP file.

Read More

New jQuery Search Engine Effect

View demo     Download source

Today we’d like to share a simple morphing effect with you. The idea is to have a search input in the upper right corner of the page and once the input is clicked, the whole search element expands to a fullscreen overlay. The fullscreen overlay has a bigger search input and some elements for showing related items or the search results. Note that we just made a dummy that does not actually search dynamically.
For the morphing search effect we use several transitions that animate the dimensions of the search input, the font size and some other elements. Please note that it’s very experimental and only tested in the latests versions of modern browsers.
The background image used in the demo is from Unsplash and the icons are from Font Awesome.

Read More

jQuery Event Calendar

jQuery simple event calendar make it easier for you to create an event calendar, datepicker or whatever you want with jquery.

Demo     Download

Read More

jQuery Elastic SVG Menu

View demo      Download source
Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, we’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.

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

Sweet Thumbnails Preview Gallery

View demo    Download source
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
Update: If you are interested in integrating the thumbnails preview slider you might want to check out the new post on how to use only the preview part:
Thumbnails Preview Slider with jQuery
The beautiful images are by talented geishaboy500 and can be found here on his Flickr Photostream.
So, let’s roll!

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

jQuery Fullscreen Gallery with Thumbnail Flip

View demo   Download source

In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
We will be using Flip!, a jQuery plugin by Lucca Manno that flips elements.
And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron.
The beautiful images are by talented Polina Efremova. Visit her website and check out her profile on Behance.
Let’s get started with the markup!

Read More

Advanced jQuery Tabbed Box Techniques

Click here for demo  Download

Read More

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, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.

Read More

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

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

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 rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball.

Read More