jQuery is a collection of web tools, a feature-rich library, written in JavaScript. It was designed to aid in the development of websites. In a lot of cases, using jQuery allows you to access the functions and features of JavaScript much faster, enabling you to write less, but do more.
Way back in 2005 jQuery was still just a few snippets of code trying to improve the functionality of (the now defunct) Behaviour. Since then, jQuery has grown rapidly into being the most popular JavaScript library in use on the internet. It is being used on almost 81% of all websites in 2016, largely with thanks to it being bundled with numerous successful brands, including WordPress.
jQuery has not only changed WordPress websites, but has influenced designs of the entire internet ever since its first release a decade ago. In this article we will outline some of the best publicly available jQuery scripts that you can easily implement to jazz up your WordPress website.
Drift
Drift is a responsive, browser-compliant zoom on hover plugin. It allows your website visitors to use their mouse to magnify a particular area of any image. There are a bunch of options available for you to use that let you customize how the magnification effect will be presented on-screen.
Drift also includes a simple theming system. It enables you to completely customize the script’s appearance using simple CSS. Drift allows you to create something that better matches your site design, thus improving the user experience of your website. With LazyLoad and Luminous support out-of-the-box, you’re able to quickly create visually impressive image effects which would be perfect for your photo gallery or e-commerce store.
Tooltipster
Tooltipster gives you the ability to create attractive, modern and very customizable tooltips for your website. Simply by adding the tooltip class to any selector that has a title attribute, you can create more advanced tooltips that include HTML, hyperlinks, or images. You can also change the position and behaviour of each tooltip by using the built-in options.
You’re further able to add multiple tooltips to the same element. This is perfect for educational content and e-commerce stores. Beyond that, the icing on the cake is, that it’s completely browser-compliant too, including IE6+.
I’ll Be Back
Every website should have a back-to-top button. It’s simply a must in today’s world, especially if you consider the size of devices your website may be being viewed on. Forcing people to finger-scroll their way back to the top of your site is a sure-fire way of getting people to hit their browser’s back button. Finally exiting your site instead of exploring further.
This is why you should take a look at the I’ll Be Back script. It’s one of the simplest ways of providing your website visitors with a quick route back to the head of your website with just one click. There are several options included in the script. You can thus control the button’s position, its animation effects and durations, and even optional background colors and images if you like.
animatedModal
Using the impressive animatedModal script, you can create engaging full-screen modals with ease. You may add text, images, dynamic content, anything you wish to be displayed within an animated full-screen modal that, when opened, positions itself over the top of your site until closed by users.
You can change a handful of options that effect the modals animation effect and duration, as well as its background color. Besides, animatedModal is fully compatible with all modern browsers, including IE10+.
Vide
Displaying full-screen video backgrounds is quite possibly the quickest way to attract a users attention. It’s something you simply can’t ignore, but it’s proven extremely difficult to implement in the past. This is where Vide hopes to change that.
By simply providing paths to your chosen video files (your video needs to be in 3 specific formats to ensure browser compatibility) from within a newly created div, you can create memorable and engaging areas within your site in a matter of seconds. The Vide script also comes with several options included that allow you to customize the video player as needed.
Scrollify
With Scrollify you can completely alter the behaviour of a users scroll wheel. You can add an element of uniqueness to your site. Scrollify is a script that assists the user in navigating through your content when they scroll down the page. It is ideally suited for one-page websites such as portfolios, galleries and business websites alike.
Scrollify allows you to simply declare which element you wish to apply the Scrollify effect to and you’re good to go. There are many options available for you to use too, such as adding animation effects, offset and height values, whether to use scroll bars or even add pagination so the user can skip between sections.
jQuery Sidebar
jQuery Sidebar is a very simple but endlessly useful sidebar script. It allows you to quickly insert any content within a hidden sidebar that your website visitor can open and close when needed.
It is a modern trend to have hidden areas that the user can interact with, such as navigation menus, search fields, social media feeds and icons, advertisements or even more content which is very useful on mobile devices where screen space can be limited. Using this script you’re able to quickly insert multiple sidebars on any side of your site.
jQuery Particles
Using jQuery Particles, you can make any area of your website stand out from the crowd using animated particles. Using the options provided, you’re able to create any number of areas to display a variety of particle based configurations. You can control the particle count, size, movement speed, color, spacing and whether to connect particles using a line, creating a star chart effect.
Lightcase
Lightcase is a perfectly responsive lightbox which is simple to implement and can be used on a whole range of elements including videos, forms, maps and images, to name a few. Lightboxes are an unobtrusive way of inserting any form of content into what is effectively a pop-up window, but styled beautifully with an opaque view of the website you’re visiting in the background.
herbyCookie
Ever since the EU was required to offer the option to users to refuse a website’s cookie in 2011, website owners were forced to start complying with this law change. Herby Cookie makes complying with this requirement a very simple process. You can simply call the script and select a few options to add an attractive and customizable notification bar at the bottom of your site.
LazyLoad
With LazyLoad you may decrease loading times for your visitors by delaying the loading of images until they’re within the viewport. On long image-heavy websites, waiting for images to fully load can be an irritation to many, sometimes resulting in a sharp exit via the browsers back button.
With LazyLoad you can delay the loading of images on your website until the user has scrolled down far enough to bring an image into view. This results in faster loading times, less server load, and of course, a happier visitor. Via the built-in options, you’re able to apply a fade-in effect to all of your chosen lazy elements, as well as providing a legacy fallback for non-JavaScript browsers.
How can you implement jQuery Scripts?
In this article we’ve listed some of the best publicly available jQuery scripts to spice up your WordPress website. Each of these scripts usually offers a documentation, however, the instructions are not always easy to understand, especially for beginners. If you would like to use one of these scripts, but you’re not sure how to implement them correctly into your WordPress website, please have a look at our tutorial: Implementing jQuery Scripts into WordPress Websites.
