3D Gallery with CSS3 and jQuery

Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Read More

Photo Zoom Out Effect with jQuery

Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

Read More

jQuery Image Cube

A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

Read More

Glimmer a jQuery Animation effect plugin

Another great animation effect for jQuery lovers, you can see how the landscapes moves.Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.By using Glimmer you can make rotating image banners,beautiful tooltips, Dropdown menus and lot of other animation effects.

Read More

jQuery InnerFade

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Read More

jQuery Slideshow plugin : ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery and that all the images are same size.

Read More

Javascript thumbnail and media viewer : Highslide JS

Highslide JS is an image, media and gallery viewer written in JavaScript.These are some of its advantages:

• Quick and elegant looking.


• No plugins like Flash or Java required.


• Popup blockers are no problem. The content opens within the active browser window.


• Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.


• Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.

Read More

Bootstrap jQuery Image Gallery

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter's Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

Read More

jQuery image panning

Image panning with animation easing that works on mouse movement with some css and jquery.

Read More

SimplyScroll a jQuery plugin for scrolling a set of images/elements

simplyScroll is a jQuery plugin that can animate (scroll) a set of elements either automatically or manually, horizontally or vertically. It can also accept dynamic image input via a Flickr feed (note not full API integration) or a local JSON source. This plugin can be performance intensive, so speed and framerate are fully configureable to accomodate lower spec systems.

Read More

Use Reveal.js to Create CSS 3D Slideshow

If you're making an online presentation to impress your audience, you have to consider to use reveal.js. reveal.js is a CSS 3D Slideshow, it allows you to create a slick and good looking HTML presentation and in the same time utilise the latest web technologies for cool 3D slide transition. Reveal.js is a standalone javascript plugin and doesn't rely on any external libraries.

One thing though, this javascript requires CSS 3D transforms support. That's mean, IE won't able to see all these fancy animation. It works really well in Safari, Chrome and Firefox. Good news is, if CSS 3D support is not detected, it will degrade gracefully and back to the 2D transitions.

Read More

jQuery Content Slider : Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. Think of Revolver as a boilerplate or framework for making your own slider, exactly the way you want it. But don't let that scare you, it's really easy, I promise!

Read More

An Infinite, Circular jQuery Carousel: carouFredSel

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction.

Read More

jQuery Frame Animation : Reel

Reel is a jQuery plugin which takes an image tag and makes it a live "projection" of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash and Java techniques.

Read More

jQuery Slideshow / Image Gallery Plugin: PikaChoose

Pikachoose is a lightweight jQuery slideshow / image gallery plugin for rotating through a series of images, comes with tons of great features!

jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose has API hooks for integrating lightboxes and other things.

Read More

Build A Greyscale jQuery Image Gallery

Displaying images galleries on your web pages can be very complicated, much like the jQuery modal boxes, today you will learn a very simple way to create a nice looking image gallery in CSS and jQuery.

The gallery has a main image and multiple alternative images which on the hover event will change the main image.

The CSS will be used to setup the look of the gallery and jQuery is used to change the main image with the alternative images.

Read More

CSS3-Powered Presentation Framework : Impress.js

A new presentation framework is released recently -named Impress.js- which enables us to build very beautiful outputs.

Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).

And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.

Read More

Thumbnail Proximity Effect with jQuery and CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

This is based on a request we once got from a reader who asked if the effect on http://porscheeveryday.com/ could be achieved with jQuery. This is our attempt to recreate the basics of that effect.

Read More

FancyMoves a jQuery Product Slider

FancyMoves has a lot of great features which are easy to edit to customize your slider. Easily change the speed of the slider, add multiple sliders on the same webpage, turn off the navigation below the slider, and much more.There are multiple ways to navigate to the next / last item: using your keyboard, using the left and right arrows on the sides of the slider, using the nav under the slider (optional), or simply clicking on the next or last item in the slider.

jQuery FancyBox is built in so you can have images enlarge with an overlay effect on the screen. Hovering over the enlarged photo shows arrows, allowing you to navigate to other images within the group. FancyBox is easy to customize for your needs; change the transition effects, the background color, the title positioning, and more.

Read More

Roundabout is a jQuery plugin

Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results.

Read More