Animated a div box like a trash can :)

I have a set of div boxes link to video tutorials. A student would click on a div box to watch the corresponding video. All works well.

I was wondering if its possible to create a cool animated effect for the DIV when the video ends.
Im only interrested in the animated effect. Make it act like a trash can where it goes up in smoke or something like that. Can this be done?


There are a number of examples on codepen of fire effects (like this one) but they will need some customisation to work properly and will involve further scripting.

I just played around with that demo to get a hover effect.

However it would be more complex to activate on completion of a video and would be a question for the JS forum if that route is required.

There are plenty of other demos around so just search for css fire or smoke on codepen or google :slight_smile:

Specifically, you’ll need to know what javascript event(s) are triggered at the end of the video playback. In large part, that depends on what you’re using to play the video.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.