pseudo-title
InnerFade-Slideshow
Innerfade Slideshow
Quelle: https://medienfreunde.de/lab/innerfade/
- OnPage Image-Slider für responsive Webseiten mit Text-Overlay
Beispiel 3
html (Beispiel 1)
<ul id="news" class="innerfade fadetxt" style="position: relative; height: 50px;">
<li style="z-index: 4; position: absolute; display: none;">
<a href="#">Good Guy bad Guy</a> <img src=
"https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/if13862583544d84b/version/1429998751/image.png" alt="Good Guy bad Guy" />
</li>
<li style="z-index: 3; position: absolute; display: none;">
<a href="#">Whizzkids</a><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/i7fb66d4e44a9e6a7/version/1429998751/image.png"
alt="Whizzkids" />
</li>
<li style="z-index: 2; position: absolute; display: none;">
<a href="#">oh Mother</a><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/i09c1b8089dfd5ab4/version/1429998752/image.png"
alt="Königin Mutter" />
</li>
<li style="z-index: 1; position: absolute;">
<a href="#">Hybride Archivierung</a><img src=
"https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/i89d686aca40ed181/version/1429998751/image.png" alt="Hybride Archivierung" />
</li>
</ul>
html (Beispiel 2)
<ul id="portfolio" class="innerfade fadetxt" style="position: relative; height: 50px;">
<li style="z-index: 4; position: absolute; display: list-item;">
<a href="#">Good Guy bad Guy</a> <img src=
"https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/if13862583544d84b/version/1429998751/image.png" alt="Good Guy bad Guy" />
</li>
<li style="z-index: 3; position: absolute; display: none;">
<a href="#">Whizzkids</a><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/i7fb66d4e44a9e6a7/version/1429998751/image.png"
alt="Whizzkids" />
</li>
<li style="z-index: 2; position: absolute; display: none;">
<a href="#">oh Mother</a><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/i09c1b8089dfd5ab4/version/1429998752/image.png"
alt="Königin Mutter" />
</li>
<li style="z-index: 1; position: absolute; display: none;">
<a href="#">Hybride Archivierung</a><img src=
"https://image.jimcdn.com/app/cms/image/transf/dimension=146x10000:format=png/path/s2b6f668df1a0c9f3/image/i89d686aca40ed181/version/1429998751/image.png" alt="Hybride Archivierung" />
</li>
</ul>
html (Beispiel 3)
<ul id="images" class="innerfade fadetxt" style="position: relative; height:350px">
<li style="z-index: 4; position: absolute; display: list-item;">
<a href="#">Good Guy bad Guy</a>
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/ib2eb35ac0302337a/version/1429998751/image.jpg" width="75%"
alt="Good Guy bad Guy" />
</li>
<li style="z-index: 3; position: absolute; display: none;">
<a href="#">Whizzkids</a>
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/i7383b54b00b26b9e/version/1429998751/image.jpg" width="75%"
alt="Whizzkids" />
</li>
<li style="z-index: 2; position: absolute; display: none;">
<a href="#">oh Mother</a>
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/i63dbe585c5fe4997/version/1430003127/image.jpg" width="75%"
alt="Königin Mutter" />
</li>
<li style="z-index: 1; position: absolute; display: none;">
<a href="#">Dropbox</a>
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/iaa0e6b932ca056e3/version/1392863427/image.png" width="75%"
alt="Dropbox" />
</li>
</ul>
html (Beispiel 3)
<ul id="images" class="innerfade fadetxt" style="position: relative; height:300px">
<li style="z-index: 4; position: absolute; display: list-item;">
<a href="#">Good Guy bad Guy</a> <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/ib2eb35ac0302337a/version/1429998751/image.jpg" width="75%" alt=
"Good Guy bad Guy" />
</li>
<li style="z-index: 3; position: absolute; display: none;">
<a href="#">Whizzkids</a> <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/i7383b54b00b26b9e/version/1429998751/image.jpg" width="75%" alt=
"Whizzkids" />
</li>
<li style="z-index: 2; position: absolute; display: none;">
<a href="#">oh Mother</a> <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/i63dbe585c5fe4997/version/1430003127/image.jpg" width="75%" alt=
"Königin Mutter" />
</li>
<li style="z-index: 1; position: absolute; display: none;">
<a href="#">Dropbox</a> <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2b6f668df1a0c9f3/image/iaa0e6b932ca056e3/version/1392863427/image.png" width="75%" alt="Dropbox" />
</li>
</ul>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$('#news').innerfade({ animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '50px' });
$('#portfolio').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '50px' });
$('#images').innerfade({ speed: 'slow', animationtype: 'fade', speed: 350, timeout: 4000, type: 'sequence', containerheight: '400px' });
$('.fade').innerfade({ speed: 'slow', timeout: 1000, type: 'sequence', containerheight: '1.5em' });
} );
//]]>
</script>
Images
