Skip to content

Instantly share code, notes, and snippets.

@danieldiekmeier

danieldiekmeier/threesteep.html

Created January 23, 2016 20:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danieldiekmeier/9174ab62a0c2154d30b7 to your computer and use it in GitHub Desktop.
Save danieldiekmeier/9174ab62a0c2154d30b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
threesteep.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<meta name="description" content="FDSAnimation">
<meta name="author" content="katze">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="396.754px" height="137.5px" viewBox="0 0 396.754 137.5" enable-background="new 0 0 396.754 137.5" xml:space="preserve">
<line id="line1" fill="#777777" stroke="#777777" stroke-width="6" stroke-miterlimit="10" x1="63.129" y1="122.958" x2="197.377" y2="122.958"/>
<line id="line2" fill="#777777" stroke="#777777" stroke-width="6" stroke-miterlimit="10" x1="204.129" y1="122.958" x2="338.377" y2="122.958"/>
<ellipse class="circle" fill="#777777" cx="49.906" cy="122.958" rx="14.223" ry="14.542"/>
<ellipse class="circle" fill="#777777" cx="198.692" cy="122.958" rx="14.223" ry="14.542"/>
<ellipse class="circle" fill="#777777" cx="346.849" cy="122.958" rx="14.223" ry="14.542"/>
<g class="group" fill="#428BCA">
<path class="box" d="M99.812,74.72c0,2.127-2.103,3.852-4.697,3.852H4.697C2.103,78.572,0,76.848,0,74.72V3.852
C0,1.724,2.103,0,4.697,0h90.418c2.594,0,4.697,1.724,4.697,3.852V74.72z"/>
<polygon class="triangle" points="36.437,77.572 49.906,92.878 63.375,77.572 "/>
</g>
<g class="group" fill="#428BCA">
<path class="box" d="M248.597,74.72c0,2.127-2.103,3.852-4.696,3.852h-90.418c-2.594,0-4.696-1.724-4.696-3.852V3.852
c0-2.127,2.103-3.852,4.696-3.852h90.418c2.594,0,4.696,1.724,4.696,3.852V74.72z"/>
<polygon class="triangle" points="185.223,77.572 198.692,92.878 212.161,77.572 "/>
</g>
<g class="group" fill="#428BCA">
<path class="box" d="M396.754,74.72c0,2.127-2.102,3.852-4.696,3.852H301.64c-2.594,0-4.697-1.724-4.697-3.852V3.852
c0-2.127,2.104-3.852,4.697-3.852h90.418c2.595,0,4.696,1.724,4.696,3.852V74.72z"/>
<polygon class="triangle" points="333.38,77.572 346.849,92.878 360.317,77.572 "/>
</g>
</svg>
<script>
var pause = 2000;
var boxes = $('.group');
var circles = $('.circle');
// var triangles = $('.triangle');
var count = boxes.length;
var i = 0;
setTimeout(loop, pause);
function loop () {
console.log(i, count);
switch (i) {
case 1:
$('#line1').attr({"stroke": "#ffb74d"});
break;
case 2:
$('#line2').attr({"stroke": "#ffb74d"});
break;
default:
$('#line1').attr({"stroke": "#777"});
$('#line2').attr({"stroke": "#777"});
boxes.attr({"fill": "#428bca"})
circles.attr({"fill": "#777"});
break;
}
boxes
.attr({"fill": "#d9edf7"})
.eq(i).attr({"fill": "#428bca"});
circles
.eq(i).attr({"fill": "#ffb74d"});
if(++i > count){
i = 0;
}
setTimeout(loop, pause);
}
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment