ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.
Biggest difference to other responsive slideshow plugins is the file size (985 bytes minified and gzipped) + that this one doesn’t try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.
Requirements: jQuery Framework
Demo: http://responsive-slides.viljamis.com/
License: MIT License
Paperfold CSS takes a dom element, slices it into parts and arranges them like a folded paper in 3d space. It was a proposal for a visual folding-effect for hidden comments. It works best on Chrome and Safari. In Firefox there are still gaps in the folds (probably because of rounding). It is built using JavaScript, HTML5, CSS3, and released under Creative Commons License.
Requirements: –
Demo: https://developer.mozilla.org/en-US/demos/detail/paperfold-css…
License: Creative Commons License
iOS App Icon Template is an App Icon Template that, through Smart Objects in Photoshop, attempts to automate the process of rendering the various sizes that needs to be bundled with iOS Apps.The idea is to edit the largest size and have the smaller sizes automatically rendered enabling a much quicker workflow when designing icons. You’ll also find a selection of ready-made textures that you can build on and easy export actions that spit out the exact files you need to deliver to Apple.
You’ll need Photoshop CS2 or later. Open the PSD file in Photoshop. Find and right click the layer called ‘EDIT THIS SMART OBJECT’ and hit ‘Edit Contents’. This opens the Icon.psb file – create your artwork in this canvas. After saving the Icon.psb, the multiple sizes in the Main PSD file should be automatically rendered. Use the Photoshop Actions bundled with the resource to export your icon files in both squared and rounded corner versions.
Requirements: Photoshop
Demo: http://appicontemplate.com/
License: License Free
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups? Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.
Requirements: –
Demo: http://styletil.es/
License: Creative Commons License
If you are a creative person, you create a lot of content. But most of it sits, archived, on some computer somewhere for the rest of time. It’s either too hard, or too time-consuming, or it doesn’t even make sense to put in a store! Gumroad is a relatively new eCommerce platform that let you easily sell the stuff you haven’t been able to, yet.
You can price a link for as little as $1, and as much as $1,000. They support all major credit cards. That includes Visa, MasterCard, American Express, Discover, JCB, and Diners Club cards. They take 5% + $0.30 of each transaction. There are no setup fees, no monthly fees, and no bandwidth fees.
You can also take a look at other Open Source Ecommerce Platforms we mentioned some time ago.
Requirements: –
Demo: https://gumroad.com/
License: License Free
Spaceport helps you build beautiful high-performance games and run them as native apps. Spaceport uses OpenGL to accelerate rendering on native devices. With Spaceport’s graphics engine, you use versatile and efficient vector graphics formats instead of bloated sprite sheets. Doing so minimizes the size of asset downloads and drastically reduces loading times.
Spaceport leverages universal web standards like HTML5 and Javascript to deliver remarkably consistent gaming experiences across platforms. Spaceport allows you to create dynamic online games for multiple devices without a large development team. Better yet, Spaceport is completely free to use. Only pay if your game makes you money.
Requirements: –
Demo: http://spaceport.io/
License: See Agreement
PanoJS3 is an interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much larger than the available space in the browser viewport. Examples include panoramas, maps or high resolution document scans.
PanoJS3 supports native navigation on most popular platforms: PCs, Macs, Mobile devices with touch interfaces, Phones and tablets. It has been tested on Chrome 3+, Safari 3+, FireFox 2+, Internet Explorer 8+, Opera 9+.
Requirements: JavaScript Enabled
Demo: http://www.dimin.net/software/panojs/
License: License Free
There are lots of timeline tools on the web but they are almost all either hard on the eyes or hard to use. The goal is to create timelines that are at the same time beautiful and intuitive for users.
Timeline is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and Timeline will format it to fit perfectly. More media types will be supported in the future. Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.
Requirements: jQuery Framework
Demo: http://timeline.verite.co/
License: GPL License
Hammer.js is a javascript library (that depends on jQuery) that can be used to control gestures on touch devices. It supports the following gestures: Tap, Double Tap, Hold, Drag, and Transform. It is lightweight with only 2kb.
Hammer.js has been tested on iPad1 with iOS5, iPhone4 with iOS5, Samsung Galaxy S with Android 2.3.3 and Google Chrome 17. On a desktop browser the mouse can be used to simulate touch events with one finger.
Requirements: jQuery Framework
Demo: http://eightmedia.github.com/hammer.js/
License: License Free
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.
Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.
jQuery Scroll Path also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.
Requirements: jQuery Framework
Demo: http://joelb.me/scrollpath/
License: MIT License
