Motio – jQuery Plugin for Sprite Based Animations & Panning

Motio is a jQuery plugin for simple but powerful sprite based animations and panning. Motio is called on an element representing animation container, where animation is delivered as a CSS background image.

In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 1000 x 100 pixels big, the container should be 100 x 100 pixels big. In panning, container size doesn’t play any role, just the background image should be seamless.

Integrated Motio on/off methods are using jQuery $.Callbacks API, which is in jQuery sice 1.7+. If you can’t use newer versions of jQuery, you can go for jQuery bind/unbind methods called on a frame element, with ‘motio:’ prefix on all event names.

Requirements: jQuery Framework
Download: http://darsa.in/motio/

Photobox – A CSS3 jQuery based Image Gallery Plugin

Photobox is an Image Gallery plugin built with CSS3  & jQuery. It is beautiful and posses a great look & feel. Both the script & CSS are only 7k each. It uses silky-smooth, hardware accelerated, CSS3 transitions and animations for better performance.

Pros:

It works in all major browsers including IE9 and above. But on IE the experience is not as good as other browsers because of incapability of its rendering engine. Image can be zoomed in and out with mousewheel and navigated using mousemove to move around. The bottom row of thumbnails can be navigated by mouse movment. It supports keyboard keys for navigation and closing the gallery view.

Cons:

I felt Photobox that the photo loading is too slow compared to other gallery plugins.

Demo:

http://dropthebit.com/demos/photobox/

Use Maskew to Skew the Shapes of Elements

Maskew, created by by Dan Motzenbecker, is a JS library that skews the shapes of elements without distorting their contents. It is mobile friendly as well. There is no dependencies but a modern browser is a requirement. It is less than 5k in size. Maskew is released under MIT License. You can download it via Guthub for free.

Optionally there is a jQuery plugin for Maskew too.

Use it:

var maskew = new Maskew(document.getElementById(‘skew-me’), angle);

With jQuery:

var $maskew = $(‘#skew-me’).maskew(angle);

Skew it:

maskew.skew(9);

// or with jQuery:

$maskew.maskew(‘skew’, 20);

// or:

$maskew.maskew().skew(20);

Demo: http://oxism.com/maskew/

Preview URL on Many Mobile Devices Simultaneously

Remote Preview allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit Enter, and new URL gets automatically loaded on each device. It works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS. It was built for the Helsinki Device Lab for fast site previewing.

Remote Preview works by making an ajax call every 1100ms to check if the url in the ‘url.txt’ file is changed. If it is, the script will then change the src attribute of the iframe and load a new page into it. If there’s no changes, the script will just keep polling the url.txt until something changes. Remote Preview allows very fast previewing of different URL’s to check for possible layout problems, which can then be debugged using various other tools depending on the platform where they occur.

Requirements: jQuery Framework
Demo: http://viljamis.com/blog/2012/remote-preview/
License: License Free

Collie – Create Highly Optimized Animations Using HTML5

Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.

Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Also easily responds to retina display.

Requirements: JavaScript Framework
Demo: http://jindo.dev.naver.com/collie/
License: LGPL License

Rotating DIV block using jQuery

I have taken this article from csstricks.com and is written by By Chris Coyier . Sometimes we need to give an interactive look to a webpage and this could be one of the good option for that. If you have a simple idea about the html,CSS and jquery ,then you can use this features in your webpage.

To use the rotating div block in your webpage you have to follow three steps

1. HTML Section
2. CSS Section
3. jQuery Section

Click here to download the demo file.

Five Cool jQuery Plugins for Displaying Images

Write less , do more. the slogan of the jquery proves its significance. According to jquery.com .”jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” I am always fascinated by the jquery plugins.In this article , i have compiled some jquery plugins which i have used in my projects and hope it will be useful to other’s too.The jquery plugins, here i am discussing are specially focused for handling the images.

1.Slick Auto-Playing Featured Content Slider

Click here for demo and download.

2.Sliding Boxes and Captions with jQuery

Click here for demo and download.

3.jqFancyTransitions slideshow with strip effects

Click here for demo and download.

4.zoomer gallery

Click here for demo and download.

5.Panning Slideshow

Click here for demo and download.

Floating Message Box Using Jquery

Sometimes, we have to show some extra message in our post which are important and linked with the post and cannot put that in the webpage like some important announcement and breaking news etc. In these cases, it can better option to use a Floating Message Box which will appear in front of the webpage . Today, I am going to discuss the code which will create a floating message box using jquery . You can use this code everywhere you want . read more

Basic jQuery Tutorial: About parent and child elements

In this article, I will be explaining about parent and child elements and how to use jQuery to them efficiently.

VIEW DEMO

Basically, parent element means any HTML element with other elements inside it. Like in the following HTML code, we have the div ‘parent’. We suppose it to be parent element. There are other elements inside it like ul, li, and span. So, ul, li and span are children of the div ‘parent’. There is also nested ul and li, hence containing parent child combination. read more

Basic jQuery Tutorial: Write or Append content to DIV

In this article, I will be showing you how to write or append content to DIV. When you write, all the text present before will be replaced by new content. When you append, new content will be added after the previous content already present there.

VIEW DEMO

read more