Created
January 23, 2016 20:01
-
-
Save danieldiekmeier/9174ab62a0c2154d30b7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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