WebAppers

/ best free open source web resources /

Shopify

Adding Scrolling Effects with Scrollme jQuery Plugin

Posted · Category: License Free, Tools

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.

scroll-me

Requirements: jQuery Framework
Demo: http://scrollme.nckprsn.com/
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

Free Download: Mac OS X Yosemite UI PSD Template

Posted · Category: License Free, PS Tutorials

Stack contains the best Mac OS X Yosemite UI PSD Template. Pixel perfect elements designed to help designers and developers craft great Mac OS X Yosemite application designs. Every single layer is scalable and can be easily implemented into your mock ups.

Stack has been carefully fine tuned for you. Impress your clients, investors and colleagues by utilizing this toolbox. *Obviously Yosemite is in beta and is subject to change. They will be updating this PSD periodically.

You can get Stack for FREE with just an email address. Just name your price $0 – *Payment is optional and NOT required.

stack

Requirements: Photoshop
Demo: http://34orange.com/
License: License Free

Pancake.io Makes Static Sites Easily

Posted · Category: License Free, Tools

Pancake is built on a simple idea — to publish static sites easily, whether from your Dropbox account or from a git repository. Pancake reads files from your Dropbox folder, and makes them available from the web.

You can embed an automatically updating list of your Dropbox files on any website. There is a Built-in Generator that convert text files automatically. You can also edit your Dropbox-hosted site from their web interface.

pancake-io

Requirements: -
Demo: https://pancake.io/
License: License Free

Creative and Modern Inline Anchor Styles & Hover Effects

Posted · Category: License Free, Tools

Codrops has shared an article showing some inspiration for inline anchor styles. There are creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.

There are some interesting things we can do to them and you’ve surely spotted already some of these around the web. Mostly involving pseudo-elements trickery and also some SVG magic (last two styles).

Please note that this is for your inspiration, so make sure to view it with a state-of-the-art browsers. Some browsers don’t support transitions on pseudo-elements.

hover

Requirements: -
Demo: http://tympanus.net/Development/InlineAnchorStyles/
License: License Free

200+ PSD Blocks and Elements for Responsive Sites

Posted · Category: License Free

Sally Blocks is a huge free set of ready to use elements and components for simple and fast creating of responsive web pages. Package includes PSD file with all Blocks in 4 resolutions, UI elements and styles file. We offer you Blocks with descriptions, features, contacts, portfolio and much more. With it’s help you can quickly construct any kind of landing page.

sally-blocks

Requirements: -
Demo: http://pixelbuddha.net/freebie/sally-blocks
License: License Free

Crosswalk – Web Runtime for Ambitious HTML5 Apps

Posted · Category: Framework, License Free

Many HTML5 applications need more than just a browser, they need all the features of a native application. Crosswalk is a web runtime for ambitious HTML5 applications. It provides all the features of a modern browser, combined with deep device integration and an API for adding native extensions. It is especially suited to mobile devices, with support for both Android and Tizen.

By using Crosswalk, an application developer can: Use all the features available in modern web browsers: HTML5, CSS3, JavaScript. You can also add custom extensions to an application, to leverage platform features not exposed by Crosswalk or the standardized web platform.

crosswalk

Requirements: -
Demo: https://crosswalk-project.org/
License: License Free

How to Create Adaptive Placeholders with CSS

Posted · Category: Forms, License Free

Danny King has designed an interactive placeholder thing for his forms and wrote it entirely in CSS. He has shared how he designed that placeholder and how it manages to adapt to user input.

Before he came up with the Adaptive Placeholder, it was just using a normal one. he liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared. The person who enters a value first isn’t always the same person who sees it later. To solve this problem he tried making the placeholder persist through the typing.

palceholder

Requirements: CSS
Demo: http://blog.circleci.com/adaptive-placeholders/
License: License Free

Free Download: 220 Line Icons in PSD Format

Posted · Category: Icons, License Free

Catalin Fertu is an Interface Designer. He has shared a nice set of 220 line icons in PSD format. You can use them as you wish. All the icons are royalty free for personal and commercial use.

new-icons

Requirements: -
Demo: https://dribbble.com/shots/1563947-Free-Icon-Set
License: License Free

Find Daily Colorful Inspiration with The Day’s Color

Posted · Category: Color Schemes, License Free

Everything you see contains a palette. Some beautiful. Some ‘ugly’. Some dark. Some light. Some hot. Some cold. But they are all inspiring. They are all engaging. Color can adjust our perception. It can effect the way our food tastes. It can increase the emotional and intuitive level of an experience.

The goal of The Day’s Color is to find colorful inspiration from things that surround us. These colors have inspired thought, art, music, memories. Everything. These colors have conjured thoughts outside ourselves. Tapped into things that we may not understand, at first. But, in a sense, make things so much clearer.

the-days-color

Requirements: -
Demo: http://www.thedayscolor.com/
License: License Free

Page 6 of 97«2345678910»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons