Diogo Melo Diogo Melo - 2 months ago 19
HTML Question

How do I create png button animation with javascript?

I'm a graphic designer in Portugal, used to work with code everyday, like css, html and a bit javascript and php. I am currently developing an interactive logo button, but it has to be PNG to look the way I want. This is the javascript code on html (image is hosted in my website):

I want to create a mouseclick start and stop on last/first frame, not a infinite loop like this, and reversed animation after click to open/close. Basically, the lock and unlock of the padlock.

The point of this animation is to open a menu nav-bar under the logo. Can you help me?

My code:



var cSpeed = 5;
var cWidth = 200;
var cHeight = 145;
var cTotalFrames = 7;
var cFrameWidth = 200;
var cImageSrc = 'https://www.studiogo.net/sprites.png';

var cImageTimeout = false;
var cIndex = 0;
var cXpos = 0;
var SECONDS_BETWEEN_FRAMES = 0;

function startAnimation() {

document.getElementById('loaderImage').style.backgroundImage = 'url(' + cImageSrc + ')';
document.getElementById('loaderImage').style.width = cWidth + 'px';
document.getElementById('loaderImage').style.height = cHeight + 'px';

//FPS = Math.round(100/(maxSpeed+2-speed));
FPS = Math.round(100 / cSpeed);
SECONDS_BETWEEN_FRAMES = 1 / FPS;

setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES / 1000);

}

function continueAnimation() {

cXpos += cFrameWidth;
//increase the index so we know which frame of our animation we are currently on
cIndex += 1;

//if our cIndex is higher than our total number of frames, we're at the end and should restart
if (cIndex >= cTotalFrames) {
cXpos = 0;
cIndex = 0;
}

document.getElementById('loaderImage').style.backgroundPosition = (-cXpos) + 'px 0';

setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES * 1000);
}

function imageLoader(s, fun) //Pre-loads the sprites image
{
clearTimeout(cImageTimeout);
cImageTimeout = 0;
genImage = new Image();
genImage.onload = function() {
cImageTimeout = setTimeout(fun, 0)
};
genImage.onerror = new Function('alert(\'Could not load the image\')');
genImage.src = s;
}

//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');

<div id="loaderImage"></div>




Answer

Please, see if this is what you want.

$(document).ready(function () {
  $(".lock").click(function () {
    var $self = $(this);

    if ($self.hasClass("closed")) {
      $self.removeClass("close");

      setTimeout(function () {
        $self.addClass("open").removeClass("closed");
      }, 100);
    } else {
      $self.removeClass("open");

      setTimeout(function () {
        $self.addClass("close").addClass("closed");
      }, 100);
    }
  });
});
div.lock {
  background-image: url('https://www.studiogo.net/sprites.png');
  width: 200px;
  height: 145px;
  background-position: 0 center;
  background-repeat: no-repeat;
}

div.closed {
  background-position: -1200px center;
}

div.close {
  animation: close-animation 300ms steps(6, start); // 1200px / 200px = 6
}

div.open {
  animation: close-animation 300ms steps(6, end); // 1200px / 200px = 6
  animation-fill-mode: backwards;
  animation-direction: reverse;
}

@keyframes close-animation {
  from {
    background-position: 0 center;
  }
  
  to {
    background-position: -1200px center;
  }
}
<div class="lock closed">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Comments