CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Seong Lee
Seong Lee

Reputation: 10580

css3 animation using html5 data attribute

I am trying to use one of the css animation framework called Animate.css in a way that I can effectively manage multiple animations.

I have a markup like the following for example. 

<div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"></div>

And jquery as follows

$(function () {
    $('div').addClass('animated ' + data('animation'));
});

So when document is loaded the div should start executing fadeInUp animation from the css framework referenced.

In a real context, I would be using jquery scroll plugin to detect the x, y position to find when to fire animation but this is to just get started.

I must have got something wrong, it doesn't do anything.

Here is my JS Fiddle

Upvotes: 3

Views: 16950

Answers (2)

Oztro
Oztro

Reputation: 86

If you do not want to use jQuery you can add the classes (animated fadeInUp):

<div id="foo" class="animated fadeInUp" data-animation="zoomInDown" style="width:100px; height:100px; background-color:#ddd">
</div>

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

$(function () {
    var $divToAnimate = $("div"); // This will animate all the div elements in doc
    $divToAnimate.addClass('animated ' + $divToAnimate.data('animation'));
});

See for instance your Fiddle updated: http://jsfiddle.net/9aE2N/5/

Upvotes: 4

Related Questions