Subtle Hover Effect Ideas with SVG & CSS3

Subtle Hover Effect Ideas with SVG & CSS3

A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we’ve added some fresh effects with various transitions.

Google Translate Style Customizer : jQuery Plugin

Google Translate Style Customizer : jQuery Plugin

Do you use the Google Website Translator on your website, but hate the way it looks? Do you wish you had complete control over the style and formatting of the dropdown? Well now you can! Unlike other language managers, this plugin AUTOMATICALLY translates your webpage using Google Translate.

The actual Google Website Translator gets embedded on your site using an iFrame which makes it difficult to style items. Using a small jQuery script, we generate that same list of languages using only HTML to give you complete control over how they are displayed on your website!

CanvasJS : jQuery Charts Plugin

CanvasJS : jQuery Charts Plugin

CanvasJS Charting Plugin for jQuery lets you add beautiful & interactive charts to your web page with a few lines of code. Charts have high performance and can run across devices include Desktops, Tablets, iPhone, Android, etc. Supports features like dynamic updates, events, zooming, panning, etc.

QuickNote jQuery Plugin

QuickNote jQuery Plugin

jQuery plugin that lets you add quick note or todo note.

Facebook Share to Unlock Content using jQuery & Facebook API

Facebook Share to Unlock Content using jQuery & Facebook API

In my previous post I had explained How to Create Simple Tweet to Download Files using jQuery & Twitter API.In this tutorial on FB share to unlock content.Only few lines of code we can easily implement this cool feature. I hope this tutorial will help you to drive traffic, increase facebook shares & improve search engine ranking for your websites. For this you need to create an Facebook App, register your website & get an App ID.

Mobile App Introduction Template with CSS3 & jQuery

Mobile App Introduction Template with CSS3 & jQuery

A basic template to showcase the best features of your app, enriched with a video slider for a better user understanding. In this tutorial we can learn how to make this video slider effect to make mobile app introduction template with CSS3 and jQuery.

Flat Weather jQuery Plugin

Flat Weather jQuery Plugin

Flat Weather is an easy to use jQuery plugin that supports switching between two different weather API sources (OpenWeatherMap.org or Yahoo Weather) without changing any of your front-end code. Great for dashboards and sidebars!

The code is well-documented and small, with its only external dependency being jQuery, which makes it easy to deploy and extend. The plugin comes with an attractive flat UI css stylesheet, and uses a weather icons font to provide attractive and scalable visuals.

bLazy : jQuery Lazy loading Plugin

bLazy : jQuery Lazy loading Plugin

bLazy is a lightweight lazy loading and multi-serving image script. It’s written in JavaScript why it doesn’t have any dependencies for 3rd party libraries like jQuery. bLazy is working in all modern browser including IE7+.

Features:

  • bLazy is used on big sites with millions of monthly visitors so it has been tested out in the real world.
  • bLazy is written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery.
  • bLazy can lazy load all types of images including background images.
  • bLazy can lazy load images depending on screensize (multi-serve images).
  • bLazy can serve retina images on retina devices.

Wobbly Slideshow Effect with SVG & JavaScript

Wobbly Slideshow Effect with SVG & JavaScript

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths to animated the slide background SVGs in order to simulate the elastic effect. What happens is that we basically morph an SVG path from a rectangle to a curved shaped; either a right curve or a left curve, depending on where we are navigating to.