10 jQuery Plug-ins for Enhancing Typography

The popular jQuery plug-ins for enhancing typography allows one to fine tune their type and create some great effects. Using them not only the process simplifies but it enhances the innovative ability of the designers as well.

1. Lettering.js

Lettering

Not only is this plug-in amongst the most popular of web type plug-ins but also one of the simplest of the lot. Precise control over the headings is allowed by splitting up the text and wrapping every letter in a custom <span> element. Some cool effects can be created by carefully tweaking the kerning or by adding different CSS styles to every letter.

2. FitText.js

FitText

Responsive web designs allow content to scale down according to the viewport size of the user. Web text wraps up naturally as the container narrows down, but that leaves the headings and titles looking a bit poor, especially if it develops widows and orphans. FitText.js plug-in allows the headings to scale down in the same way as that of a responsive image, without dropping down the words on a new line.

3. TypeButter

As far as the 10 jQuery plug-ins for enhancing typography are concerned, this one here is the most popular of all. With this plug-in, one can override the default values of a browser automatically with visually stunning optical kerning. The plug-in supports Georgia, Arial, Helvetica, Verdana and Times by default, but one can also roll their own if required.

4. Bacon

Text can be wrapped around bezier curves with this plug-in, giving the user advanced desktop publishing capabilities directly within their website designs. Bacon allows the user to style up the text cleanly with a coordinate series.

5. Kerning.js

Kerning

This plug-in allows the user to do more than just a set of individual letter spacing. Really cool effects can be created with features like colour, transformations and size adjustment.

6. Hatchshow

This plug-in helps in achieving the exact effect as that of the topography posters where every line is scaled to its exact width. It also automatically adds a <span> to every line of the text and scales down the font size which allows each line to end up in the exact width.

7. Arctext.js

This plug-in might come in handy when one is planning to design a page with a mind- blowing header or recreating an old logo effect. It does exactly what its name suggest, allowing one to set their text on an imaginary arc.

8. slabText.js

It combines the core ideas of Hatchshow and FitText and joins them together. It helps in creating equal measures by splitting itself into new rows and scaling down the font size.

9. jqlsoText

jqlsoText

This plug-in specializes in developing pseudo-isometric effects. It means that one can give their text different size related effects like bulges. It is a great plug-in to mimic vintage layouts or to create cool headlines.

10. Baseline.js

It scales the image dimensions into a number of desired baseline figures.

10 jQuery Plug-ins for Layout and UI Enhancements

Dynamism often seems insufficient to describe the character web designing has acquired with time. This is why jQuery Plug-ins for Layout and UI Enhancements can be of immense help where CSS alone cannot meet the bill. In fact, jQuery plays a vital role in the transformation of websites from sheer portal to what they are considered today. Described here are 10 jQuery plug-ins for the purpose.

1. Background Canvas

Background Canvas

This plug-in injects HTML5 CANVAS-like canvas element behind the block element and offers function to draw shapes on it. The canvas element become visible when the div background is turned transparent, it provides a new div background.

2. Bookblock

Bookblock plug-in

Bookblock plug-in can create booklet-like components and allows page-flip navigation. It can handle both texts and images. It transforms the structure whenever required and includes overlays such as shadows to make it realistic.

3. Customizer

Customizer jQuery plug-in

Wolf Customizer jQuery plug-in for UI and layout enhancement can automatically layout the content in newspaper format. Developers can specify either number of columns or width of columns.

4. Freetile.js

Freetile

Freetile enables developers to organize the contents of webpage in a responsive, dynamic and efficient layout. Its application to a container element helps in tight arrangement of content and hence better utilization of screen-space. Assemblage used Freetile as its layout engine for about 2 years.

5. Gridster.js

Gridster

Gridster is a jQuery plug-in which is used to create intuitive layouts of elements that span multiple columns. Developers can even add or remove elements dynamically from the grid. Moreover, it is licensed by MIT.

6. Hidden Position

The function of Hidden Position is same as that of jQuery layout and UI enhancement plug-in position except that the former can position elements before showing them. Only the addition of hidden to the code takes care of the requirement.

7. jQSlickWrap

jQSlickWrap is the plug-in used to wrap text around a curved or irregularly shaped image instead of wrapping around the bounding box of images. It is effective on Chrome, Firefox, Opera and Safari web browsers.

8. RCarousel

This continuous jQuery UI carousel is simple to use, highly customizable, offers many options, supports all elements, provides images with links, contains multiple carousels and has simple API and much more. It even supports IE6.

9. Turn.js

This JavaScript library takes full advantage of HTML5 to make the content on the website appear like a real magazine or book. It is one of the most suitable jQuery UI and layout enhancement plug-in for catalogues, magazines and books based on HTML5.

10. UI Layout

UI Layout plug-in is simple to use, has unlimited layout capability, offers dozens of options and total CSS control and is compatible with interface widgets. Custom button, collapsible, resizable, hiding and sliding panes, headers and footers, hotkeys, demo mode, etc. are some elements available with this plug-in.

The Top 5 jQuery Plug-ins for Scrolling Effects

Websites these days are designed in a much more creative manner and these 5 jQuery plug-ins for scrolling effects make sure that they are provided with an attractive interface so as to appeal to the viewers.

1. SuperScrollorama

SuperScrollorama

This plug-in is Scrollorama’s extension and using this developers can integrate amazing scroll animation effects within their website. Different types of transition effects can be added like unpin, wipe, zoom, rotate, pin, fly and fade. Apart from that, other added effects are also available like smushing, scaling, page wipes, horizontal page slides, coloring, flinging, bounces, etc. Developers are also given the opportunity to set targets regarding the appearance of an element in view port. Multiple tweets timeline can also be created along with setting the duration for transition effects.

2. Stellar.js

Stellar

With the help of this jQuery plug-in any scrolling element can be provided with parallax scrolling effects. The plug-in is extremely easy to use as it operates by adding in complex attribute data to mark-up. Developers are given the opportunity to immaculately align the background and elements. The best part about this plug-in is that elements can be added with various scrolling speeds through the inclusion of attributes and re-positioning the background image of the element while scrolling.

3. Scrolldeck

Scrolldeck

Different scrolling presentation decks are offered by this plug-in for websites. The slides can be changed by making use of the right/left arrows. A plug-in of this type is ideal for websites where the web pages are displayed through slides. The slides on the website can be animated through addition of specific classes to elements. This plug-in allows developers to create websites with full-screen images, animation and parallax effects.

4. jQuery Scroll Path

jQuery Scroll Path

Custom scroll paths can be defined with this jQuery plug-in. Canvas flavored syntax is used by the plug-in for drawing paths by making use of procedures like arc, lineTo and moveTo. It is available with custom scrollbar that helps with drag and click scrolling. Developers are provided the right path through enabling of canvas overlay while initializing the plug-in.

5. Spritely.net

Spritely

Spritely.net is used for the creation of dynamic characters and animated backgrounds on web pages. When the website does not support flash, this plug-in can be used as the alternative. The good part is that it is simple, lightweight and perfect for websites using only JavaScript and HTML. Developers are given the opportunity to animate objects and even make them fly on top of the texts or animate backgrounds without affecting various elements within the web page. The plug-in is compatible with Android, iPad, iPod and iPhone as well as top browsers like Safari, IE 6+, Opera, Chrome and Firefox.

All these popular and effective jQuery plug-ins for scrolling effects offers the website with a cool, vibrant and creative look to make it more appealing.

Some Useful jQuery Plug-Ins

The open source language of jQuery has become quite popular these days for the development of websites as it can easily be integrated with other programming languages. The jQuery sliders and plug-ins come with different features ideal for integrating within the websites. Provided below are some of the useful jQuery plug-ins used quite frequently by web developers.

Turn.js

With the help of this jQuery plug-in it is possible for users to make the web content look like an e-book or magazine. This provides an opportunity to get the real feeling of book reading while reading on the web. The plug-in is especially useful for e-commerce store owners and online book sellers. Apart from that, one can develop a bookshelf with Turn.js from where books can be clicked and read.

Blocksit.js or Dynamic Grid Layout

For those willing to make their websites look like pinterest.com this is no doubt one of the most useful jQuery plug-ins. The Dynamic Grid Layout or Blocksit.js helps in the repositioning of HTML elements through usage of CSS absolute solution feature. Apart from that, it is also capable of calculating left and top positions for element depending on certain criteria.

Percentage Loader

The percentage loader plug-in helps in the creation of beautiful and interactive progress bars. Users can even load simultaneously multiple percentage loaders. Another great feature of this plug-in is that it can be used like a controller similar to that found in an iPhone.

Page Scroller

Among some of the useful jQuery plug-ins, the page scroller is definitely worth mentioning. Scroll path creation for web page content can be achieved by using this plug-in. This plug-in makes use of canvas flavoured syntax for creation of lines and arcs within a web page.

jQuery Plug-Ins

Noty.js

This plug-in is actually used for the creation of information, success, warning, error, confirmation and alert type messages. Alert boxes with great designs can be created with this plug-in. The best part about this plug-in is that the developer can place the alert boxes on different positions of the browser window. It is also possible to customize the speed, button, animation and text.

Flippy Effect

The flipping feature present within a web page can be brought about with this jQuery plug-in. The web page developers can make use of this plug-in to flip all HTML elements present within the page. Integration is quite easy and the plug-in is also cross browser compatible.

FitText

One of the most useful jQuery plug-ins is FitText. With the help of this plug-in, the text within the web page can be fitted as per the screen resolution. This plug-in is mostly used for large sized texts which are hard to fit within small screens. Its main function is to change the font size depending on the screen resolution. Tablet friendly and mobile friendly websites are generally created with this feature.