Walking Man Effect Using CSS3 Animation

Walking Man Effect Using CSS3 Animation

CSS3 is great way to create animations, we can replace flash animations,animated images and Javascript with CSS3 Animation properties.

In this tutorial I will explain how to create walking man Animation effect using CSS3 alone as shown below.

Moving Blurry Background for JavaScript and jQuery

Moving Blurry Background for JavaScript and jQuery

BlurryBackground() is a JavaScript application which can be easily included in any website. It allows programmer to create modern-looking blurry backgrounds without need to load large background images. This means you can save even 90% of bandwith intended for blurry background image. It caches blurred images so that the CPU consumption is reduced.

Also, it provides a really easy mechanism of background animations so you can create modern, distinctive website’s elements in seconds. You can choose from a collection of 8 built-in animating functions like “gust”, “swing”, “raindrop” and more, or you may just use your own function. You can also create a playlist of blurred backgrounds and make them change every few seconds.

Buttons With Built-in Progress Meters in jQuery & CSS3

Buttons With Built-in Progress Meters in jQuery & CSS3

Progress bars have become quite popular lately, and there are lots of plugins that can help you add one to your site. But how do you make one yourself? The problem is that there are plenty of implementations already, so in this tutorial, we are going to code something different – buttons that have built in progress meters.

They will be perfect for displaying progress while submitting forms or loading content via AJAX. They will also use CSS3 styles and transitions to make them easy to customize.

Yummi-loader : Css classes for a fancy page load with jQuery

Yummi-loader : Css classes for a fancy page load with jQuery

The Yummi-loader is nothing more than a simple LESS file with some CSS3 animations. Use them just adding ‘off’ class on your body element and changing it with ‘on’ on $(window).load() or $(document).ready() events.

Bootstrap Combobox : jQuery twitter Bootstrap Combobox plugin

Bootstrap Combobox : jQuery twitter Bootstrap Combobox plugin

A combobox plugin that works with twitter bootstrap.We had need of a combobox at work and after looking around at the available options I was not happy with any of them. The project had all it’s styling based on Twitter’s Bootstrap, so building on that made sense.

Custombox : jQuery Modal Window Effects with transitions CSS3

Custombox : jQuery Modal Window Effects with transitions CSS3

jQuery Modal Window Effects with transitions CSS3.This plugin is created with native JavaScript but works perfectly with jQuery.

These animations only works as intended in browsers that support the respective CSS properties.Internet Explorer 8 and 9 works, but without animations.

Diamonds.js : jQuery Diamond layout Image Gallery

Diamonds.js : jQuery Diamond layout Image Gallery

Tired of straight grids where everything is vertically and horizontally aligned? Why not tilt everything by 45 degrees? This jQuery plugin lets you easily do just that!

Features:

  • Auto resizes
  • No images, all css
  • AMD aware plugin
  • Test coverage!

Smart Content Protector – jQuery Copy Protection

Smart Content Protector - jQuery Copy Protection

Smart Content Protector jQuery is the jQuery Plugin to Protect the Text and Images in any site by including the js file. In order to avoid Plagiarism, it is essential to make sure the Text and Images from your site is not copied. This Plugin serves as the Content Protector for your site.

Text Protection features in this Plugin to disable the possible shortcut keys for copying the Text. Also this Plugin has Image Protection options to Disable the Image Dragging and Disable the Original Image to view. It also hides the link which shows the image link.

Features:

  • Supported for Windows, Linux, Mac OS X? etc
  • Protect your Text and Images by Disabling the Mouse Right Click and Possible Shortcut Keys for Cut (CTRL+x), Copy (CTRL+c), Paste (CTRL+v), Select All(CTRL+a), View Source (CTRL+u) etc.
  • Enable or Disable Content Protection.
  • Disable Image Dragging, Disable the Link which contain image extension etc.
  • Works out of the box.
  • Simple and Easy to use.

Smartpopover : jQuery Auto layouting balloon Popover

Smartpopover : jQuery Auto layouting balloon Popover

Auto layouting balloon popover always inside window for jQuery.To help creating your webapp editor window, balloon popover of charactor speech, etc.

Readmore.js : jQuery plugin for Collapsing and Expanding Text Blocks

Readmore.js : jQuery plugin for Collapsing and Expanding Text Blocks

A smooth, lightweight jQuery plugin for collapsing and expanding long blocks of text with “Read more” and “Close” links.

The required markup for Readmore.js is also extremely lightweight and very simple. No need for complicated sets of divs or hardcoded class names, just call .readmore() on the element containing your block of text and Readmore.js takes care of the rest.