WebAppers

/ best free open source web resources /

Shopify

A Simple Way to View Website Performance Metrics

Posted · Category: Charts, MIT License

PerfBar is a simple way to collect and look at your website performance metrics quickly, that supports budgeting and adding custom metrics. PerfBar is a tool that puts dozens of metrics at the tip of your fingers with just a single script include.

Once set up, PerfBar adds a collapsable bar to the bottom of your website that displays the metrics for the current session. Here’s what it looks like in action on the project’s homepage.

perfbar

Requirements: -
Demo: http://lafikl.github.io/perfBar/
License: MIT License

Mazwai – Great Video Resources for Web Designers

Posted · Category: CC License, Video

Mazwai is a new stock video which only selects the very best of free videos online. The purpose of Mazwai is to help every web designer, creative, and artist to find great video resources for their professional and personal projects.

All the video clips, footage, and mini-film are available in HD under the public domain or the Attribution license (CC 3.0). This means that you can do everything with the video (transform, adapt, cut, share) as long as you do not forget to credit the original author in some way. There is no subscription. No download limitation.

free-videos

Requirements: -
Demo: http://mazwai.com/
License: Creative Commons License

Notification Styles with CSS Animations for Inspirations

Posted · Category: License Free, Popup

There are some simple ideas and effects for unobtrusive website notifications. There are a lot of ways to show an unobtrusive message to a user: from the classic growl-like notification to a bar at the top of the viewport.

There’s really no limit to making creative notification styles and effects but you should keep in mind that notification has to be a discreet message to the user, keep simplicity and subtlety in mind for the effect of appearance and also the disappearance.

Codrops has shared a small set of Notification Style Variations that use CSS animations for showing and hiding the notifications. Some of them are preceded by a dummy loading animation, which could be a nice idea for specific actions that require some time in a system.

notification-styles

Requirements: CSS
Demo: http://tympanus.net/Development/NotificationStyles/
License: License Free

JBox jQuery Plugin for Modal Windows, Tooltips & Notices

Posted · Category: MIT License, Popup, Tooltips

jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more. You can use jQuery selectors to add tooltips to elements easily. You can set up modal windows the same way as tooltips. But most of times you’d want more variety, like a title or HTML content. The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior.

jbox

Requirements: jQuery Framework
Demo: http://stephanwagner.me/jBox
License: MIT License

Responsive Ads – Fluid & Lightweight with Web Standards

Posted · Category: Advertisement, License Free

Web advertisements haven’t quite kept up with the web’s shift to responsive design. Mobile ads exist, yes, but they exist as separate entities from desktop ads. A campaign may include a handful of ads that work on set screen sizes, but they aren’t truly fluid and responsive.

ZURB has prototyped an implementation of responsive ads that’s completely fluid, lightweight, and built using web standards. Because they’re just embedded webpages, editing content is as easy as firing up a text editor. Styles, scripts and all, our ads average about 15K in size, while still being fully animated. And best of all, an ad server need not determine what ad to send to the client based on the device—one ad will work on any screen.

responsive-ads

Requirements: -
Demo: http://zurb.com/playground/responsive-ads
License: License Free

Create Smart Fixed Navigation with JavaScript

Posted · Category: License Free, Menu

Smart Fixed Navigation is a fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

smart-fixed-navigation

Requirements: JavaScript Framework
Demo: http://codyhouse.co/gem/smart-fixed-navigation/
License: License Free

JS Plugin for Viewing Images on Full Screen

Posted · Category: Gallery, MIT License

Intense Images is a stand alone javascript library for viewing images on the full screen. Using the touch/mouse position for panning. All styling of image elements is up to the user, Intense.js only handles the creation, styling and management of the image viewer and captions.

There aren’t many restrictions for the html elements you want to use to activate the Intense image viewer, the one manditory attribute is either a src or a data-image, which needs to point to an image file. You can use data-image if you want to load in a different version of the image to the original source.

intense-images

Requirements: JavaScript Framework
Demo: http://tholman.com/intense-images/
License: MIT License

A Flexible jQuery Plugin for Sorting & Pagination

Posted · Category: GPL License, Menu

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure. It supports data sources: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. It works with JavaScript templates like Handlebars, Mustache etc.

jPList supports XML + XSLT. It works in all major browsers. For non-commercial, personal, or open source projects and applications, you may use jPList for free under the terms of the GPL V3 License.

jquery-data-grid-controls

Requirements: jQuery Framework
Demo: http://jplist.com/
License: GPL v3 License

Skippr – A Lighter, Faster Slideshow Plugin for jQuery

Posted · Category: Gallery, License Free

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.

skippr

Requirements: jQuery Framework
Demo: http://iamapioneer.com/plugins/skippr/
License: License Free

How to Create Four Boxes Slideshow Effect

Posted · Category: Gallery, 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.

four-boxes-slideshow

Requirements: CSS 3D Transforms
Demo: http://tympanus.net/Tutorials/FourBoxes/
License: License Free

Page 1 of 64123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons