WebAppers

/ best free open source web resources /

Shopify

A Morphing Card Expansion Effect with SVG ClipPath

Posted · Category: License Free, Menu

Codrops has created a experimental grid layout with “Card Expansion Effect” where they have animated the card expansion with a morphing effect on the cover image and follow its motion with a delightful animation of a low-poly pattern used as the background of the page.

They are using Trianglify by Quinn Rohlf to generate the background pattern, SVG’s clipPath to morph the card image, and GSAP to animate and control the whole sequence. They could have used the CSS clip-path property to clip and morph the image but since the support is currently quite limited and inconsistent across browsers, they are using SVG clipPath instead. This way they can make the demo work across all browsers, including IE9.

card-effect

Requirements: –
Demo: http://tympanus.net/Development/CardExpansion/
License: License Free

Create Tooltip Style Toolbars with Toolbar.js

Posted · Category: License Free, Menu

Toolbar.js is a jQuery plugin that creates tooltip style toolbars. It allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons.

You can run as many toolbars as required. Toolbars can be attached to any element required. Plenty of options to customised how your toolbar functions including position, animations and events. Toolbars are responsive and follow the buttons on resize.

toolbar-js

Requirements: jQuery Framework
Demo: http://paulkinzett.github.io/toolbar/
License: License Free

Create a Responsive Mega Dropdown with Sub-Categories

Posted · Category: License Free, Menu

One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories, that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page.

Codyhouse has been working on a similar concept, a Responsive Mega Dropdown component with sub-categories.

dropdown

Requirements: –
Demo: http://codyhouse.co/demo/mega-dropdown/index.html
License: License Free

Adding Popular Wobble Effect for Your Mobile App

Posted · Category: Menu, MIT License

WobbleView is an implementation of a recently popular wobble effect for any view in your app. It can be used to easily add dynamics to user interactions and transitions. This is subtle but dynamic motion for list swipe interactions and connect it with cell velocity, making it feel more responsive to user actions. WobbleView is available via CocoaPods.You can also manually add the files into your Xcode project. Slightly simpler, but updates are also manual.

wobble-effect

Requirements: iOS XCode
Demo: https://github.com/inFullMobile/WobbleView
License: MIT License

Slideout.js – Touch Slideout Navigation Menu for Web Apps

Posted · Category: Menu, MIT License

Slideout.js is a touch slideout navigation menu for your mobile web apps. it’s dependency-free with simple markup. It supports native scrolling. You can easily customize it as you wish. It supports different CSS transforms & transitions. Best of all, it’s just 4 Kb.

slideout-js

Requirements: –
Demo: https://mango.github.io/slideout/
License: MIT License

Slide-in Content Filter Powered by CSS and jQuery

Posted · Category: License Free, Menu

A well-designed filter is a powerful tool users can take advantage of. It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates by reducing the time needed by the user to find what he’s looking for.

Building this kind of features is never easy: filters highly depend on the website content; besides a filter panel shouldn’t be distracting, the main focus should be the content/products. Hence, Codyhouse tried to simplify a bit your life by building an easy-to-customize and easy-to-integrate CSS Content Filter panel for you. It takes advantage of CSS Transitions, CSS Transformations and jQuery muscles to smoothly slide in when needed.

content-filter

Requirements: CSS
Demo: http://codyhouse.co/gem/content-filter/
License: License Free

Drag and Drop Interactions Ideas for Your Inspirations

Posted · Category: License Free, Menu

Codrops has shared some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged. The demos are just some experimental ideas of how these kind of interactions can be imagined.

The idea is to allow to drag an item and then show some droppable area that stands for certain actions. This saves a lot of UI space and gives an interesting dynamic to interactions. There are many applicable scenarios; think of categorizing and organizing content (i.e. like the Pinterest boards) or performing any type of actions (like in mail apps or in content management systems).

drag-drop-ideas

Requirements: –
Demo: http://tympanus.net/Development/DragDropInteractions/
License: License Free

Midnight.js Lets You Switch Fixed Headers on the Fly

Posted · Category: Menu, MIT License

Midnight.js is a jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it. Midnight.js lets you switch fixed headers on the fly. On iOS <7 and older Android devices scrollTop isn't updated fluently, which creates a choppy effect. It can be fixed somewhat by wrapping the body in container and detecting touch events.

midnight-js

Requirements: jQuery Framework
Demo: http://aerolab.github.io/midnight.js/
License: MIT License

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

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

Page 1 of 11123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons