Skip to content

DomLastic.js is a jquery plugin that adds jointed bouncing effects to your HTML elements. You can connect dom elements so that they behave like elastic physically jointed bodies. Make your list items bouncing like messages on iOS when scrolling or fire a customizable effect on any dom manipulation.

License

Notifications You must be signed in to change notification settings

manuelkch/domlastic

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DomLastic.js

DomLastic.js is a jquery plugin that adds jointed bouncing effects to your HTML elements.
You can connect dom elements so that they behave like elastic physically jointed bodies. Make your list items bouncing like messages on iOS when scrolling or fire a customizable effect on any dom manipulation.
TEST THE DEMO

Install

  • Installation with npm: packagename "domlastic"
    $ npm install domlastic

  • Installation with bower.io: packagename "domlastic"
    $ bower install domlastic

  • Manual installation: copy and link the file domlastic.js to your project
    domlastic.js

Usage

Example 1: Init and trigger animation

<script>
domLastic.init({
  itemsClassnameToConnect: 'item'
});

domLastic.animateItems();
</script>

<div>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>

Example 2: Callback after animation has finished

<script>
domLastic.init ({
  itemsClassnameToConnect: 'item',
  callback: function() {
    console.log( 'anim finished');
  }
});

domLastic.animateItems();
</script>

<div>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>

Example 3: Horizontal animation with custom parameters. Connect any DOM element like Images...

<script>
domLastic.init({
  itemsClassnameToConnect: 'item',
  itemsJointStrength: 10, //value optimum between 10 - 100
  animationSpeed: 500, //value optimum 300 - 1000
  animationIntensity: 0.6, //value optimum optimum 0.5 - 1
  animationDirection: 'horizontal'
});

domLastic.animateItems();
</script>
<div>
  <div class="item"><img src="..." /></div>
  <div class="item"><img src="..." /></div>
  <div class="item"><img src="..." /></div>
</div>
Attribute default type
itemsClassnameToConnect string
itemsJointStrength 20 int
animationSpeed 600 int(ms)
animationIntensity 0.5 float
animationDirection 'horizontal' string
callback func()

animationDirection Types:

  • 'horizontal'
  • 'vertical'

Dependencies

  • jQuery

Browser Support

Browser
Version 4.0 9.0 2.0 3.1 9.0

About

DomLastic.js is a jquery plugin that adds jointed bouncing effects to your HTML elements. You can connect dom elements so that they behave like elastic physically jointed bodies. Make your list items bouncing like messages on iOS when scrolling or fire a customizable effect on any dom manipulation.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 58.8%
  • JavaScript 26.8%
  • CSS 14.4%