Databases
StackOverflow2013
Postsdbo
POScale and move a text smoothly with javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScale and move a text smoothly with javascript
    text
    copied!<p>I'm having a text scaled and moved via JavaScript / jQuery. I can't use jQuerys animate() because it has to fade in and out and has to be repeated and with more elements (end result: "flying" from the background, moving in different directions and fading out).</p> <p>My problem: It's not running smoothly and causes quite the cpu-usage. Here's a stripped down version:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;JS Bin&lt;/title&gt; &lt;!--[if IE]&gt; &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;script type="text/javascript"&gt; var steps = 300; // steps from start to finish // the final css values var endValueTop = 300; var endValueLeft = 300; var endValueFontSize = 100; // the current css values (get encreased in doAnimation()) var currentValueTop = 100; var currentValueLeft = 100; var currentValueFontSize = 0; // the added values in each step var stepsTop = (endValueTop - currentValueTop) / steps; var stepsLeft = (endValueLeft - currentValueLeft) / steps; var stepsFontSize = (endValueFontSize - currentValueFontSize) / steps; function doAnimation() { // increase current values currentValueTop += stepsTop; currentValueLeft += stepsLeft; currentValueFontSize += stepsFontSize; // apply them $("#hello").css({ top: currentValueTop, left: currentValueLeft, fontSize: currentValueFontSize }); // restart if there are steps left if (steps--) { window.setTimeout(function(){ doAnimation(); }, 50); } } // start the first time doAnimation(); &lt;/script&gt; &lt;style&gt; article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } body { position: relative; } p#hello { position: absolute; top: 100px; left: 100px; font-size: 0px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="hello"&gt;Hello World&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Running example on <a href="http://jsbin.com/oxode" rel="nofollow noreferrer">JS BIN</a>.</p> <p>Any suggestions? Bonus: How to reduce the cpu load? Thanks a lot!</p> <p>Steffen</p>
 

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