{"id":4883,"date":"2013-07-19T02:00:00","date_gmt":"2013-07-19T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/creating-a-jquery-animation-from-a-single-sprite-image\/"},"modified":"2024-02-08T00:28:43","modified_gmt":"2024-02-07T23:28:43","slug":"creating-a-jquery-animation-from-a-single-sprite-image","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/creating-a-jquery-animation-from-a-single-sprite-image\/","title":{"rendered":"Creating a jQuery animation from a single sprite image"},"content":{"rendered":"\n

Years ago it was quite common to see GIF animations all over the net. Basically we call GIF images to any image using the .gif extension. The Gif format provides a way to display a sequence of images one after another creating the illusion of an animation, same as the way cartoon movies were made in the past.<\/p>\n\n\n\n

\"javascript<\/figure>\n\n\n

Old days<\/h2>\n\n\n

Currently the use of Gif animations in websites has dramatically decreased, but why? Although you can actually have GIF animations with end (no loop), the fact that the color palette is so reduced (up to 256 per frame) has taken an important role on it. Color graduations were not looking good at all and many transparencies were being affected by this restriction.<\/p>\n\n\n

The modern way<\/h2>\n\n\n

We still want to show some animation in our websites from time to time. For some, we take courage and make use of CSS3 animations (and hopefully provide some fallback for non css3 browsers…)<\/p>\n\n\n\n

But we can also go for another option that provides us with the freedom of using images for our animations with all this implies. (remember the cartoons movies? )
\nWith just the use of Javascript we can have a pretty decent “movie”.<\/p>\n\n\n

A simple and quick solution<\/h2>\n\n\n

First, design your sequence of images. Remember now we will be able to use any image format (super quality images!). And please, do not use GIF format here or you won’t gain anything from this! \ud83d\ude42<\/strong><\/p>\n\n\n\n

So, basically we will be creating a simple sprite of images and then using jQuery move the position of the image inside a container:<\/p>\n\n\n

Javascript<\/h2>\n\n
var<\/span> imgHeight = 360<\/span>;\nvar<\/span> numImgs = 67<\/span>;\nvar<\/span> cont = 0<\/span>;\nvar<\/span> img = $('#container'<\/span>).find('img'<\/span>);\n\nvar<\/span> animation = setInterval( moveSprite,100<\/span>);\n\nfunction<\/span> moveSprite<\/span>(<\/span>)<\/span>{\n    img.css('margin-top'<\/span>, -1<\/span> * (cont*imgHeight));\n\n    cont++;\n    if<\/span>(cont == numImgs){\n        clearInterval(animation);\n    }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
HTML<\/h2>\n\n
<div<\/span> id<\/span>=\"container\"<\/span>><\/span>\n    <img<\/span> src<\/span>=\"https:\/\/d3ckw5pamzrtgd.cloudfront.net\/assets\/animations\/care\/animation.png\"<\/span> alt<\/span>=\"My super animation\"<\/span>\/><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
CSS<\/h2>\n\n
#container<\/span>{\n    width<\/span>:100%<\/span>;\n    height<\/span>: 350px<\/span>;\n    display<\/span>:block;\n    overflow<\/span>:hidden;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
See Demo<\/a><\/div>\n<\/div>\n\n\n\n
Here’s a fiddle<\/a> in case you want to play a bit.<\/p>\n\n\n\n
The sprite image I used for the example was taken from http:\/\/onlinedepartment.nl\/.<\/p>\n","protected":false},"excerpt":{"rendered":"
Years ago it was quite common to see GIF animations all over the net. Basically we call GIF images to any image using the .gif extension. The Gif format provides a way to display a sequence of images one after another creating the illusion of an animation, same as the way cartoon movies were made in the past.<\/p>\n","protected":false},"author":1,"featured_media":4882,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[120],"tags":[9,10,18],"class_list":["post-4883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-css","tag-javascript","tag-jquery"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4883"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4883\/revisions"}],"predecessor-version":[{"id":9594,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4883\/revisions\/9594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4882"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}