Creative Loading Effects with CSS3 & JavaScript

Creative Loading Effects with CSS3 & JavaScript

Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. There might be actions where this might not be adequate, but in some situations it might be quite fitting and amplifying for the overall design.

jQuery One Page Scroll Plugin

jQuery One Page Scroll Plugin

Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin.One Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers.

Automatically generating a table of contents with a smooth scroll effect

Automatically generating a table of contents with a smooth scroll effect

I am writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We’ll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you’re writing a help file for your product, or an FAQ it’s just as applicable. This tutorial also serves as an introduction to jQuery basics.

Super Simple Text Rotator with jQuery

Super Simple Text Rotator with jQuery

A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little to no markup.

CodingJack’s jQuery Percentage Preloader

CodingJack's jQuery Percentage Preloader

In the days of Flash we had lots of beautiful percentage-based preloaders. But when websites starting switching over to HTML/CSS/JavaScript, they’ve become almost extinct. Percentage Preloader isn’t ground-breaking technology. Instead, it’s a a clever script that when used correctly, is a fresh alternative to the typical infinite-based preloaders we’re so used to seeing these days. Percentage Preloader is what developers typically call a “bulk loader”. If you only have a one or two assets you need to preload, Percentage Preloader is not for you. But when used with a large number of assets (5+), Percentage Preloader works great at creating the illusion of progress.

Features:

  • Dark and Light Color Schemes
  • 8 Pre-Built Preloaders
  • Designed with CSS making them easy to edit and retina-ready.
  • Preload all the images and iframes on your web page by adding a simple data-attribute to your images.

jQuery Wheel Menu

jQuery Wheel Menu

Wheel Menu is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website.

jQuery plugin for caching forms using HTML5 local storage

jQuery plugin for caching forms using HTML5 local storage

In this tutorial we’ll be utilizing the localStorage mechanism to store the current state of a form. This means that when the page is reloaded or the user re-opens the page after closing it the form will be populated with the previous values. For improved complexity, we’ll be storing the data as serialized JSON strings.

Superslides : jQuery Full Screen & Hardware accelerated Slider

Superslides : jQuery Full Screen & Hardware accelerated Slider

Superslides is a full screen, hardware accelerated slider for jQuery. I wasn’t happy with the state of full screen sliders, so naturally I built my own.Superslides is compatible with the jQuery Animate Enhanced plugin. Simply include it before this plugin and it will automatically smooth out transitions using CSS instead of JavaScript.

Facebook Style Profile Info Tooltip using jQuery & CSS

Facebook Style Profile Info Tooltip using jQuery & CSS

Here I had explained a very basic version of facebook profile tooltip with all features they have asked.You can learn how to design a facebook style profile tooltip with cover page,profile picture, name, headline, add as friend & send message button..

You can use this script in your web & social networking projects with little customization.

Animated Buttons using jQuery & CSS3 Transitions and Transforms

Animated Buttons using jQuery & CSS3 Transitions and Transforms

As CSS3 is gradually more supported over popular browsers, CSS3 Buttons become great looking replacements for image and script heavy buttons. These buttons use CSS3 transitions and transforms to animate morphing icons to represent different functions. This is a simple demonstration of 5 buttons representing functions like Demo, Download, Digg, Email, and RSS. I may make more if the response is very positive about these buttons.