Introducing DomLastic.js – Open Source Markup Effects!
As an often implemented UI effect in some of our recent projects, it was an obvious next step to make a reusable tool for creating animated Markup effects.

So we’ve built 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.
This little tool is available at GitHub and also installable via bower or npm.
It’s easily configurable and flexible.

Test it

Test DomLastic.js on this demo page.

Install

  • Installation with bower: packagename “domlastic”
  • Installation with npm: packagename “domlastic”  
  • Manual installation: Copy and link the file dist/domlastic.js to your project: domlastic.js

Usage

Example 1: Init and trigger animation

Example 2: Callback after animation has finished

 

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

 

Attribute default type

itemsClassnameToConnect

string

itemsJointStrength

20

int

animationSpeed

600

int(ms)

animationIntensity

0.5

float

animationDirection

‚horizontal‘

string

callback

func()

 

That’s it – simple! Let me know if you make anything cool with this 🙂

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.