Awesome way to grab users’ attention through CSS Animations

Explore, Grab Attention Plug-in...

About Plug-in

Grab Attention plug-in is developed to bring to notice / grab attention / get notify user for lead generation form, quote form, subscribe form, highlight text/image section etc.

Plug-in provides facility to apply 9 types of CSS animations to grab users’ attention. Also if you are aware about how to write CSS animation effects, just create your own animation and you can apply that class in plug-in option, by doing that you can apply your own animation to an element.

Go through plug-in options, examples, features to get more idea how it can be useful for your requirement.

Also don’t forget to go through other awesome jQuery plug-ins I have posted on codecanyon.

Documentation

Plug-in Options

How to Setup?

  1. Insert the jQuery elements in your document's <head> section, e.g.: Add jQuery library to HTML page
  2. Insert the Plug-in CSS in your document's <style> section

    <link href="css/grab-attention-style.css" rel="stylesheet" type="text/css" />
  3. Insert the Plug-in JS in your document's <script> section

    <script src="js/jquery.grabAttention.min.js" type="text/javascript" language="javascript"></script>
  4. Define plug-in options for grabAttention. e.g. attentionType, attentionOnce, repeatTimes, repeatInterval 

    $('#id-of-div').grabAttention({
        attentionType: 'swing',         /* shake, h-shake, v-shake, swing, rotate, r-rotate, zoom-in, zoom-out, fade */
        attentionOnce: false,           /* Ture/False to keep/kill animation on hover over, True will re-animate once hover over */
        repeatTimes: 3,                  /* Repeat animation defined number of times */
        repeatInterval: 2000            /* Repeat animation at specified interval */
});

Examples

APPLY IT !!!

Note: Click on above APPLY IT !!! link to see how it works...





$('#quote-frm').grabAttention({

attentionType: 'swing',

attentionOnce: true,

repeatTimes: 2,

repeatInterval: 2000

});

TAKE A LOOK

GET YOUR QUOTE

Plug-in Features

Features

  • Grab Attention plug-in can be defined on image, quote form, highlighted section, CTA sections or any HTML tag
  • You can initiate plug-in based on id or class
  • 9 different CSS animation styles for an elegant way to grab users' attention
  • Other options to configure plug-in like animate only once, animateion repeat, repeat duration
  • If you are aware of how to create CSS animations, then you can create your own CSS animation and just pass animation class to attentionType: 'your-animation-class'


Note: For better animation apparance, please give exact width to container

Other Plug-ins

addDot - The jQuery Plug-in for Adding Hot Spots

About Plug-in

"addDot" plug-in is useful for adding a hot spot to show short description about specific portion of an image. User can also add thumb image in the description. Plug-in can be used in various industries like.

  • Real Estate - Building Image (Can show which floor has what facility)
  • Automotive - Tow/Four Wheeler (Short info about part of vehicle)
  • Medical Domain – Human Body (Describing various products that company have for specific part of human body)
  • Education – Human Anatomy
  • Factory Machinery – CNC Machines (Explaining which part does what when final product is out)

Purchase plug-in   l   View Demo

hoverOver - jQuery Plugin for Adding Hover Content

About Plug-in

"hoverOver" plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content. Plug-in can be used in...

  • To show content on hover over image/text
  • To show zoom-in/info icon on image
  • To show CTA buttons on hover over overlay
  • To show title text in over lay and slide up on hover over

Purchase plug-in   l   View Demo

Show Image in Placeholder/Target Box - jQuery

About Plug-in

Show in Place Holder plug-in is developed to show an image to place holder / target box. Plug-in can be used to showcase image portfolios, product images, software screenshots or any dam thing that you want to display to place holder / target box by clicking / hovering image thumbs or anchor links.

  • Show in place holder plug-in can be defined on image thumb, anchor link or any HTML tag
  • You can define content text either in “content” option of plug-in initialization or define data-content=’#contentID’ and define content inside Content Goes Here
  • 20 different animation styles
  • 4 styles for show content e.g. fly, curtain, fade, tocenter/fromcenter

Purchase plug-in   l   View Demo