Responsive Animation sprite

[alghraibeh]

To Responive 👍

Add this :

Add To Line 12 $(this).css({ width:($this.width()/($this.parent().width()/100))+"%", height:($this.height()/($this.parent().height()/100))+"%",

        })

Edit : 1)-------------------- image.onload = function () { var width = image.width, height = image.height; cb(width, height);

                data.imageWidth=width // add width  to data
                data.imageHeight=height // add height to data
            };

2)----------------------

settings: $.extend({ width: $this.width(), height: $this.height(), imageWidth:"", //add imageHeight:"",//add totalFrames: false, columns: false, fps: 12,

                    complete: function () {},
                    loop: false,
                    autoplay: true
                }, options),

3)------------------------

var frame = function (frameNumber) {
    // frame: number of the frame to be displayed
    return this.each(function () {
        if ($(this).data('animateSprite') !== undefined) {
            var $this = $(this),
                data  = $this.data('animateSprite'),
                row = Math.floor(frameNumber / data.settings.columns),
                column = frameNumber % data.settings.columns;

             var x_percentage_width = (( data.imageWidth / data.settings.width) * 100)
            var y_percentage_height = ((data.imageHeight / data.settings.height) * 100)
            var xPosition=((data.settings.width * column)/(data.imageWidth-data.settings.width))*100
            var yPosition=((data.settings.height * row)/(data.imageHeight-data.settings.height))*100

            $this.css('background-size', (x_percentage_width) + '% ' + (y_percentage_height)+ '%');
            $this.css('background-position', (xPosition) + '% ' + (yPosition) + '%');
        }
    });
};

[Wooody82]

Hi @alghraibeh , I tried another way. To get the width and height for the element when the page is resized.

 data  = $this.data('animateSprite'),
 row = Math.floor(frameNumber / data.settings.columns),
 column = frameNumber % data.settings.columns;
 // Get width and height when its resized - NEW CODE.
$(window).resize(function() {
 data.settings.width  =  $this.width();
 data.settings.height =  $this.height();
}); 

And by using some CSS to set position to absolute for the element and maybe use max-width for container.