This trick might help you if you want your image to have a blink effect using javascript, I put this for my reference. I'ts very much simple but works very good on my end, here is the code below on how to blink your image using only script.
<!--Script for Blinking Image-->
<script type='text/javascript'>
var imgId = 'fire';
var imgOnTime = 250;
var imgOffTime = 750;
window.onload = function()
{
// check for existence of objects we will use
if (document.getElementById) {
var ele = document.getElementById(imgId);
if (ele && ele.style) {
setTimeout('blinkImg()', imgOffTime);
}
}
}
function blinkImg()
{
var v, t, ele = document.getElementById(imgId);
if (ele.style.visibility == 'visible') {
// hide it, then wait for imgOffTime
v = 'hidden';
t = imgOffTime;
}
else {
// show it, then wait for imgOnTime
v = 'visible';
t = imgOnTime;
}
ele.style.visibility = v;
setTimeout('blinkImg()', t);
}
</script>
<!--End Script for Blinking Image-->
You need to put it before the body tags end on html, or just create a .js file and call it to your main page, and when you have an image that you want to blink just simply put this code inside your img tags(see sample below.
<img src="images/fb-right.png" class="img-fadeIn" alt="" data-pin-nopin="true" id="fire">
id name fire is declared on script code, so you will only put the code inside image tags.
See a sample output on this here.
Wednesday, August 3, 2016
Blink Image Using Only Scipt
Mga etiketa:
blink image,
coding,
css,
css tricks,
script
Blink Image Using Only Scipt
Reviewed by Kazukiyan
on
8:55:00 AM
Rating: 5
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment