반응형
반응형
Clank: open source prototyping framework for mobile apps 

 

Demo : http://getclank.com/demos/

Clank is an open source HTML and CSS framework for prototyping native mobile and tablet apps. It uses modern CSS techniques, with Sass and Compass, and it’s component based so you can pick and choose what you need.

clank

 

 

 

 

반응형
반응형

Web Starter Kit: Tools for multi-device development

Google Developer’s Web Starter Kit is a boilerplate and tooling for multi-device development. It’s responsive, and includes a living component style guide, cross-device synchronization, and live browser reloading.

web starter kit


반응형
반응형

Intense Image Viewer: Fully full screen images

Intense Image Viewer brings “fully full screen” photos to your designs. When an image is clicked, it fills the entire browser viewport, allowing users to pan around the image by moving their mouse.

intense image viewer


반응형
반응형

Make your HTML5 video behave like a background cover image with this simple jQuery extension


CoverVid: HTML5 background videos


CoverVid is a simple jQuery extension that lets you use an HTML5 video as a cover-size background image on a website. It’s easy to use and scales to whatever the parent element is.

covervid



CoverVid

Make your HTML5 video behave like a background cover image with a simple jQuery extension. Very simple to use, just follow these few steps...

Drop the covervid.min.js file into your javascript folder and load it after jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="covervid.min.js"></script>

It is important to note that the video you target will use its' parent element to scale. With that in mind, we will create some simple markup and add some base styling to size the videos' parent/wrapper element.

<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/clouds.webm" type="video/webm">
        <source src="videos/clouds.mp4" type="video/mp4">
    </video>
</div>
.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Now, we simply call the coverVid() function on the video element, passing through the native dimensions of the video.

$('.covervid-video').coverVid(1920, 1080);


반응형
반응형

OuiBounce: A small modal library

/ Added on July 5, 2014 / Add to favorites

OuiBounce is a small library for creating modal windows that trigger when a user leaves your site. It aims to lower your bounce rate and increase your conversions, while offering a number of customizable options.

ouibounce

 

Increase your landing page conversion rates.

 

A small library enabling you to display a modal before a user leaves your website.

 

The philosophy behind this project

This library helps you increase landing page conversion rates. From my experience, you can expect a lift of 7% to 15% depending on your audience, traffic type (paid or unpaid) and copy.

Talking about copy... please use Ouibounce to provide value to your visitors. With tools like these it's very easy to create something spammy-looking.

Not sure what I mean by provide value? Here are a few ideas to get your creative juices flowing:

Demo / Examples

Installation

You have a few options to choose from:

  • Download the minified or unminified script and include it on your page
  • Get Ouibounce from cdnjs.com
  • Use Bower: curl http://bower.herokuapp.com/packages/ouibounce
  • Use NPM: npm install git://github.com/carlsednaoui/ouibounce.git

Note: Ouibounce is wrapped by a umd wrapper, so if you are using requirejs/amd or commonjs/browserify, it will still work fine.

 

반응형
반응형

Card: Friendlier credit card forms for your users

Forms - Javascript / Added on June 29, 2014 / Add to favorites

Card makes your credit card forms way friendlier with just a single line of code. It’s all pure HTML, CSS,  and JavaScript, with no images or other dependencies.

card

반응형

+ Recent posts