Today I found an interesting jquery that you can also use in your website. Continue reading
In this tutorial, We will create a very simple jquery animated form. This idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
So, Lets begin
Are you in need of multi-level navigation? And that too responsive which fits well in all devices? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and/or cursor less screens?
I have been successfully implementing it into my projects as there is no room for one-sided techniques anymore.
The technique consists of three main parts:
- Simple drop-down navigation based on HTML and CSS;
- Responsive implementation using media queries;
- Adoption for touch screen devices with the help of a super tiny jQuery plugin.
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
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.
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.
I felt Photobox that the photo loading is too slow compared to other gallery plugins.
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.
var maskew = new Maskew(document.getElementById(‘skew-me’), angle);
var $maskew = $(‘#skew-me’).maskew(angle);
// or with jQuery:
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
License: License Free
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.
License: LGPL License
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.