A simple event based word animation plugin using jQuery and CSS animations. This plugin is inspired by WordsRotator Plugin by Andrea Pace. I required a similar functionality to wordsrotator but based on events so I wrote WordMagik.
1. jQuery
2. Animate.css
<head>
<!-- Javascript Files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<head>
<!-- CSS Stylesheets -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/daneden/animate.css/master/animate.min.css" />
<!-- Javascript Files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<head>
<!-- CSS Stylesheets -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/daneden/animate.css/master/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/wordmagik.animate.min.css" />
<!-- Javascript Files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.wordmagik.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$(".the-word").wordmagik({
wordList: ["Awesome", "Cute", "Sexy", "Hot", "Swagging", "Perfect"],
eventSelector: "#changeWord",
onEvent: "click"
});
});
</script>
A boolean of whether to pickup random words from the list or not. This is set to true by default. Setting this to false will use words indexwise.
An array of words. Words could be plain text or even HTML.
A selector to which the change word method will be bound. Example button.change-word, .change, #change, etc.
An event on which the change word method will be called. Example hover, click etc.
Type of animation for the appearing word. For more info see animate.css
Type of animation for the disappearing word. For more info see animate.css
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent