10
X

12 jQuery Plugins to Animate Text

Text animation is a preferred way to highlight the text and catch attention of anyone. But having a good and lightweight text animation is pretty important. So in this post, find a compiled list of 12 jQuery plugins for animating text on your website to get attention of users. This plugins are tiny, easy to use, lightweight and support various form of animations.

1. Bubble Text

BubbleText

Bubble Text is a jQuery text rotator plugin which rotates through an array of strings with a text typing & deleting animation.

2. Slogan Roulette

Slogan Roulette

Slogan Roulette is a zepto/jQuery plugin that lets you swap/animate words in your titles. It iterate through an array and then display them one by one.

3. Shuffle Text

Shuffle Text

ShuffleText is a jQuery text rotator plugin which rotates through an array of text with a “smart” shuffle transition.

4. Changethewords.js

Changethewords

Changethewords.js is a lightweight jQuery plugin which iterates through set of text elements and then animate them with various animations to rotate the text.

5. textTweener

textTweener

textTweener is a jQuery plugin to generate letter based animation tweens between different texts. With textTweener you can generate a text rotator to your page. The different texts fade nicely into each other by moving the letters to their new position.

6. AutoTextRotating

AutoTextRotating

AutoTextRotating.js is a jQuery plugin to change/rotation of text or html, single or group, automatically with a separator. This plugin offers lots of customization, support plain text as well as HTML, comes with 5 built-in transition effects and supports Animate.css for awesome CSS3 animations.

7. Morphext

Morphext

Morphext is a simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. It can be used for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images.

8. Text Rotator

Text Rotator

Text Rotator is a JQuery plugin used to rotate comma separated words/phrases with a variety of cool CSS3 animations based on animate.css.

9. Wodry

Wodry

 

Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.

10. cycleText

CycleText

cycleText is a lightweight jQuery plugin which enables you to rotate through a group of text with CSS3 animation effects based on Animate.css.

11. textition

textition

Textition.js is jQuery plugin for smooth transitions between text blocks. It can be used to stylize titles, menu buttons, or any other text.

12. Crotator

Crotator

Crotator is a jQuery plugin for creating a slider or content rotator. It converts the children inside any selected element into a Slider. One can define array of timeline according to which the slider will be synced. CSS animations can be used with this plugin to enhance the contents visually.

 

10 jQuery Plugins to Create a Ripple Effect

Ripple effects became very popular with Android Material design due to simplicity of animation and its eye catching presence. So in this post, find a compiled list of 10 jQuery plugins to create ripple effects. These plugins are very lightweight and easy to use.

1. Ripples

ripples

 

Ripples is a fancy jQuery plugin that creates a water ripple animation following the mouse cursor on an HTML element based on WebGL.

2. Rippleria

Rippleria

Rippleria is a super lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations. Works with any DOM elements like buttons, images, divs, etc.

3. clickBubble

ClickBubble

 

clickBubble is a jQuery plugin which uses CSS3 border-radius to create animated ripple/bubble/circle effects that respond to user interactions.

4. jRipple

jRipple

jRipple is an extremely lightweight jQuery plugin that uses CSS3 animations to create Material Design inspired water ripple effects with variable colors and animation speed on mouse click.

5. legitRipple.js

legitRipple.js

legitRipple.js is a jQuery plugin used to create adaptive, smooth, draggable and highly customizable ripple click effect using CSS3 transitions.

 

6. ePulse

ePulse

ePulse is an easy to use jQuery plugin which helps you implement a Material Design inspired ripple effect on a given element with AMD and Commonjs support.

7. Material Button Click

Material Button Click

 

A small jQuery plugin that helps you to create a Android L or Material Design styled action button with a configurable ripple click effect based on CSS3 transitions.

8. Water Ripples Effect

Water Ripple

This javascript jQuery plugin to simulate water ripples on the surface of an image. There are quite a few code snippets on the internet to simulate water ripples in javascript-canvas.

9. Material Ripple

MaterialRipple

MaterialRipple lets you use that ultra-cool active effect on every element you want with modern CSS3 Animations and super smooth animations. You can edit your ripple per CSS, add custom ripples for custom elements and much more!

10. MAWButton.js

MAWButton

MAWButton.js is a ripple button inspired by Google material design.

 

Using jQuery to Dynamically Add CSS to HTML

jQuery easily allows for CSS to be dynamically changed as a result of different event triggers. This is especially useful if you want to change some styling of a particular element after a click. Implementing this type of code is fairly simple. The code in the following example would change the color of the text within a div after a div is clicked:

JAVASCRIPT:
  1. <br />
  2. $('div').click(function(){<br />
  3. $('div p').css("color", "#000");<br />
  4. });<br />

In the above example, the .css() method takes two values -- the first should be the name of the CSS property you want to change, the second should be the property's new value. Make sure the values are separated by a comma (not a colon like they would be in your stylesheets), and make sure they're within quotes.

Using jQuery .click() Events to Override Hover Styles on Mobile

One of the most frustrating things about optimizing a site for mobile is when certain styles or events that work perfectly fine on the desktop version don't really translate into a touch device. Take hover styles, for example, which work great on desktops, but, due to the nature of touch devices, don't really work at all on mobile.

So, when a link (or any other type of HTML element) that has a CSS hover effect applied to is tapped on mobile, there are many cases where the link actually has to be tapped twice in order to access the linked content. This is because the first tap will act as a hover effect. Luckily, there's a simple jQuery script that allows the hover styles to be overridden by invoking a .click() event.

Add this script to your code and any link with a hover style applied to it should respond appropriately the first time its tapped -- just make  sure that replace the broad ('a') selector with specific classes that apply to links with hover styles, otherwise this script will apply to every single link on your site, which could make your pages quite jumpy.

$('a').on('click touchend', function(e) {
      var el = $(this);
      var link = el.attr('href');
      window.location = link;
   });

jQuery 3.0 New Loop Syntax

jQuery 3.0 is the newest version of jQuery and its beta version is already out. There are many changes in jQuery 3, but one of the important changes is new syntax of for loop to iterate over the DOM elements of a jQuery collection using the for...of loop. This new change is more in line with other present language and technologies. And this is part of ECMA 6 specification.

Here is the old way to loop using jQuery:

var $dvElements = $("div");
for (var x=0; x< $dvElements.length; x++){
$dvElements[x].addClass("dummy");
}

With-in the loop, you use index on jQuery collection to get the element.

Here is the new syntax with jQuery 3.0:

var $dvElements = $("div");
var i = 0;
for(var elm of $dvElements) {
elm.addClass("dummy");
}

With this new syntax, you will get DOM element, instead of jQuery collection. So here you don’t need to use index to get the element as you are already having direct access to the element.

10 jQuery Credit Card Form Plugins

In this post, find a compiled list of 10 jQuery credit card form plugins which are useful for any ecommerce website. Using these plugins, one can easily format credit card information, validate credit card information and detect card type.

1. cardCheck

CardCheck

Cardcheck.js is a very small jQuery plugin for e-commerce websites that validates the credit card numbers as well as telling you the detected credit card type.

2. Credit Card Formatter

Credit Card Formatter

Credit Card Formatter is a very small jQuery plugin for a credit card input that formats numbers and tells you the detected credit card type.

3. Card

Card

Card will take any credit card form and make it the best part of the checkout process. Everything is created with pure CSS, HTML, and Javascript.

4. Skeuocard

Skeuocard

Skeuocard is a re-think of the way we handle credit card input on the web. It progressively enhances credit card input forms so that the card inputs become skeuomorphic, facilitating accurate and fast card entry, and removing barriers to purchase.

5. Creditly.js

Creditly

Creditly.js gives you everything you need in order to create a sleek, intuitive credit card form. Just copy the html, CSS, and JavaScript to get an intuitive credit card form in seconds. You get credit card validation for free!

6. Payfield

PayField

Payfield is a jQuery plugin to build an animated credit card input that allows the visitor to enter the credit or debit card information (number, expiration date and CVV) easily and quickly.

7. jQuery Payment

jQuery Payment

jQuery Payment is a useful and simple jQuery plugin for E-commerce websites to format and validate credit card form input field.

8. Credit

Credit

Credit.js is a super simple jQuery plugin to create an input mask for credit card that only accepts 16 credit card numbers. Specially designed for E-commerce or business websites.

9. Credit Card Validator 

Credit Card Validator

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detected credit card type and whether the number length and Luhn checksum are valid for the type of card.

10. Smart Validate

Credit Card Validator

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.