Create Attractive Animations Using Canvas And CSS3 - jQuery Twinkle

The Twinkle jQuery plugin makes uses of canvas and/or CSS3 to create awesome attractive interactions and animations on the webpage.

Animations included:

• Splash (canvas)
• Drop (canvas)
• Drops (canvas)
• Pulse (canvas)
• Orbit (canvas)
• Splash-css(jQuery+CSS3)
• Drop-css (jQuery+CSS3)
• Drops-css (jQuery+CSS3)

How to use it:

1. Load the Twinkle plugin's script jquery.twinkle.min.js after jQuery library and we're ready to go.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.twinkle.min.js"></script>

2. Attach the plugin to the target element and specify the animation type:

$(selector).twinkle({
  'effect': 'drop'
});

3. Customize the position of the animation.

$(selector).twinkle({
  widthRatio: 0.5
  heightRatio: 0.5
});

4. Trigger a function after the animation is completely finished.

$(selector).twinkle({
  callback: function(){
    // do something
  }
});

5. Override the default animation settings. All possible settings:

// splash
$(selector).twinkle({
  effect: 'splash',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 300,
    duration: 1000
  }
});

// drop
$(selector).twinkle({
  effect: 'drop',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 300,
    duration: 1000,
    width: 2
  }
});

// drops
$(selector).twinkle({
  effect: 'drops',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 300,
    duration: 1000,
    width: 2,
    count: 3,
    delay: 100
  }
});

// pulse
$(selector).twinkle({
  effect: 'pulse',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 100,
    duration: 3000
  }
});

// orbit
$(selector).twinkle({
  effect: 'orbit',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 100,
    duration: 3000,
    satellites: 10,
    satellitesRadius: 10,
    circulations: 1.5
  }
});

// splash-css
$(selector).twinkle({
  effect: 'splash-css',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 300,
    duration: 1000
  }
});

// drop-css
$(selector).twinkle({
  effect: 'drop-css',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 300,
    duration: 1000,
    width: 2
  }
});

// drops-css
$(selector).twinkle({
  effect: 'drops-css',
  EffectOptions {
    color: 'rgba(255,0,0,0.5)',
    radius: 300,
    duration: 1000,
    width: 2,
    count: 3,
    delay: 300
  }
});

Changelog:

v0.10.0 (2020-07-28)

• JS updated

---

This awesome jQuery plugin is developed by lrsjng. For more Advanced Usages, please check the demo page or visit the official website.