StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It could probably use some improvements but you could do something like this to create a marquee that moves from right to left:</p> <p>jQuery:</p> <pre><code>$(document).ready(function() { $('.floater').css('opacity', '0'); var randomNumber = 0; var $flot = null; floaters(); }) function floaters($current) { if ($current != null) $flot = $current; else $flot = $('.floater'); $flot.each(function() { randomNum = Math.ceil(Math.random() * 320); /*Random number from 1 to 320*/ $(this).css("left", randomNum); $(this).animate({ 'opacity': '1' }, { queue: false, duration: 5000 }); $(this).animate({ 'left': '0' }, 10000 * (randomNum / 320), 'linear', function() { $(this).css('opacity', '0.0'); floaters($(this)); }); }) } </code></pre> <p>I updated your CSS to contain absolute positions because technically, all boxes need to finish at the same location.</p> <pre><code>#latest { background:#000000; height:35px; width:320px; position:absolute; } .floater { width:32px; height:32px; background:#fff; position:absolute; left:320px; } </code></pre> <p>Basically you want to find all the floating boxes, begin the animate function but have a set time relative to where they began. When a float box does reach it's destination, the process repeats but passes itself to the function to reassign its starting position. This script doesn't accommodate for collisions of floating boxes although that could be added.</p> <p><a href="http://jsfiddle.net/r0m4n/Y73TZ/4/" rel="nofollow">http://jsfiddle.net/r0m4n/Y73TZ/4/</a></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