The pulsate effect is another effect that works with the opacity of a specified element. This effect reduces the opacity temporarily a specified number of times, making the element appear to pulsate.
In the following basic example, we'll create a simple countdown time that counts down from 15. When the display reaches 10 seconds, it will begin to flash red. In effectPuff.html
change the link in the <head>
of the page to point to a new stylesheet:
<link rel="stylesheet" type="text/css" href="css/effectPulsate.css">
Then remove the loading <img>
from the page and add the following element in its place:
<div id="countdown">15</div>
Next change the source file of the effect so that the effects.pulsate.js
file is used:
<script type="text/javascript" src="development-bundle/ui/effects.pulsate.js"></script>
Finally, change the final <script>
element so that it appears as follows:
<script type="text/javascript"> $(function() { ...