Page Preloading Effect with CSS3 & SVG

Page Preloading Effect with CSS3 & SVG

A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

HTML Builder with jQuery & Bootstrap

HTML Builder with jQuery & Bootstrap

HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

Features:

  • build custom HTML pages using predefined HTML elements
  • create your own custom HTML elements with ease
  • integrates seamlessly with CSS frameworks (like Bootstrap, Foundation, etc)
  • create multiple pages in one session
  • export the created pages (incl CSS, Javascript and images)
  • basic editing of written content (only available for non IE browsers)

AmaranJS : Create beautiful and stylish Notifications

AmaranJS : Create beautiful and stylish Notifications

AmaranJS is a jQuery plugin for creating beautiful and stylish notifications.

Bootstrap Rating : jQuery Rating Plugin

Bootstrap Rating : jQuery Rating Plugin

Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols.

jQuery Opacity by Mouse Location

jQuery Opacity by Mouse Location

Change an element’s opacity based on the mouse’s distance from its center.

The idea is to use some jQuery to define an invisible circle around the center point of an element, and to lower the element’s opacity as the user’s mouse gets closer to its center. The effect works best with an image that is close to square, but it will define the circle within any sized image.

Drag and drop form builder using bootstrap

Drag and drop form builder using bootstrap

I was working on a web survey type of project with a requirement that admin users should be able to build forms on the go, which will then be displayed to user to fill up and submit. while browsing i came across this nice script Formbuilder.

drag and drop form builder is simply a interface to build your own web forms, On each move it generates json output which you can use to rebuild the html form at run time.

Editable Listview : jQuery Mobile Plugin

Editable Listview : jQuery Mobile Plugin

A jQuery Mobile Plugin with an intuitive UI to add new list items and remove existing ones.

Datmenu – Responsive Menu jQuery Plugin

Datmenu - Responsive Menu jQuery Plugin

DatMenu is a premium quality jquery plugin for responsive navigation that is built with love and care.

  • Easy To use
  • Multiple Animations
  • Easy Modifications
  • Top Menu Bar
  • Retina Ready
  • Responsive layout
  • Compatibility (IE, Firefox, Opera, Safari, Chrome)
  • Unlimited Colors
  • Unlimited Styling Options

PgwMenu : Responsive Menu plugin for jQuery

PgwMenu : Responsive Menu plugin for jQuery

Responsive Menu plugin for jQuery and Zepto.

Features:

  • Full customization with the CSS file included
  • Fully responsive navigation menu (desktop and mobile devices)
  • SEO compliant
  • Less than 2 KB (minified and gzipped)

Scrolling Progress Bar with jQuery & CSS3

Scrolling Progress Bar with jQuery & CSS3

Today I will be creating an animated progress bar that updates the progress based on how far you scrolled into a content section.