Databases
StackOverflow2013
Postsdbo
POWorking off a CSS3 animated background tutorial
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWorking off a CSS3 animated background tutorial
    text
    copied!<p>I'm working off of a really great CSS3 animated background tutorial that can be found <a href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/comment-page-6/#comments" rel="nofollow">here</a></p> <p>The only problem is that it won't work. Unfortunately, the tutorial is just a blog post with code, and there's no specific name for it, so I've been having trouble finding support for my issue. </p> <p>It uses simple html markup: </p> <pre><code>&lt;ul class="cb-slideshow"&gt; &lt;li&gt; &lt;span&gt;Image 01&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 02&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 03&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 04&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 05&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 06&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 07&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 08&gt;&lt;/span&gt; &lt;div&gt; &lt;h3&gt;&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p></p> <p>And then the rest is done in CSS3</p> <pre><code> .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url() repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; animation: imageAnimation 40s linear infinite 0s; } .cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 40s linear infinite 0s; -moz-animation: titleAnimation 40s linear infinite 0s; -o-animation: titleAnimation 40s linear infinite 0s; -ms-animation: titleAnimation 40s linear infinite 0s; animation: titleAnimation 40s linear infinite 0s; } .cb-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .cb-slideshow li:nth-child(1) span { background-image: url(../images/homepage/img01.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(../images/homepage/img02.jpg); animation-delay: 5s; -webkit-animation-delay: 5s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/homepage/img03.jpg); animation-delay: 10s; -webkit-animation-delay: 10s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/homepage/img04.jpg); animation-delay: 15s; -webkit-animation-delay: 15s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/homepage/img05.jpg); animation-delay: 20s; -webkit-animation-delay: 20s; } .cb-slideshow li:nth-child(6) span { background-image: url(../images/homepage/img06.jpg); animation-delay: 25s; -webkit-animation-delay: 25s; } .cb-slideshow li:nth-child(7) span { background-image: url(../images/homepage/img07.jpg); animation-delay: 30s; -webkit-animation-delay: 30s; } .cb-slideshow li:nth-child(8) span { background-image: url(../images/homepage/img08.jpg); animation-delay: 35s; -webkit-animation-delay: 35s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } </code></pre> <p>There's even a backup in case the browser doesn't support CSS3 animations:</p> <pre><code>.no-cssanimations .cb-slideshow li span{ opacity: 1; </code></pre> <p>}</p> <p>This is supposed to ensure that you don't end up with a blank page, which is what I have. I've re-checked my links, and almost entirely copied the demo, but it's not displaying on my page. Is anyone familiar with CSS3 and have any ideas as to what my issue could be?</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