StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can try swapping backgrounds like so:</p> <p>Create CSS Class for each background and include transitions as part of the ruleset:</p> <pre><code>.background-1 { background: url('background-1.jpg'); -webkit-transition: background 500ms linear; -moz-transition: background 500ms linear; -o-transition: background 500ms linear; -ms-transition: background 500ms linear; transition: background 500ms linear; </code></pre> <p>}</p> <p>Add a script that will swap out the classes on a regular interval. (You would most likely wrap this script within $(document).ready) Since your transitioning backgrounds, you may not want the previous background immediately removed, so you can use a delay call to remove it after the transition would complete.</p> <p>The following example would start the background switch every two seconds, and remove the previous background after 1 second. Since in my CSS, I declared that the transition should take .5 seconds, the new background is already there before the old one is removed:</p> <pre><code>setInterval(function() { if($('#background').hasClass('background-1')) { $('#background').addClass('background-2'); setTimeout(function() { $('#background').removeClass('background-1'); }, 1000); } else if($('#background').hasClass('background-2')) { $('#background').addClass('background-1'); setTimeout(function() { $('#background').removeClass('background-2'); }, 1000); } }, 2000); </code></pre> <p>Note: The code that I've provided would require you to chain multiple if/else if statements together, there is probably a more efficient way to go about this. </p> <p>I've done something similar (background colors instead of images) as a teaser for an upcoming project of mine, you can check it out <a href="http://www.theaccordance.com" rel="nofollow">here</a>. </p> <p><strong>Update:</strong> Forgot to mention, make sure to declare one of the background classes in your Div element:</p> <pre><code><div id="background" class="background-1"></div> </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