Skip to content

Instantly share code, notes, and snippets.

@danklammer

danklammer/index.html

Forked from anonymous/index.html
Created September 22, 2015 18:03
Show Gist options
  • Save danklammer/cad6444a2a3ae4405160 to your computer and use it in GitHub Desktop.
Save danklammer/cad6444a2a3ae4405160 to your computer and use it in GitHub Desktop.
Download ZIP
Super Simple JS + CSS Crossfade (SVG) // source http://jsbin.com/bepoxe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Super Simple JS + CSS Crossfade (SVG)</title>
<meta name="description" content="Super Simple JS + CSS Crossfade (SVG)">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style id="jsbin-css">
body {
text-align: center;
background: #ddd;
padding: 15px;
}
svg {
width: 100%;
max-width: 320px;
height: auto;
}
#crossfade rect {
opacity: 0;
}
#crossfade rect:nth-child(1),
#crossfade rect:nth-child(2) {
opacity: 1;
transition: opacity 1s ease;
}
</style>
</head>
<body>
<svg width="374" height="761" viewBox="0 0 374 761">
<g id="crossfade">
<rect x="25" y="92" width="324" height="576" fill="red" />
<rect x="25" y="92" width="324" height="576" fill="orange" />
<rect x="25" y="92" width="324" height="576" fill="green" />
<rect x="25" y="92" width="324" height="576" fill="pink" />
<rect x="25" y="92" width="324" height="576" fill="blue" />
<rect x="25" y="92" width="324" height="576" fill="purple" />
</g>
<path d="M2 96L2 60C2 27 29 0 62 0L312 0C345 0 372 27 372 60L372 162 372 162 374 162 374 218 372 218 372 701C372 734 345 761 312 761L62 761C29 761 2 734 2 701L2 287 0 287 0 231 2 231 2 231 2 217 2 217 0 217 0 161 2 161 2 127 0 127 0 96 2 96 2 96ZM187 737C202 737 214 725 214 710 214 695 202 683 187 683 172 683 160 695 160 710 160 725 172 737 187 737ZM187 734C200 734 211 723 211 710 211 697 200 686 187 686 174 686 163 697 163 710 163 723 174 734 187 734ZM25 92L349 92 349 667 25 667 25 92ZM157 48C157 46 158 45 160 45L214 45C216 45 217 46 217 48 217 50 216 51 214 51L160 51C158 51 157 50 157 48ZM128 54C131 54 134 51 134 48 134 45 131 42 128 42 125 42 122 45 122 48 122 51 125 54 128 54Z" fill="#fff" fill-rule="evenodd"></path>
</svg>
<script id="jsbin-javascript">
// jQuery Version
/*
$(function(){
setInterval(function(){
$('#crossfade rect:first-child').appendTo('#crossfade');
}, 3000);
});
*/
// Vanilla JS Version
document.addEventListener("DOMContentLoaded", function() {
setInterval(function () {
var crossfade = document.getElementById('crossfade');
var topItem = crossfade.firstChild;
crossfade.appendChild(topItem);
}, 3000);
});
</script>
<script id="jsbin-source-css" type="text/css">body {
text-align: center;
background: #ddd;
padding: 15px;
}
svg {
width: 100%;
max-width: 320px;
height: auto;
}
#crossfade rect {
opacity: 0;
}
#crossfade rect:nth-child(1),
#crossfade rect:nth-child(2) {
opacity: 1;
transition: opacity 1s ease;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// jQuery Version
/*
$(function(){
setInterval(function(){
$('#crossfade rect:first-child').appendTo('#crossfade');
}, 3000);
});
*/
// Vanilla JS Version
document.addEventListener("DOMContentLoaded", function() {
setInterval(function () {
var crossfade = document.getElementById('crossfade');
var topItem = crossfade.firstChild;
crossfade.appendChild(topItem);
}, 3000);
});
</script></body>
</html>
Raw
jsbin.bepoxe.css
body {
text-align: center;
background: #ddd;
padding: 15px;
}
svg {
width: 100%;
max-width: 320px;
height: auto;
}
#crossfade rect {
opacity: 0;
}
#crossfade rect:nth-child(1),
#crossfade rect:nth-child(2) {
opacity: 1;
transition: opacity 1s ease;
}
Raw
jsbin.bepoxe.js
// jQuery Version
/*
$(function(){
setInterval(function(){
$('#crossfade rect:first-child').appendTo('#crossfade');
}, 3000);
});
*/
// Vanilla JS Version
document.addEventListener("DOMContentLoaded", function() {
setInterval(function () {
var crossfade = document.getElementById('crossfade');
var topItem = crossfade.firstChild;
crossfade.appendChild(topItem);
}, 3000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment