Splitchar.js : jQuery Plugin to Style Half Character

Splitchar.js : jQuery Plugin to Style Half Character

Splitchar is an easy to use jQuery plugin that allows you to style half of a character.Style and design the first, second or both halves of a character.

Rotating Words using CSS3 Animations

Rotating Words using CSS3 Animations

In Modern Web Design, Typography plays a very important role in enhancing the looks of a website. For modular Web Design, selecting right effects is not an easy task. In today’s time, First Impression is the Last Impression. In this tutorial, we’ll create some different types of Animation Effects on rotating words in a sentence.

Wysiwyg.js : jQuery Wysiwyg Editor

Wysiwyg.js : jQuery Wysiwyg Editor

‘wysiwyg.js’ is a (minified) 12k contenteditable-editor with no dependencies. There is also a (minified) 10k jQuery-plugin ‘$.wysiwyg()’ to create a full-featured editor.It does only:

  • Transforms any HTML-element into contenteditable
  • onselection-event: e.g. to open a toolbar
  • onkeypress-event: e.g. to handle hotkeys
  • onplaceholder-event: show/hide a placeholder
  • .bold(), .forecolor(), .inserthtml(), … functions

okzoom : jQuery Magnifying Zoom Plugin

okzoom : jQuery Magnifying Zoom Plugin

OKZoom is a jQuery plugin that produces a portable loupe of variable size and shape. All other jQuery ‘zoom’ plugins we have encountered implement a square magnifying area. Ours is a circle.

Fixed Navigation Transition with CSS3 & jQuery

Fixed Navigation Transition with CSS3 & jQuery

Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.

tFigure : CSS3 Image Hover Captions

tFigure : CSS3 Image Hover Captions

Small collection of 5 CSS-only animated Image Captions. This kit stuff will save you a lot of time when creating websites! They’re really easy to use and have very nice interfaces.

scrollMonitor : jQuery Plugin to Monitor scrolling Elements

scrollMonitor : jQuery Plugin to Monitor scrolling Elements

The scroll monitor allows you to receive events when elements enter or exit the viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element’s visibility and location relative to the viewport.

The code is based on vanilla javascript and has no external dependencies. Except if you want to put it in the head of the document, then you’ll need jQuery for the DOMContentLoaded event.

Demos:

Expandable Project Presentation with CSS3 & jQuery

Expandable Project Presentation with CSS3 & jQuery

A gallery of project preview images that expand on click to reveal the full case study.In this example we take advantage of CSS Transitions and Transformations, and of the background-attachment CSS property to create a “diving-in” effect and reveal additional content for each project.

Unite Gallery : Responsive jQuery Gallery Plugin

Unite Gallery : Responsive jQuery Gallery Plugin

The Unite Gallery is multipurpose javascript gallery based on jquery library. It’s built with a modular technique with a lot of accent of ease of use and customization. It’s very easy to customize the gallery, changing it’s skin via css, and even writing your own theme.

Features:

  • The gallery play VIDEO from: Youtube, Vimeo, HTML5, Wistia and SoundCloud (not a video but still )
  • Responsive – fits to every screen with automatic ratio preserve
  • Touch Enabled – Every gallery parts can be controlled by the touch on touch enabled devices
  • Responsive – The gallery can fit every screen size, and can respond to a screen size change.
  • Skinnable – Allow to change skin with ease in different css file without touching main gallery css.
  • Zoom Effect – The gallery has unique zoom effect that could be applied within buttons, mouse wheel or pinch gesture on touch – enabled devices
  • Gallery Buttons – The gallery has buttons on it, like full screen or play/pause that optimized for touch devidces access
  • Keyboard controls – The gallery could be controlled by keyboard (left, right arrows)

NoFi : Detecting offline States with HTML5

NoFi : Detecting offline States with HTML5

NoFi, for when there’s no WiFi. Uses the native HTML5 API to detect if a user’s internet goes offline and emits a custom offline event for your callbacks.