Databases
StackOverflow2013
Postsdbo
POAnimated image (e.g. non-GIF) with JavaScript and CSS?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimated image (e.g. non-GIF) with JavaScript and CSS?
    text
    copied!<p>I had been trying to animate a .png file with JavaScript while following <a href="https://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail">this</a> method. This is the <a href="http://i1243.photobucket.com/albums/gg555/Nyanja/logoCquake.png" rel="nofollow noreferrer">.png file</a> that I want to animate. I want the animated logo to be right by "Cupquake," but the logo doesn't even show up, let alone animate. However, changing "span class=logoCquake" in HTML to a div class displays the logo, but it is below the text.<br><br> My JavaScript file:</p> <pre><code>var scrollUp = (function () { var timerId; return function (height, times, element) { var i = 0; timerId = setInterval(function () { if (i &gt; times) i = 0; element.style.backgroundPosition = "0px -" + i * height + 'px'; i++; }, 100); }; })(); scrollUp(130, 30, document.getElementByClass('logoCquake')) </code></pre> <p>My HTML:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="../css/normalize.css" /&gt; &lt;link rel="stylesheet" href="../css/style.css" /&gt; &lt;script src="../scripts/logoCquake.js" type="text/javascript"&gt;&lt;/script&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Cupquake - Home&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="wrapper"&gt; &lt;div class="header"&gt; &lt;div class="topbar"&gt; &lt;div class="mCquake"&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;span class="ninja"&gt;Ninja&lt;/span&gt;&lt;span class="cupquake"&gt;Cupquake&lt;/span&gt;&lt;span class="logoCquake"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS file:</p> <pre><code>@font-face { font-family: typo_semib; src: url('fonts/typo_semib.ttf'); } @font-face { font-family: typo_light; src: url('fonts/typo_light.ttf'); } .wrapper .header { height: 250px; width: 100%; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0); background: -moz-linear-gradient(top,#ffa200,#d25400); background-image: -o-linear-gradient(#ffa200,#d25400); overflow: hidden; } .wrapper .header .topbar { height: 60px; background-image: url(../imgz/head/hBarSBg.png); background-repeat: repeat-x; } .wrapper .header .topbar .mCquake { height: 37px; width: 278px; background-image: url(../imgz/head/mCqRight.png); background-repeat: no-repeat; float: none; float: right !important; margin-right: 10px; margin-top: 11.5px; margin-bottom: 11.5px; } .wrapper .header .ninja { font-family: typo_semib; font-size: 48px; color: #303030; margin-left: 55px; } .wrapper .header .cupquake { font-family: typo_light; font-size: 48px; color: #303030; } .wrapper .header .logoCquake { height: 112px; width: 130px; background-image: url(../imgz/logo/logoCquake.png); background-repeat: no-repeat; } </code></pre> <p><strong>EDIT:</strong><br></p> <hr> <p>Tried again, but with the second method listed <a href="https://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail">here</a>, still nothing. These are my current HTML and JS codes:</p> <p>JS:</p> <pre><code>function SpriteAnim (options) { var timerId, i = 0, element = document.getElementByClass(options.elementClass); element.style.width = options.width + "px"; element.style.height = options.height + "px"; element.style.backgroundRepeat = "no-repeat"; element.style.backgroundImage = "url(" + options.sprite + ")"; timerId = setInterval(function () { if (i &gt;= options.frames) { i = 0; } element.style.backgroundPosition = "0px -" + i * options.height + "px"; i ++; }, 100); this.stopAnimation = function () { clearInterval(timerId); }; } var cupcake = new SpriteAnim({ width: 130, height: 112, frames: 30, sprite: "..\imgz\logo\logoCquake.png", elementClass : "logoCquake" }); </code></pre> <p>HTML:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="../css/normalize.css" /&gt; &lt;link rel="stylesheet" href="../css/style.css" /&gt; &lt;script language="javascript" src="SpriteAnim.js"&gt; &lt;/script&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Cupquake - Home&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="header"&gt; &lt;div class="topbar"&gt; &lt;div class="mCquake"&gt; &lt;/div&gt; &lt;/div&gt; &lt;span class="ninja"&gt;Ninja &lt;/span&gt;&lt;span class="cupquake"&gt;Cupquake&lt;/span&gt;&lt;span class="logoCquake"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload