Category Archives: Jquery

3D Gallery with CSS3 and jQuery

3DGallery

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. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

Thumbnail Proximity Effect with jQuery and CSS3

ProximityEffect

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.

Page Transitions with CSS3

CSS3PageTransitions

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

Arctext.js – Curving Text with CSS3 and jQuery

Arctext

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Sliding Panel Photo Wall Gallery with jQuery

photowall

Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

How To Create Circular Image Galleries With jQuery

ovall

Hey guys. Quite often with image galleries powered by jQuery, we’re presented with a very similar layout – one which contains the images or items presented inside a rectangle. This is great for providing an experience users are used to, but there are a few interesting alternatives that you may like.

How to spice up your menu with CSS3

CSS3MenuHoverEffect

In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item.

Highly Customizble Minimit Gallery jQuery Plugin

minimit-gallery

Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.

Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced Javascript/Jquery programmers because you need to code all the animations and the css of the gallery. It has been tested on IE7+, Firefox, Safari and Chrome.

Animated Web Banners With CSS3

AnimatedWebBanners

Hey there folks! Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.

Firefox and WebKit browsers are currently the only browsers that support CSS animation, but we’ll take a look at how we can easily make these ads also function in other browsers (which I’ll affectionately refer to as 18th century browsers). However, don’t expect perfect support for all browsers (specifically IE 7 and lower) when experimenting with modern CSS techniques.