The past few years have brought in many new design changes and trends. We’re now seeing quick, flat interactive web projects popping up all over the Internet and whilst flat design and other common elements are forming a common theme across the board, the exciting new elements that jQuery brings with its range of plugins are also playing a major role.
Complimenting your web design with interactive elements is nothing new. Javascript has been around since the dawn of the Internet as we know it but it’s evolved and evolved significantly in recent times. New technologies, more capable web browsers and a general simplistic understanding of jQuery have brought it to the forefront of our web development process which has resulted in taking beautiful looking designs to the next level by also making them extremely functional and interactive. No longer is web development a technique and skill reserved for the geeks, with a bit of reading – anyone can do it! And with the advent of the various website builders out there such as this one to give a real world example, it’s becoming even easier!
Of course jQuery is not all about bells and whistles. The elements we’ll discuss below not only make your website more interactive, the also result in increased functionality and a better user experience as a whole – something which in today’s climate is particularly important. The visual design is only one piece of the puzzle that is a strong web presence and the inclusive of dynamic elements such as jQuery is now of the upmost importance.
Slow Scroll
This is such a simple function but is one that can take your project from a dated, tedious build to one that looks modern and fresh with just a few lines of code. The slow scroll is used to move the visitor down your page to a section of your site. This is nothing new and in page anchors have always allowed you to a click a link or button in order to be taken to another part of the page. All the slow scroll function does is emulate this but slower. I know what you’re thinking, slower is bad right? Well, not in this case, a slow control scroll allows the users to see other things on your page whilst still getting to their ultimate destination further down the page. This would otherwise be lost if you’re just skipping to a section and bypassing all of the content above it. We’re only talking fractions of a second you’re delaying the user for and the benefits wholly outweigh any negatives which may arise as a result.
Fade In / Transitions
Transitions and other fade effects have also been around a while but jQuery and the range of variables which come with it, allows us to take our websites to the next level. You can add a fade in on virtually any element from a piece of heading text, to an image or right through to an entire section. The effects are also present in abundance, you can have the element slide or fade into view and control everything from the direction to the timing right through to the opacity of the element. Sliding elements have become a bit tiresome in recent years but fading in an image on load or fading an overlay on mouse over can really bring your design to life.
Sliders
Sliders are one element which we’re seeing more and more of. In the past if you wanted to pass data you’d use a form and a combination of select boxes to pass the values you’d like. Now with sliders, you can slide in between a range of values such as 1 – 10 and pass that through in the same way. Obviously this way is much more user-friendly than using cumbersome forms.
You’ll often see sliders on finance sites where you’re choosing a loan amount or a repayment term or on review style styles where you’re asked to rate items out of 10 etc. Sliders make choosing values from a range significantly easier than writing values into input boxes or even selecting them from a drop down.
Overlays
Overlays are an element which divide opinion. Some people love them, some consider them to be an unnecessary effect. I fall in the initial camp. They’re great, if used right.
Modals
You’ve no doubt all seen modals around the web, even if you didn’t know them by name. Modals are great and can be used for alerts, errors and even to include other content on top of your core page content. Modals get used often for login forms or forms in general where you don’t want to create a new page or waste space on the existing page. A simple action on a link or button can pop up a modal and make content appear on top of content.
Parallax
This is one of the key trends in 2015. The effect which is used on background elements gives a 3D feel to websites. You would overlay your main content div on top of the background image and use a bit of jQuery to make the background move at a slightly different time to your content and in an opposite direction when you scroll up and down through your site. This effect makes your content pop and makes the main content div area stand out from the rest of your page. It looks as if the content div is floating on top of the background and if you use it correctly it can be a great way to bring life to your page.
Conclusion
The above is by no means a complete list. jQuery has hundreds of elements and literally thousands of plugins that people have developed using the base functions. They say anything is possible with jQuery and once you’ve experienced exactly how powerful it is first hand then you really do start to believe it. The above elements will hopefully serve as a way to get you started and let you take your own web projects to the next level. Flat design works but you have to be able to bring it to life a bit also and jQuery does that brilliantly.