background preloader

Untitled

Untitled
Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle

https://razorjack.net/quicksand/

Related:  Plugins jsJava / jQuery

jQuery slideViewer 1.2 Download slideViewer 1.2 (last updated july 9 2010) What's this? slideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images: slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture).

Documentation Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element.

Textualizer Download: textualizer.js - (12.67 kb) development textualizer.min.js - (4.83 kb) production Usage Contextual Slideout Tips With jQuery & CSS3 Martin Angelov By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips. Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

jQuery & CSS Sprite Animation Explained In Under 5 Minutes Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below! Demos and text are available for anyone that wants to read/see them in the rest of the post. View Demo Download Source

slabText – a jQuery plugin for creating big, bold & responsive headlines I’ve been wanting to attempt a port of Erik Loyer’s slabtype algorithm for quite some time now and seeing Paravel’s fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it. This is the result – resize the browser viewport to see the effect in action. So what does the script do again? Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Open Source - Scroll Follow - The Kitchen @ Net Perspective Overview Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. Scroll Follow has been successfully tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. It has been successfully tested on FF3 and Safari 3 on MacOSX. Requirements jQuery (tested with 1.2.6) jQuery UI Core (tested with 1.5.2)

Expanding Fullscreen Grid Portfolio Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. View demo Download source Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”.

50+ Best jQuery Parallax Plugin with Examples PAXMAN.js : Scrolling Engine with Vector Control A Scrolling Engine for making sweet static single paged websites, quickly, and by using HTML markup as config. Features: 30 jQuery Plugins for Amazing Website Design There are many jQuery plugins and applications that can be used in improving websites, regardless of the niche and topics being covered. So many that it can be overwhelming and confusing to choose as to which jQuery plugins should be used for your advantage. Despite that you wanted to spend much time in finding out what works best for you or your site, the luxury of time is usually not available, which makes website improvement pursuits set aside or taken for granted on most occasions. However, there are those that stand out, those best jquery plugins that instantly gives impact and revolutionary changes for your online pages. So whether you are looking for something that’s functional, user-friendly, or easy to use, these 30 jQuery plugins for amazing website design would prove to be more than useful to you.

Zoomooz.js Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Orbit: jQuery Image Slider Plugin from ZURB - ZURB Playground - ZURB.com 1.3.0 (1/25/2012): Add custom events to allow control via custom JavaScript. Fixed intermittent loading issue on Chrome. Fixed IE issues. Refactored code to be more readable. Final version outside Foundation. Mouthwatering Collection Of jQuery Plugins And CSS3 Tricks I’m sure that at one point or another you were designing a website and thought it could use a little something extra. That bit of something that adds extra functionality or enhances what it already has, making it not only easier for the user to receive the information they seek, but also present it in a neat package. In no particular order, I give you a handpicked collection of jQuery plugins and some CSS3 tricks to top it off. Surely, with these in your designer arsenal, your creations will stand out more than ever before. jQuery 1.

jQuery.parallax Download git clone github.com/stephband/jparallax Instantiation

Related:  Web-Design:cool stuffjQueryJQuery UI & WidgetsJQueryjQuery plug-insJavascript Libs/FrameworksjQuerypluginsjQueryjquery pluginsMasonryweb page developmentImplementation ideasforrestzshooster