Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
start [2019/07/09 15:31]
admin angelegt
start [2019/07/09 15:32] (aktuell)
Zeile 1: Zeile 1:
-====== SoftEnd ====== 
  
 +<​html>​
 +<iframe src="​http://​www.schulferien.org/​Uhrzeit/​uhrzeit_partner.html?​size=24&​ccolor=0000ff&​bgcolor=FFFFFF"​ name="​Uhrframe"​ width="​200"​ height="​38"​ align="​left"​ scrolling="​no"​ marginheight="​0"​ marginwidth="​50"​ frameborder="​0">​ </​iframe>​
 +</​html>​
 +
 +{{:​images:​softend:​softendstart.png?​direct&​nolink&​600| }}
 +
 +<​html>​
 +<​header1>​
 +</​header1>​
 +<​header>​
 +
 +
 +
 +<meta charset="​utf-8">​
 +<​style>​
 +
 +header {
 +  font-family:​ "​Helvetica Neue", Helvetica, Arial, sans-serif;
 +  width: 240px;
 +  height: 20px;
 +  position: relative;
 +  }
 +
 +form {
 +  position: relative;
 +  top: 1em;
 +  left: 1em;
 +  ​
 +}
 +
 +path {
 +  fill-rule: evenodd;
 +  stroke: #333;
 +  stroke-width:​ 2px;
 +}
 +
 +.sun path {
 +  fill: #6baed6;
 +}
 +
 +.planet path {
 +  fill: #9ecae1;
 +}
 +
 +.annulus path {
 +  fill: #c6dbef;
 +}
 +
 +</​style>​
 +
 +<script src="​http://​d3js.org/​d3.v3.min.js"></​script>​
 +<​script>​
 +
 +var width = 460,
 +    height = 300,
 +    radius = 50,
 +    x = Math.sin(2 * Math.PI / 3),
 +    y = Math.cos(2 * Math.PI / 3);
 +
 +var offset = 0,
 +    speed = 4,
 +    start = Date.now();
 +
 +var svg = d3.select("​header1"​).append("​svg"​)
 +    .attr("​width",​ width)
 +    .attr("​height",​ height)
 +  .append("​g"​)
 +    .attr("​transform",​ "​translate("​ + width / 2 + ","​ + height / 2 + "​)scale(.55)"​)
 +  .append("​g"​);​
 +
 +var frame = svg.append("​g"​)
 +    .datum({radius:​ Infinity});
 +
 +frame.append("​g"​)
 +    .attr("​class",​ "​annulus"​)
 +    .datum({teeth:​ 80, radius: -radius * 5, annulus: true})
 +  .append("​path"​)
 +    .attr("​d",​ gear);
 +
 +frame.append("​g"​)
 +    .attr("​class",​ "​sun"​)
 +    .datum({teeth:​ 16, radius: radius})
 +  .append("​path"​)
 +    .attr("​d",​ gear);
 +
 +frame.append("​g"​)
 +    .attr("​class",​ "​planet"​)
 +    .attr("​transform",​ "​translate(0,​-"​ + radius * 3 + "​)"​)
 +    .datum({teeth:​ 32, radius: -radius * 2})
 +  .append("​path"​)
 +    .attr("​d",​ gear);
 +
 +frame.append("​g"​)
 +    .attr("​class",​ "​planet"​)
 +    .attr("​transform",​ "​translate("​ + -radius * 3 * x + ","​ + -radius * 3 * y + "​)"​)
 +    .datum({teeth:​ 32, radius: -radius * 2})
 +  .append("​path"​)
 +    .attr("​d",​ gear);
 +
 +frame.append("​g"​)
 +    .attr("​class",​ "​planet"​)
 +    .attr("​transform",​ "​translate("​ + radius * 3 * x + ","​ + -radius * 3 * y + "​)"​)
 +    .datum({teeth:​ 32, radius: -radius * 2})
 +  .append("​path"​)
 +    .attr("​d",​ gear);
 +
 +d3.selectAll("​input[name=reference]"​)
 +    .data([radius * 5, Infinity, -radius])
 +    .on("​change",​ function(radius1) {
 +      var radius0 = frame.datum().radius,​ angle = (Date.now() - start) * speed;
 +      frame.datum({radius:​ radius1});
 +      svg.attr("​transform",​ "​rotate("​ + (offset += angle / radius0 - angle / radius1) + "​)"​);​
 +    });
 +
 +d3.selectAll("​input[name=speed]"​)
 +    .on("​change",​ function() { speed = +this.value;​ });
 +
 +function gear(d) {
 +  var n = d.teeth,
 +      r2 = Math.abs(d.radius),​
 +      r0 = r2 - 8,
 +      r1 = r2 + 8,
 +      r3 = d.annulus ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
 +      da = Math.PI / n,
 +      a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0),
 +      i = -1,
 +      path = ["​M",​ r0 * Math.cos(a0),​ ",",​ r0 * Math.sin(a0)];​
 +  while (++i < n) path.push(
 +      "​A",​ r0, ",",​ r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",",​ r0 * Math.sin(a0),​
 +      "​L",​ r2 * Math.cos(a0),​ ",",​ r2 * Math.sin(a0),​
 +      "​L",​ r1 * Math.cos(a0 += da / 3), ",",​ r1 * Math.sin(a0),​
 +      "​A",​ r1, ",",​ r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",",​ r1 * Math.sin(a0),​
 +      "​L",​ r2 * Math.cos(a0 += da / 3), ",",​ r2 * Math.sin(a0),​
 +      "​L",​ r0 * Math.cos(a0),​ ",",​ r0 * Math.sin(a0));​
 +  path.push("​M0,",​ -r3, "​A",​ r3, ",",​ r3, " 0 0,0 0,", r3, "​A",​ r3, ",",​ r3, " 0 0,0 0,", -r3, "​Z"​);​
 +  return path.join(""​);​
 +}
 +
 +d3.timer(function() {
 +  var angle = (Date.now() - start) * speed,
 +      transform = function(d) { return "​rotate("​ + angle / d.radius + "​)";​ };
 +  frame.selectAll("​path"​).attr("​transform",​ transform);
 +  frame.attr("​transform",​ transform); // frame of reference
 +});
 +
 +</​script>​
 +</​header>​
 +</​html>​
 +
 +
 +
 +
 +
 +
 +~~TAGCLOUD~~
  • start.1562679062.txt.gz
  • Zuletzt geändert: 2019/07/09 15:31
  • von admin