Pan and zoom jQuery plugin

Pan and zoom jQuery plugin

This plugin manage smooth zoom and pan on a given dom element. The plugin works on mobile and pc and use CSS3 transitions on compatible web browsers. (javascript is used for old web browsers)

Zoom is enabled via mouse events (scroll and click) on pc and with touch events on mobile devices.

Form Character Limit Animation using jQuery and CSS

Form Character Limit Animation using jQuery and CSS

I was recently playing around with form validation and using css to animate cool things, but then I stumbled across character limit. You can easily use jQuery to access parameters like an input field’s character limit and current character limit. So I tried creating a simple animation that showed as you were typing in a field how many characters you had left. I opted for a simple design where there is just a grey bar underneath the input field and it fills up as you type in characters and changes colors as you get closer to the limit.

udraggable.js : jQuery plugin to make elements draggable by mouse or touch

udraggable.js : jQuery plugin to make elements draggable by mouse or touch

This plugin provides an API similar to jQueryUI’s draggable but with support for unified mouse and touch events.  It aims to provide a minimum useful subset rather than attempting to clone the full range of behaviours supported by jQueryUI. However some of the limitations can be worked around quite simply.

The udraggable plugin allows you to make elements draggable with a single line of code and to use a declarative syntax to define the constraints of the dragging behaviour.

Open Weather : jQuery OpenWeatherMap API for Current Weather

Open Weather : jQuery OpenWeatherMap API for Current Weather

A simple, lightweight jQuery plugin used to display the current weather of any city using the free OpenWeatherMap API.

This plugin allows you to display the location, the current temperature, the current low temperature, the current high temperature, a description of the current weather, a weather icon, the humidity level, the wind speed, the time the sun will rise, and the time the sun will set.

titlesequence.js : jQuery plugin for doing animated title sequences

titlesequence.js : jQuery plugin for doing animated title sequences

This plugin simplifies the creation of animated title sequences in the style of opening titles or closing credits for a movie, or indeed any style you can achieve with HTML and CSS.

This plugin allows you to define a sequence of events to be played back in the selected container element. Typical events might include:

  • adding text, images etc at particular x/y coordinates
  • fading text in or out by animating opacity
  • scrolling text up or down by animating the position
  • wiping text in or out by animating the element width

NProgress.js : jQuery plugin to Add a Progress Bar to Your Site

NProgress.js : jQuery plugin to Add a Progress Bar to Your Site

Since the advent of mobile, web sites are turning more and more into “apps”. Concepts that make sense for a locally running application are transferred to the web. One of these is the recent addition of “progress bars” to some of Google’s websites that show the loading state of the page.

NProgress is a jQuery plugin that shows an interactive progress bar on the top of your page, inspired by the one on YouTube. It consists of a global object – NProgress which holds a number of methods that you can call to advance the progress bar.

FFForm : jQuery Contact Form Plugin with Validations & Amazing CSS3 Animation

FFForm : jQuery Contact Form Plugin with Validations & Amazing CSS3 Animation

The ‘Contact’ form on your website is like your door to rest of the world in the cyberspace. It is the easiest way for website visitors to drop a line and start the conversation.FFForm is a simple jQuery plugin that can be integrated in any website layout to provide a fully functional contact form. Built with jQuery and CSS, FFForm is compatible with all modern web browsers and mobile devices. It also provides various customization options including animations, field validation and notifications.

Features:

  • AJAX Enabled
  • Cross-Browser Compatible
  • Data Validation
  • Custom handlers for events like onValidation, onSuccess and onError etc.
  • Various Animation Styles

Tabslet : A jQuery plugin for Tabs with Extra Features

Tabslet : A jQuery plugin for Tabs

Yet another jQuery plugin for tabs with some extra features.

Beyond the standard tabs functionality:

  • Change tabs on mouse over
  • Use animation effect for tabs’ changing
  • Ability to use either href or alt attribute to target tab
  • Rotation
  • Custom events

Glide.js : Responsive and touch-friendly jQuery slider

Glide.js : Responsive and touch-friendly jQuery slider

Glide is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It’s simple, lightweight and fast. Designed to slide, no less, no more.

Sliding Horizontal Layout with CSS3

Sliding Horizontal Layout with CSS3

Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible. When clicking on one of the sides or on one of the lateral navigation items, the sections will slide to the respective side, showing the next or previous section. The same happens to the navigation.

We use CSS 3D Transforms for moving the lateral sections. In a browser that does not support 3D Transforms (or where JavaScript is not enabled),