Question

38

css3 animation using html5 data attribute

rated 0 times [ 44] [ 6] / answers: 1 / hits: 15721 / 11 Years ago, wed, november 20, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mariann

Add To Favorites

Follow

Total Points: 201

Total Questions: 133

Total Answers: 107

Location: Czech Republic

Member since Thu, Aug 11, 2022

2 Years ago

answered 11 Years ago trayvon · Accepted Answer

$(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/