Blueprint : On Scroll Effect Layout with CSS3 & JavaScript

Blueprint : On Scroll Effect Layout with CSS3 & JavaScript

An on scroll effect template that animates the sides of sections once they are in the viewport.This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it. It works with adding a class for animating the two sides of a section. There is an example effect defined and also some media queries for dealing with smaller screens.

Bootstrap Lightbox with jQuery

Bootstrap Lightbox with jQuery

A simple lightbox plugin based on the bootstrap modal plugin.This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog.

On Scroll Header Effects with jQuery & CSS3

On Scroll Header Effects with jQuery & CSS3

You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.

Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.

Relocator.js : jQuery plugin to create Photo Gallery

Relocator.js : jQuery plugin to create Photo Gallery

Relocator is lightweight jQuery plugin to create photo gallery. this plugin will make the different size images to fit with the specified canvas without “size resizing”.

Features:

  • Plugin will resize the image and fit within the given canvas without “size resizing”
  • Also provide extra feature like show the title and animate the image description on mouse hover.

jinplace : jQuery Plugin for in-place Data Editing

jinplace : jQuery Plugin for in-place Data Editing

This is a plugin for jQuery for in-place editing of data on the page. The intended way to use it is for the editable fields on the web page to be marked up with HTML data-* attributes. The plugin call can be placed in a page template and when it runs it finds all the fields that have been marked as editable.

Features:

  • Primarily driven by markup on the page.
  • Can also use javascript configuration.
  • Framework independent.
  • Works with IE6-8 and all modern browsers, including mobile.
  • Supports text input fields.
  • Supports textarea input fields.
  • Supports select dropdown fields.
  • Data to be edited can be supplied as an attribute of the element, rather than using the existing text within the element.
  • Data to be edited can be retrieved from the server just before editing.

jSliderPro : jQuery CSS3 Responsive Slider

jSliderPro : jQuery CSS3 Responsive Slider
  • – Transition engine that can generate an incredible number of stunning effects. More possibilities incoming with the very next releases.
  • - No images limits and automatic memory management.
  • - Javascript callbacks to interface with other programs.
  • - CSS3 and HTML5 only.
  • - Fully responsive and cross browser compatibility from desktop PCs to mobile devices.
  • - Reference manual and hundreds of examples included.

jQuery Selectable Item Sequence

jQuery Selectable Item Sequence

Handles select/deselect action about items with events.

Two.js : Two-dimensional Drawing API

Two.js : Two-dimensional Drawing API

A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At the time of this writing two.js unfortunately does not support text or images.

Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library.At its core two.js relies on a scenegraph. This means that when you draw or create an object (a Two.Polygon or Two.Group), two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, translation, scale, etc..

jQuery Virtual Keyboard

jQuery Virtual Keyboard

Virtual Keyboard using jQuery UI.

Features:

  • An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused.
  • The user can then type and preview their input before Accepting or Canceling.
  • Add custom keyboard layouts easily.
  • Add up to four standard key sets to each layout that use the shift and alt keys (default, shift, alt and alt-shift).
  • Add any number of optional modifier keys (meta keys) to add more key sets.
  • Each meta key set also includes the shift, alt and alt-shift keysets – New in version 1.8.9.
  • Position the keyboard in any location around the element, or target another element on the page.
  • Easily modify the key text to any language or symbol.
  • Allow direct input or lock the preview window.
  • Set a maximum length to the inputted content.

jQuery Hide/show password plugin

jQuery Hide/show password plugin

It’s easy to take the “masking” of passwords (replacing characters with ••••) for granted.This plugin lets you easily hide and reveal the contents of a password input field. It’s based on a mobile design pattern documented in this post by Luke Wroblewski.

The plugin will not assume that touch is supported unless you tell it by specifying a value for the touchSupport option.