CODEWITHSUNDEEP
javascripthtmlcssimageanimation
Madie
Madie

Reputation: 41

expanding/shrinking image using javascript?

So i need to have an image in the center of the screen, continuously expanding and then shrinking. I was able to make it so that when you mouseover on the image it will expand and then on mouse out it will shrink. I've now gotten it to expand once loaded but cannot figure out how to make the cycle happen, I'm also not sure if it's possible to make it centered vertically as well as horizontally, everything I've tried has cancelled out the animation. Thank you for help.

HTML

<!DOCTYPE html>
<html>
<title>Expanding Shrinking Image</title>
<head>
<script>
var tmp = 0;
var num = 0;
var img = null;
var timer = null;

function expand(it) {
  tmp = it.width;
  num = 0;
  img = it;
  timer = setTimeout("exp()",100);
}

function exp() {
  img.width = img.width * 1.1;
  num++
  if (num < 5)
    {timer = setTimeout("exp()",100);}
}

function shrink(it) {
  tmp = it.width;
  num = 5;
  img = it;
  timer = setTimeout("shk()",100);
}

function shk() {
  img.width = img.width/1.1;
  num--;
  if (num>0)
    {timer == setTimeout("shk()",100);}
}
</script>
</head>
<body>
<div id="centre" style="width:100%; text-align:center;">
<img id="image" src="http://image.tutorvista.com/cms/images/38/square1.jpg" onload="expand(this)">
</div>
</body>
</html>

Upvotes: 0

Views: 1801

Answers (3)

Azeez
Azeez

Reputation: 328

Replace your JavaScript code between and tags and replace it with the below code:

<script>
var originalImgWidth = 0;
var img = null;

function expand(it) {
    originalImgWidth = it.width;
    img = it;
    exp();
}

function exp() {

    if(window.innerWidth > img.width * 1.1){ 
        img.width = img.width * 1.1;
        setTimeout("exp()",500);
    }
    else
        setTimeout("shrink()",500);


}
function shrink() {

    if(originalImgWidth < img.width){
        img.width = img.width / 1.1; 
        setTimeout("shrink()",500);
    }
    else
        setTimeout("exp()",500);


}
</script>

It will work fine, as per your requirement.

One more thing here is it will expand up to your window size and again it will shrink up to its original width. If you need the logic based on the no.of times to expand and shrink then you have change the conditional statements (like num >5 , num < 0)

You can amend the code as per requirement, such as the image should shrink to 0 width , or image should expand up to a maximum width by changing the conditions in exp() and shrink() functions.

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

Based purely on your css tag (and ignoring the title), I am tempted to provide a CSS3 only answer:

Demo: http://jsfiddle.net/abhitalks/QLfV7/1/

#yourImage {
    -webkit-animation: scaling 1s 4 ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes scaling {
    from {
        -webkit-transform: scale(0.2);
    }
    to {
        -webkit-transform: scale(1);
    }
}

Upvotes: 1

Dot_NET Pro
Dot_NET Pro

Reputation: 2123

I have made a little changes to your code:

var tmp = 0;
var num = 0;
var img = null;
var timer = null;

function expand(it) {
tmp = it.width;
num = 0;
img = it;
timer = setTimeout("exp()",100);
}

function exp() {

img.width = img.width * 1.1;
num++
if (num < 5)
{timer = setTimeout("exp()",100);}

else{
timer = setTimeout("shk()",100);
}
}

function shk() {
img.width = img.width/1.1;
 num--;
if (num>0)
{timer == setTimeout("shk()",100);}
else
{timer = setTimeout("exp()",100);
}   
}

DEMO:http://jsfiddle.net/nN9Xn/1/

Upvotes: 0

Related Questions