WebAppers

/ best free open source web resources /

Shopify

Create a Responsive jQuery Slider with Turnable.js

Posted · Category: Gallery, License Free

Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container. Think of it like a flipbook made with Javascript, instead of paper. All you need is a set of images, and jQuery. It’s a fresh alternative to the typical ‘click-to-slide’ JQuery gallery.

turnable-js

Requirements: –
Demo: http://polarnotion.github.io/turntable/
License: License Free

How to Make “The Aviator” 3D Game with Three.js

Posted · Category: License Free

Codrops has shared The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js, they created a simple 3D flying plane using Three.js, a 3D library that makes WebGL simpler. WebGL is a pretty unknown world for many developers because of the complexity and syntax of GLSL. But With Three.js, 3D in the browser becomes very easy to implement.

In this tutorial we’ll create a simple 3D scene with a few interactions in two major parts. In the first part we will explain the basics of Three.js and how to set up a very simple scene. The second part will go into some details on how to refine the shapes, how to add some atmosphere and better movements to the different elements of the scene. In this tutorial we will focus on some basic concepts that will get you started in the world of WebGL with Three.js!

html5-game

Requirements: Three.js
Demo: http://tympanus.net/Tutorials/TheAviator/
License: License Free

Create Amazing Videos in Your Browser with Showbox

Posted · Category: License Free, Video

Showbox enables anybody to create studio-quality video content. Showbox is a cloud-based solution that transforms video creation into a simple, scalable process that gives you beautiful results you couldn’t achieve beforehand. We tried to cover everything needed to create a video, in a way that allows you to go from idea to a professional looking video in a matter of minutes – and without requiring any fancy equipment or prior expertise.

Some of the things that Showbox offers in order to make video creation accessible to all:

– Show formats: our formats are the storytelling “blueprints”, which guide you through specific steps for the video you want to create. For example a top 5 countdown, a video to showoff your apartment for AirBnb, or even just you talking about a subject for 60 seconds.
– A library of graphic packages, all created by professional video artists, that give your video a professional look & feel
– Background replacement (“keying”) without having to use a green screen!
– Free-to-use licensed content libraries (from Getty images/videos, ShutterStock, and more)
– Automatic audio mixing and recording a voice-over
– Import your own content from Facebook, Instagram, Dropbox, etc.

The platform is free of charge for individual creators, while we monetize it by creating personalized versions for brands and publishers.

showbox

Requirements: –
Demo: https://showbox.com
License: License Free

Build Awesome User Interfaces with Flexbox Patterns

Posted · Category: Framework, License Free

Flexbox is awesome, it introduces many new concepts that can make it difficult to use. There are some interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.

flexbox-patterns

Requirements: –
Demo: http://www.flexboxpatterns.com/
License: License Free

Chartd – Responsive and Retina-Compatible Charts

Posted · Category: Charts, License Free

At StatHat, they make a lot of charts. They creates dynamic, autoupdating charts using JavaScript, but we also send charts via email and to external services like Campfire and Slack. Plus, they let users embed charts on their own web pages. For these situations, JavaScript charts either won’t work, are overkill, or could get messy.

So they made chartd. It allows you to create a chart with just an img tag. These charts:

  • are responsive (resize this page to see the charts respond)
  • are retina-friendly
  • can contain up to 5 datasets
  • can be line or step charts
  • have customizable colors and strokes

No JavaScript is required. You can generate SVG or PNG charts. We prefer SVG, but some services (like gmail) won’t render SVGs in emails.

chartd

Requirements: –
Demo: http://chartd.co/
License: License Free

An Interactive 3D Mall Map Concept

Posted · Category: License Free, Maps

Today Codrops has shared an Interactive 3D Mall Map experiment with us. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces.

When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs. This concept can be applied to any kind of floor map actually; any building that has several floors and spaces could be an interesting use case for this.

interactive-map

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

Material Kit – Free Bootstrap UI Kit for Google Material Design

Posted · Category: License Free, Tools

Material Kit is a Free Bootstrap UI Kit with a fresh, new design inspired by Google’s material design. You asked for it, so we built it. It’s a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Bootstrap elements, you will find three fully-coded example pages, to help you design your next project.

Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.

Material Kit is based on the Github Repo from Fez who did an amazing job creating the backbone for the material effects, animations and transitions. Big thanks to his team for their forward thinking efforts.

material-kit

Requirements: –
Demo: http://demos.creative-tim.com/material-kit/index.html
License: License Free

Vivaldi – A new Browser from Original Opera Co-Founder

Posted · Category: License Free, Tools

We are all absolutely unique and we want different things. Vivaldi web browser lets you do things your way by adapting to you and not the other way around. You prefer the browser tabs placed at the bottom or on the side of the window? – You prefer a different address bar location? Go ahead and customize your preferences be it your keyboard shortcuts, mouse gestures, appearance and so on.

Are you a keyboard person? Then Vivaldi is your delight. Quick Commands let you search through open tabs, bookmarks, history, settings and more with one single keyboard shortcut. Quick commands menu is highly customizable allowing you to create your own commands and run them instantly. Tired of unorganized tabs in your browser? Let the mess be cleaned up with Vivaldi. Organize your tabs using Tab stacks, a feature that you will fall in love with. It lets you group multiple tabs into one. It can’t get better than this – just drag a tab over to another for an uncomplicated grouping.

vivaldi-broswer

Requirements: –
Demo: https://vivaldi.com/
License: License Free

Good Email Copy From Great Companies

Posted · Category: License Free, Webmail

Their mission at Front is to help people communicate better. Usually, it means building the best communication software possible, but today they are doing something different. They are releasing a collection of emails that we think have great copy called Good Copy, so the everyone can get inspiration for their own communication.

You never have too many examples. The approach is really focused on the copy, not the design of the emails.That’s why it’s plain text: easy to search, easy to copy and paste the content and adapt it to your own “style”!

good-copy-email

Requirements: –
Demo: http://www.goodemailcopy.com/
License: License Free

Add Special Effects to Your GIFs with GIF Editor

Posted · Category: License Free, Tools

GIF Editor lets you add animated stickers, fun filters, and captions to your GIFs. Simply choose a GIF to get started by entering a GIF URL or any GIPHY link or by dragging and dropping your image files. On the Stickers tab, search our entire sticker collection to add funny or weird GIF stickers to your GIF. Just type in your search term or click on our suggested searches, and click on the sticker you want to add to your GIF. You can add as many stickers as you want!

Click the Filters tab, choose a filter, and decide whether to apply it to the whole background or the entire GIF. Click the Caption tab, then type your witty, relevant, or irrelevant caption text into the Caption field. You can share your GIF on Facebook, Twitter, Instagram, Pinterest, Tumblr, Reddit, text message, email, and everywhere!

giphy

Requirements: –
Demo: http://giphy.com/create/gifeditor
License: License Free

Page 1 of 111123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons