Create Parallax Scrolling using jQuery

Parallax scrolling is a relatively new trend in web design. With this effect, you can create an illusion of depth on your webpage. Parallax works by making the background of the webpage scroll at a slower speed that the foreground, thus giving the scene a perceived depth. This is similar to the idea that when you are moving, objects nearer to you move at slower speeds- hence, the background appears to be behind the foreground.

So, how do we achieve this effect? Well, it’s quite simple really. Whenever a users scrolls on the page, we calculate how much the page has been scrolled. We then scale down this scroll-height and move the background image up or down accordingly. Here’s the result we wish to achieve.Continue Reading

Using Highcharts to make charts

High Charts-js

Charts are used to represent mass data with the help of visual aids. Initially, they were created manually, using calculators to do the math. Then came softwares like MS Excel and charts became an inseparable part of Powerpoint presentations during 1990s.

In this decade, with the internet boom, browsers have taken over everything. The strengthening CSS3 boosted the math-loving-techies to develop libraries for charts so that one need not switch to heavy software by automating the system of creation of charts using dynamic data from database and visualize it on the browser. The biggest advantage of this was to bring down the requirements to a bare minimum- one just needed a computer connected to the internet and a web browser to view your creations.

Long story short, we have tons of libraries now. Some very advanced libraries like D3.js and some very simple libraries like Chart.js. However, Highcharts is a combination of both. It is extremely easy to use, thanks to the documentation and fulfills modern requirements.Continue Reading

Create a Responsive Portfolio using Twitter Bootstrap

Responsive Portfolio with Twitter BootStrap

Bootstrap is a frontend framework developed by Twitter for design purposes. Apart from being responsive, it has got different components ranging from grid systems to icons set and hence surely lead the all the other frameworks. Bootstrap is open source and is the most popular repository on GitHub.

Today we will make a responsive portfolio using Bootstrap while taking care that it renders smoothly on tablet and mobile devices too. The working demo of this tutorial can be found here.

Getting Bootstrap

Bootstrap can be downloaded or compiled to your needs from their ‘Getting Started‘ page but I would prefer using the CDN option, because it’s faster. Also, it is advised to go through the page and get yourself accustomed with some bootstrap terms, including common classes. This page also has some examples of how to use Bootstrap classes. Be sure to check them out. Observe the responsiveness by shortening your browser at various widths and noticing the difference (don’t be lazy, do that). See how the rendering differs at different widths.Continue Reading

Sticky Headers- Challenges, Considerations and How to create one?

sticky-header

Among the many trends in web designing in recent times, you must have noticed that one very important one is having a header which does not disappear when you scroll down. Navigation is very important in a website (there are people who still believe in the three click rule) and a fixed header helps in the same.  UX experts have debated whether sticky headers at the top of the page, which are always visible to the user, are the thing to go with, but the end users usually prefer such headers.

What is a sticky header?

A fixed or sticky header is a horizontal menu which stays fixed at its place even when the user scrolls down. Therefore, if you need to access some item on the header, you don’t need to scroll right to the top as it’s visible to you at any position on the page.Continue Reading

Thinking beyond JavaScript frameworks

A question on StackOverflow talked about how to add two numbers in JavaScript. The best answer talked about using jQuery to do that and another even mentioned using some jQuery plugin for basic arithmetic!

“Using jQuery to add two numbers- screenshot”Coutesy- DOXDESK

Although this question was a parody and a bit exaggerated, the point that it tries to make is quite clear- good old JavaScript is being forgotten as people try to go for the painless option! The situation is so bad (and overhyped) that people ask questions such as Do I need to know JavaScript in order to learn jQuery on public forums like Quora.Continue Reading

Optical Character Recognition in JavaScript

In a world of ever increasing JavaScript libraries, you start to wonder if there is any task left that can not be done by JavaScript. Right from making 3D games in the browser to creating apps for your smartphones or running terminal emulators on your browser, the numerous JavaScript libraries available today help you in doing anything that you can imagine. In this post, we are going to have a look at a number of JavaScript libraries that help you in optical character recognition.Continue Reading

Create Basic Animation Using Kinetic Sprite

In this post I will show you how to create a basic animation with Kinetic Sprite.  For the newbies, KineticJS is a 2D canvas library. Canvas is an HTML5 element used to draw pictures.

Kinetic Sprite is one the easiest way to show animation on a webpage.  The KineticJS Library is an easy-to-go API to the cumbersome canvas library and has definitely simplified the tasks.

The detailed documentation of Kineticjs is definitely a good source to pick up things. In this tutorial, we are going to do little animation. It will comprise of a simple circle moving around a rectangle. Although this simple looking example can enable you to the vast capabilities of the library.Continue Reading