7 Lightweight jQuery Plugins for Styling Login and Registration Forms

Adding a login and registration functionality to your website is a great thing to be able to do. Not only is it a cool feature, but it also opens up a lot more possibilities for your site in terms of functionalities, and it can also really help improve user experience. If you're trying to add this functionality to your site but aren't sure what to do with it in terms of design, check out the following list of snippets, plugins, and tutorials that show you how you can add some flair to your login and registration forms with the help of both CSS and jQuery.

1. Calm Breeze Login Screen


This code snippet from CodePen creates a beautiful, sleek, minimalist and modern login functionality. While the snippet doesn't include an option for registration, that can easily be added by going off the design and theme that the snippet provides.



This particular tutorial provides you with snippets that show you how to make stylish and sleek responsive modals for both login and registration. 



This jQuery plugin creates an iPhone-inspired masked-password input with the option to reveal the password to the user, similar to the option you'd have on the iPhone. 



This code snippet creates an elegant login form with tooltip, focus, hover and animation effects, partly made possibly through the use of jQuery.



This tutorial demonstrates how to make a User Login modal using jQuery to create the titular "modal" pop-up window effect.



A darker take on the login form, the theme of this snippet is very minimalist and can be used to create a somber yet stylish login form that can be easily added or integrated to any project or site.



This bright and fun login box concept is presents you with a cool code snippet complete with hover effects, focus effects, and a brightly colored gradient background. Use it as is or customize it so that the colors match your project.









8 jQuery Plugins for Rich Text Editors

With rich text editors (also referred to as What You See is What You Get editors -- which is often abbreviated to WYSIWYG) make it easy for anyone to add styled, formatted text to the interwebs without having to have any code or CSS knowledge. They're the kind of editor that most people would probably use when writing up a page or a post on a CMS platform like WordPress or Blogger. If you want to add one to any of your websites or projects to give anyone the chance to be able to post polished looking content, check out our curated list of the best jQuery plugins that allow you to include a WYSIWYG editor just about anywhere.

1. Summernote


Summernote is a really beautiful text editor on Bootstrap. It's simple, mobile friendly, and it comes with two different pre-styled themes (dark or light). It's easy to install and customize and it's totally open source.



Matheditor.js is a unique rich text editor that works like all of the other WYSIWYG editors on this list, only instead of using it to generate formatted text, you use it to generate formatted math equations. It uses the MathQuill library, is super lightweight, and is optimized for mobile use.  

3. Froala


Froala is a lightweight WYSIWYG editor that is incredibly easy to use, supports dozens of different languages, is mobile friendly, and supports common keyboard shortcuts.



Redactor is a simple rich text editor with a clean, minimalist design. One of its coolest feature is a drag and drop capability for images. 

5. Cazary


Cazary is another simple WYSIWYG editor that can be used in a few different modes. Full mode includes tons of customization and formatting options for the text within the editor, while minimal mode only offers a few common ways to format text, such as the option to make the text bold, italic, or underlined.



ContentTools is a really cool editor that allows for inline editing, which means you can set certain parts of your pages to be editable areas, and users can edit them on the spot. It's easy to integrate with any site.



This rich text editor has a clean and simple design, but what makes it unique is that it provides users with an instant preview of the text they're creating and formatting. It's also super lightweight and easy to use.



TinyMCE is a plugin that provides you with a feature rich WYSIWYG editor that includes features such as file management, spell check, media embedding, and image editing. This powerful editor would be a great addition to any site. 







6 jQuery Plugins for Image Cropping

Adding a cropping functionality to your site is definitely a cool feature to include on any project, and a great way to give your users access to a really useful functionality If you're not sure how to go about creating an image cropper from scratch, don't worry, you're not alone. With so many open source image cropping jQuery plugins available, there's really no need for you to code one yourself anyway. Take a look at the following list of some of the best, most lightweight, and most efficient image cropping plugins around.

1. cropit


Cropit is a great plugin for image cropping that loads images locally using a file reader (you can drag and drop the images you want to upload), then crops them using HTML5 canvas. It's extremely customizable with CSS and is responsive, so it works on both desktop and mobile devices (it has touch support for mobile).

2. DarkroomJS


DarkroomJS isn't exclusively an image cropper -- it's an image editor, that includes a cropping functionality. If you want to give your uses the option to rotate their images, or adjust the brightness of their images, in addition to giving them a cropping feature, this plugin is a great option. Powered by HTML5 canvas.



This is a powerful plugin that offers you tons of customization options in terms of user experience and how you can allow your user to upload their image, crop their image, view their cropped image, etc. A very versatile cropping plugin, this one's an awesome option for those looking to give their users a unique and smooth crop experience.


Picture cut is a cropping plugin that's supported on all major browsers. It's a simple, no-fuss process with a minimalist design (though the style is totally customizable, of course). Great for if you're looking for an uncomplicated cropping functionality (with a drag and drop feature!).

5. Jcrop

The coolest thing about Jcrop is that it has a "preview pane" (see the box to the right of the image in the screenshot above) that gives the user a preview of what their image is going to look like once its cropped. Aside from the preview pane, the plugin is lightweight, easy to install, and even easier to use.



Cropper is a cropping plugin that gives the user lots of options for formatting their uploaded photo. You can zoom in and out of the photo, move it around the canvas (up and down or side to side), rotate the image, and change the scale. It's a great tool for users who really want to play around and experiment with dimensions and aspect ratios of their images in addition to cropping them. 




7 Cool jQuery Plugins for Transitions

Including smoothed, polished transitions is a fabulous way to make your projects look sleek and professional. Animated transitions are the perfect finishing touch to add to a website, but writing the code for these transitions from scratch (whether you're using CSS or jQuery to execute them), can sometimes be much more of a pain than it's worth. If you want to add transitions to you projects without putting in the extra time to write the code yourself, check out this list of some of the coolest free jQuery plugins to achieve transition effects.

1. Transit

Transit is a fantastic free plugin that will provide you with the smoothest transitions using jQuery. The plugin is easy to use and will animate any element in both 2D and 3D transformations.

2. Multi-screen.js


Multi-screen.js will provide you with animated transitions to switch between "pages." Basically, it's a unique way to create a single-page site that has the illusion of having multiple pages because the user is able to flip through the content smoothly and easily with the help of Multi-screen.js.



Fluidbox is an image-enlarging plugin that allows your user to click on an image to enlarge it, and when the image enlarges, it does so using a nice transition effect. Perfect if your project has a lot of plugins that you want your users to be able to enlarge without it feeling clunky. The plugin also supports responsive designs.



Blindify is another transition plugin that can be applied to images. The aim of the plugin is to allow you to create image slideshows where the transitions are a vertical or horizontal "blind-effect" -- so it sort of resembles animated window blinds.



An interesting take on the menu concept, this plugin helps you build a square (or rectangular) menu that opens at a single click, and when it opens it does so using a beautiful, customizable transition.

6. Dialog

A cool way to use transition effects it to apply them to pop ups or dialog boxes, which is exactly what the Dialog plugin does. With Dialog, you can apply smooth transition effects to any pop-up, so that the pop-up effect is sleeker and less jarring for the user. This plugin is ultra lightweight.

7. Wiper


Wiper is another plugin to use when creating image slideshows. This slideshow plugin not only offers cool, wiping transition effects for your slideshow, but it also provides a very unique slider navigation (see in the screenshot above all the bars in the top left corner that say "sample" -- clicking one of these will reveal a previously viewed slide). 






10 Awesome jQuery Parallax Plugins


The parallax scrolling effect allows you to move the background content (i.e. an image) at a different speed than the foreground content while scrolling. It is very trendy these days to use parallax effect. In this post, we’ve compiled a list of 10 awesome jQuery parallax plugins, allowing you to easily implement parallax effects on images or text. These easy to use and lightweight plugins support horizontal and vertical movement for parallax scrolling. Enjoy!

Parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds triggered by gyroscope sensor data (device orientation) or mouse movement. Parallaxify exposes a variety of options that let you influence how element positioning is achieved, configure filtering of sensor data, configure the movement algorithm, and change general plugin settings. In order to add a parallax effect to any element you can run .parallaxify() on the wrapper of an element or run it globally on 'window'.


Fallings is a lightweight jQuery parallax effect plugin that focuses on manipulating absolute elements positions based on the window.scrollTop() property. The parallax effect can be checked while scrolling up/down in the browser window.


Paroller.js is an easy to use, mobile ready, lightweight jQuery plugin that enables parallax scrolling effects. You can use it on background elements or on any other element. Scrolling elements can move vertically or horizontally.

Parally is a small, simple, flexible jQuery parallax scrolling plugin which can be applied to background images or any other DOM elements. You can also pass multiple configuration parameters to controls the parallax effect.

Parallax.js is a jQuery parallax plugin that helps you create Spotify-like parallax scrolling effect on your web page. Parallax.js will create a fixed-position element for each parallax image at the start of the document's body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects while scrolling the page, inspired by spotify.com. The plugin is really simple to use with several options for tweaking. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.

jInvertScroll is a lightweight plugin for jQuery that allows you to move horizontally with a parallax effect while scrolling down. It's easy to set up and requires nearly no configuration.

TVParallax is a tiny jQuery plugin utilizing CSS3 3D transforms to implement an Apple tvOS style parallax effect on a given element that interacts with mouse movement.

Parallaxator is a jQuery-based parallax plugin. It's simple, and amazingly easy to use. It allows you to implement parallax effects with any html elements including text and images.

Paralaxbg.js is a jQuery script for creating background parallax effects which make background images move slower than foreground content while scrolling up or down.

Conclusion


To conclude, these jQuery parallax plugins can be used to apply the parallax scrolling effect on any HTML element like text or images and also supports horizontal and vertical scrolling. These plugins are easy to integrate and only require that you download their library, include attribution, and make a call to the library from your code. These plugins are pretty lightweight and offer great customization to modify the default implementation.