Skippr is a super simple slideshow plugin for jQuery. Simply include jquery.skippr.css inside your head tag and jquery.skippr.js just before the closing body tag.
Create a target element with divs inside, one for each slide, and add a background image with css or the style attribute. Skippr targets div tags inside of the selected element with background-images applied to them. Put this target element inside of a container element styled and positioned to your liking. The target element will completely fill it’s parent container element.
Requirements: jQuery Framework
Demo: http://iamapioneer.com/plugins/skippr/
License: License Free
Odyssey.js is an open-source tool that allows you to combine maps, narratives, and other multimedia into a beautiful story. Creating new stories is simple, requiring nothing more than a modern web-browser and an idea. You enhance the narrative and multimedia of your stories using Actions that will let you tell your story in an exciting new way. Use our Templates to control the overall look and feel of your story in beautifully designed layouts.
Experts can also add custom Templates and Actions (e.g. map movements, video and sound control, or the display or new content). The library is open source and freely available to use in your projects.
Requirements: –
Demo: http://cartodb.github.io/odyssey.js/
License: BSD 3-clause License
Outdated Browser is a time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version. So, you’re tired of people visiting your modern website with an outdated browser and not doing anything about it. Maybe they aren’t “power” users, maybe it’s your auntie running a last century browser trying to see awesome CSS3 animations and transforms. Let the user know that’s an outdated browser, and advise them on a better one.
With this solution you can check if the user’s browser can handle your website. If not, it will show a cool looking notice advising the user to update the browser. It’ll be up to him/her to decide if he upgrades or not. Don’t force the user.
Requirements: –
Demo: http://outdatedbrowser.com/
License: MIT License
Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 – available to the public, 100% FREE. You may use or distribute it for any purpose, whether personal or commercial. This icon set is a must have tool for web designers and developers.
Requirements: –
Demo: http://themify.me/themify-icons
License: License Free
Modern UI Kit is a simple, elegant and free modern user interface pack available as a free PSD download under MIT licence. Modern UI Kit is a large user interface kit containing hundreds of ui elements, which will help you design nice user interface in Photoshop with ease. They are designed in vector, so that you can resize them as you like.
You can use the royalty-free icons for any personal, commercial project including web design, software, application, advertising, film, video, computer game, gui design, illustration, for you or for your clients, without having to pay additional licensing fees.
Requirements: Photoshop
Demo: http://www.webiconset.com/modern-ui-kit/
License: MIT License
jQuery fontIconPicker is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, an Array or Object of icons or directly from a Fontello config.json or IcoMoon selection.json file.
Simply just include a copy of jQuery, the fontIconPickers script, the fontIconPickers theme and your Font Icons. Now you can trigger it on a SELECT or INPUT[type=”text”] element. jQuery iconPicker has been successfully tested on: Firefox (edge), Safari (edge), Chrome (edge), IE8+ and Opera (edge).
Requirements: jQuery Framework
Demo: http://codeb.it/fonticonpicker/
License: MIT License
Boba.js is a small, easily extensible JavaScript library that makes working with Google Analytics easier. It supports the old ga.js library as well as the new analytics.js library. It has one out of the box function, trackLinks, and makes tracking everything else child’s play. Requires jQuery.
Requirements: jQuery Framework
Demo: http://boba.space150.com/
License: MIT License
Fenix is a simple static desktop web server for developers. You can work on multiple sites simultaneously. Serve any number of HTTP projects side by side with Fenix. Fenix serves and receives. View JSON, XML, and other webhook payloads with the request browser.
You can create, stop, start, and share Fenix servers from the command line with the free Node.js console app. Now you can turn your desktop into a public web server by sharing a link. Let collaborators/reviewers “touch and feel” the site.
Requirements: –
Demo: http://fenixwebserver.com/
License: GPL License
ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.
ScrollMe uses a simple declarative syntax: just include jQuery & scrollme.js, add some bits to your markup and ScrollMe will do the rest. The scrollme class defines a container for animated elements. The progression of the animations is based on the scrolling through this element.
The animateme class defines the animated elements. Any number of these can be added within a container element. These elements also take the options that describe how and when the animation occurs.
Requirements: jQuery Framework
Demo: http://scrollme.nckprsn.com/
License: License Free
Codrops has shared a tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.
The slideshow that we are recreating is made up of four tiles that move individually, making the image split while scaling up the new image. This combines into a really nice effect which we will re-implement using 3D transforms, transitions and animations. In addition to that effect we’ll also add two more variations. The aim that we want to keep in mind, is to achieve a super-smooth effect experience.
Requirements: CSS 3D Transforms
Demo: http://tympanus.net/Tutorials/FourBoxes/
License: License Free
