You know what the Web needs? That’s right… more animated text!
If you’re looking to add some motion to the copy on your website, be it as simple as page headings or vital as custom call out sections on landing pages, consider the use of Textillate.js – a jQuery plugin for creating very appealing CSS3 text animations.
Textillate is built on top of animate.css and lettering.js libraries (two of our favorites), and offers a relatively easy to use and interactive way to animate text. The plugin provides controls for in-animation and out-animation – how the text appears initially and how it leaves the view of the user.
There is one thing that every website, no matter what kind it may be, always wants to see: more user interactions.
However, despite the universal desire to increase interaction on one’s website, the route that each designer and/or developer takes to make it happen can vary greatly. Often, their choices are dependent on the type of site (e.g. content-based, e-commerce, service providers, etc.) or brands that they’re working with. Thus, there are many different ways to go about enticing visitors to engage with a website.
So if you’re one of the many webmasters, designers or developers interested in improving user interactions on your website, check out these 10 cool jQuery plugins designed to do just that, either through easier navigation, greater customization or added functionality.
jQuery Page Peel
Like it says, this plugin makes it easy to create a page peel animation for you Web page that sits at the top of the screen on the right-hand side. When users hover their cursors over that area, the page will peel down and reveal more content behind it. While many websites like to place advertisements behind this peel, it can be used in more effective ways to draw attention to extra content or other website features.
Image Overlay Plugin
Images are a great way to capture the interest of visitors, especially if it’s their first time on your site. With the Image Overlay Plugin, you can reel them in, and then present more text-based information about the pictures that will appear (see image below) when users hover over the images. This way, you can still share information about the images without adding distracting, unnecessary text to your Web page.
jSlideRelatedPages is a scroll sliding plugin that helps you engage users when they get to the bottom of your Web pages by displaying a sliding animation (see image below) when they get down there. On the slider is a list of related pages on your site that the user may also be interested in based on the content of the page they are currently on, so that you can keep them on your site and looking at more of your content for a longer period of time.
One of the more overlooked reasons for early site abandonment is poor readability for certain users because of the font size on a particular page (or set of pages). The jFontSize plugin helps to alleviate this problem by making it easy to create those “A+” and “A-“ buttons that some site’s have that allow users to alter the site’s font size, which will make your website far more accessible to a much wider range of visitors.
Users are so comfortable with accessing the Internet on mobile phones and tablet devices these days that it may behoove you to make your whole website mimic the mobile scrolling experience on desktop browsers. Luckily, the Overscroll jQuery plugin does just that by adding a “draggable drift” to overflowed DOM elements and a set of fading “thumbs” to a site. In other words, it allows users to simply click on the site and drag their mouse to move around the site, just like they would using their fingers on an iPhone. While Overscroll works best with Safari 5+, Chrome 5+ and Firefox 3+, it says it should work just fine on pretty much any modern browser.
SimpleModal gives users a powerful interface for modal dialog development that offers greater flexibility to develop whatever they can envision in the box, while mostly doing away with many cross-browser user interface development issues. The real benefit is that designers and developers can totally customize these modal boxes to fit the style and theme of a website, while also being incredibly easy to implement and manage.
Anyone who has spent an inordinate amount of time getting lost scrolling through Instagram or Facebook photos will tell you about how great image galleries are for capturing a user’s attention and encouraging them to interact with your site. If you want a simple way incorporate a thumbnail image gallery onto your website, look no further than PikaChoose (cute, no?), which is lightweight and super easy to integrate into any website.
This plugin is ideal for any website that is using an iFrame to display a Web page, image(s) or form(s), especially if the iFrame uses a fixed height, which can be very inconvenient for users, as they’re difficult to resize across different browsers. That’s no longer a problem though thanks to this plugin, which makes it easy to resize iFrames by equipping them with a grip bar.
In 2013, more users than ever are going to be accessing your website from mobile devices, so responsive design is going to be absolutely essential to ensuring all of your visitors are going to be willing and able to interact with your site. This lightweight plugin will scale to everything from small smartphone screens to large desktop monitors with minimal dependence on jQuery for convenience. It’s uses pure CSS styling and CSS3-based transitions, meaning it can be heavily customized, and it comes compartmentalized so that developers can use only the features that they want.
Single Drop Down Menu
Add multi-level navigation menus to your website that will keep users interacting with your tabs and links while they search for the content that they came looking for. The Single Drop Down Menu (or Single-ddm) applies mouseovers to a preformatted list and a timer that lets users customize the drop down menu’s stall time. It also supports metadata, meaning each list can have its own special features without multiple function calls.
Because who doesn’t want a digital velociraptor run across their website, complete with a raptor screeching sound? It’ll get your visitors’ attention, at least.
Instagram is wildly popular among Web users these days and as you might expect, developers - and marketers, of course - are looking for creative, interesting and inspiring ways to leverage the photo sharing service for their own benefit.
Spectragram, a jQuery plugin for the Instagram API, is one way to make that happen.
Created by Adrian Quevedo, Spectagarm can grab anything published by a particular user, the most popular media of the moment, or recently tagged media directly from the Instagram API. Results can be displayed on list items or any other HTML tag defined. It’s also possible to define the size of the pictures (small, medium, large). To use Spectagram, however, you’ll need to use your own Instagram application ClientID and AccessToken.
Spectagram is licensed under MIT License so it can be used in commercial projects as long as the copyright header is left intact.
But jQuery is also attractive because it offers a wide selection of possible design elements, features and functionality that developers can include on their sites. This can be anything from parallax scrolling to slideshows to responsive text; the possibilities are virtually endless.
Most jQuery plugins aren’t necessary, or even all that useful, for every website, since they tend to cover a broad range of objectives, but any developer that wants to create a robust, feature-rich website, or just one that is visually striking, will be able to find at least a couple of plugins that can help him or her do just that.
Here at Website Magazine, we’ve compiled a list of some of our favorite jQuery plugins for our dear readers to check out, each of which can add distinct elements to a website that help it come to life and appear more engaging to users.
Of course, there are plenty of other jQuery plugins available. What are some of your favorites? Let us know in the comments section!
Simple Parallax Scroll
Parallax scrolling is one of the hottest design trends of 2012, and there is no shortage of plugins that can help you achieve this entertaining effect, wherein the background image of a Web page translates slower than the foreground content as a user scrolls. This technique by Mohiuddin Parekh is a simple way (it’s even in the name) to incorporate this cool feature on your website, and starting engaging more users, in about 20 minutes. And once you have parallax scrolling to show off, you’ll be the coolest website in school.
Users are accessing the Internet from a plethora of different devices these days, even more than just five years ago. During that same span of time, images have become the most popular type of content on the Web. Naturally, this has led to a need for responsive image galleries that can be easily viewed and interacted with on any device. However, building one can be difficult because of the myriad factors one must consider, such as layout or features. Fortunately, there is the Gamma Gallery plugin, which takes into account and provides suitable image sizes for fluid grid thumbnails and full image views.
This plugin adds a neat feature to websites that lets developers move elements in a “card-like fashion” (think like holding a hand of playing cards during a game of poker) and spread them out like a deck of cards on a table using CSS transforms to rotate and translate the items. Users aren’t just bogged down by one or two spreading options, though; the plugin presents a variety of possibilities, such as moving items laterally or rotating them like a fan. Baraja will provide your website with a unique interactive element to delight and engage your visitors.
A jQuery Heat Map
Heat maps are an excellent way to track the actions of users on your website. They allow you to follow their clicks and make design changes or decisions based on the actions that most users are likely to make. The jQuery Heat Map is an easy way to create a heat map for a website that tracks clicks and then displays the click pattern using semi-transparent dots on an overlay, so you can quickly identify the most popular aspects of your Web page and fix anything that is being neglected.
jQuery Snow Falling Plugin
Get into the winter spirit – and impress your visitors – with this plugin that adds a snow falling effect to your Web page(s). With this plugin, users create one snowflake initially and then clone that snowflake at a time interval and then add random value properties to each individual flake, all in less than 1 KB minified. It’s an easy way to spruce your page up for the holiday season.
jGravity is an interesting plugin that add “gravity” to elements on a Web page, meaning developers apply a gravity effect that drops all of the selected elements to the bottom of the page. Developers can either add the effect to all of the elements on a page, or choose specific elements to receive the gravity treatment. This is a fun way to add a level of interactivity to your page, but it can also help you highlight important content (or, on the other hand, do away with superfluous content by dropping it down and letting users focus on the important stuff).
Another page element to remember when considering responsive design for a website is text. The WideText plugin offers up a full width responsive text solution that is both lightweight and easy-to-use. Now, you’ll never have to worry about visitors seeing your whole message, no matter what device they’re viewing it from.
Create visually stimulating, interactive full screen slide shows on your site that you can use to show off your image content with the Superslides plugin. Best of all, this solution was designed with flexibility in mind, so it’s highly customizable. It also offers a handful of configurable options, such as auto play with a delay, slide transition speed and slide easing. If your site is heavy on image content, using Superslides is a great way to display it.
Keep your website clutter-free with the pageguide.js plugin, which provides information to users via an interactive visual guide that can teach them about features or functionality. It will attach CSS “pseudo elements” to the features that define your pages, providing numbered arrows on the top, bottom, left or right of what you want to highlight. The guide will even scroll for users. Developers are given control over the style of the guide, and they can track the actions of users by simply including their tracking codes from services like HubSpot or KISSMetrics to find out which aspects of the guide are of greatest interest to their visitors.
Take your images to the next level with the PicStrips plugin, which splits the picture into any number of strips with whitespace between each one. Users are not only able to specify the number of strips they’d like, but also the white space between each one and the vertical whitespace at the top and bottom of alternate strips. This simple alteration helps your pictures stand out from similar content and adds some extra flair that will capture the attention of your audience and give your images new life.
Your average Web user is looking for richer and more engaging interactions within their digital experience. That is challenging on both creative and technical levels but there are solutions emerging which make quick work of this more demanding environment.
There is a version (3rd release) available on GitHub, but the fourth release of Turn.js offers several more interesting (and essential) features including using pages of different size, zoom effects, navigation bars and more. The license cost for the 4th release of Turn.js is $99 for up to 5 domains and $499 for unlimited domains.
Always on the lookout for the next great trend in Web design leads us down some rather interesting paths.
Our most recent discovery will likely be the coolest thing you’ll see today – Gridster.js – a drag-and-drop multi-column grid.
Created by Ducksboard, Gridster is a jQuery plugin that enables designers and developers to build intuitive “draggable” layouts from elements spanning multiple columns. Instead of trying to explain it, check out the demo on the official site.
Several customization features and options are available that are definitely worth of a review. Designers can leverage the API object to add a new widget to the grid, remove a widget or create a serialized array with the elements positions. Again, this is definitely going to be the coolest thing you see today.
A new version of jQuery has been released (v1.8) - and just nine short months since jQuery 1.7 was made available. What lucky designers and developers we are! With a smaller code size (approximately 100 bytes smaller than 1.7.2) and with more than 160 bugs closed, let's take a closer look at JQuery 1.8:
- The Sizzle selector engine has been re-architected and is now faster and more efficient. Most browsers have querySelectorAll method but there have been some (serious) cross-browser implementation troubles which 1.8 solves and managed to provide coded fallbacks for IE6/7.
- jQuery 1.8 now automatically adds required prefixes when a CSS property in methods such as .css() or .animate() are used. This update makes it possible to apply a single transform and -webkit-, -moz-, -ms- and -o- prefixes will be pre-pended.
- Improved modularity is also a noteworthy feature in the 1.8 build. It's not possible to reduce the already small size by using the grunt-based build systems to remove features that are not required.
The jQuery 1.8 code is available for download here:
(compressed and minified, for production)
(uncompressed, for debugging)
When I first started working on the Web in a professional capacity, there really wasn’t much you could do to dress up your website as it related to font choice.
Web designers had little control over fonts in the past, but that has changed dramatically over the past two years as the pace around jQuery development accelerates and responsive design becomes the norm (or at least more normal).
jQuery can do a lot of things, but it’s really just a development library. A library that can help designers do some tremendously creative things.
If you have the right jQuery plugin and can effectively balance your creative design skills with the technical requirements and usability demands, there is no greater opportunity to inspire and impress users.
But the amount of available jQuery plugins, thanks in part to its open nature and simplified development schemas, can make identifying the “right” jQuery functionality for your own site or the sites you work on as a designer a bit cumbersome.
Have no fear, because Website Magazine is here!
Below you will find two jQuery plugins that have entered into our design radar the past few weeks, and will likely (no, absolutely!) blow your mind. We also believe that these will inspire you to greater design heights, so let's get started:
This jQuery plug-in allows designers to create Web pages with multiple fixed panels. The panels essentially unroll with an effect similar to that of a curtain rising. Users can navigate through the keyboard, scrollbar or mouse wheel. Designers can also add fixed elements or “steps” inside each panel.
There is a seemingly endless number of jQuery sliders – but trust us, this one is different. Sequence.JS features some jaw-dropping transitions using CSS3, supports responsive layouts and modern browsers, and it even works with touch devices and has swiping functionality.
One more thing! Do you know of any jQuery plugins that others should know about? Don’t be shy, share it with other Website Magazine readers by commenting below. We’re currently assembling a list of the top design-focused jQuery plugins and, as always, we could use your help!
Thanks, and please enjoy these jQuery plugins of the day!
So, do you want your website to be properly displayed on mobile devices and tablets? If yes (and we’re pretty sure it is ‘yes’) then it is time to think about how to make your layout more responsive. Being one of the most discussed web design trends of the year of 2011 responsive web design keeps moving forward by providing new efficient solutions for web developers and webmasters. Today this trend will be presented by the awesome jQuery plugins for responsive design. We’ve tried to put together various types of plugins that will help you to properly display your content on mobile devices, and by content we mean not only images but also fonts, videos and even grid system to make things look nice on small screens. Also don’t forget to look trough our article that would guide you through the basics of responsive web design – How to Get Started with Responsive Web Design. Now let’s get back to our list of jQuery plugins.
Responsly jQuery plugin perfectly works with laptops, tablets and mobile device screens. It has pure CSS styling and is compatible with all modern browsers (IE drops transition support only). It is a very lightweight plugin that can be easily customized be editing CSS file.
* * *
* * *
FitText makes font sizes flexible which means that all headlines on your website will be scalable. This plugin is another step that will help you make your layout more responsive.
* * *
This is a very simple and small jQuery plugin which will convert menus into a select element for mobile devices and low browser widths.
* * *
Adaptive images is efficient solution that allows you to deliver a mobile friendly version of your website images. This plugin detects screen size and creates appropriate re-scaled versions of the images on your web page. No mark-up changes needed.
* * *
jQuery Mansory is a grid layout plugin that arranges elements vertically reducing huge vertical gaps. So, this plugin creates nice mobile-friendly layout.
* * *
This is a lightweight jQuery plugin that was created with only one aim in mind – to properly display embedded videos by using fluid width.
* * *
This plugin creates a mobile-friendly dropdown menu instead of classical row of links in your navigation menu.
* * *
This is a special plugin created to facilitate that notoriously famous A+/A- button that allows you to increase or reduce the font size in desktop versions of some websites. Basically jFontSize adapts fonts on website for the resolution of your device’s screen.
* * *
rlightbox is a jQuery UI plugin that displays various content including images, YouTube and Vimeo videos. Among its features we must mark out Panorama and Live Re-size.
* * *