Hexagon transition, meant for transition-on-scroll
Last active
July 4, 2020 15:42
-
-
Save danhammer/e93ce2e1853fd331b0b0a2013e08e384 to your computer and use it in GitHub Desktop.
interactive
This file contains hidden or 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
| license: mit |
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <title>Input test</title> | |
| <p> | |
| <input type="range" min="0" max="100" id="nAngle"> | |
| <br> | |
| <label for="nAngle" | |
| style="width: 240px; text-align: left"> | |
| scroll percentage: <span id="nAngle-value">…</span> | |
| </label> | |
| </p> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
| <script> | |
| var width = 800; | |
| var height = 400; | |
| var h = (Math.sqrt(3)/2), | |
| radius = 190, | |
| xp = 0, | |
| yp = 0, | |
| hexagonData = [ | |
| { "x": radius+xp, "y": yp}, | |
| { "x": radius/2+xp, "y": radius*h+yp}, | |
| { "x": -radius/2+xp, "y": radius*h+yp}, | |
| { "x": -radius+xp, "y": yp}, | |
| { "x": -radius/2+xp, "y": -radius*h+yp}, | |
| { "x": radius/2+xp, "y": -radius*h+yp}, | |
| { "x": radius+xp, "y": yp} | |
| ]; | |
| drawHexagon = | |
| d3.svg.line() | |
| .x(function(d) { return d.x; }) | |
| .y(function(d) { return d.y; }); | |
| var i = 0; | |
| var end = 10; | |
| var hexarr = []; | |
| while(i < end){ | |
| i++ | |
| hexarr.push( | |
| { | |
| "data": drawHexagon(hexagonData), | |
| "num": i | |
| } | |
| ); | |
| } | |
| var holder = d3.select("body") | |
| .append("svg:svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("background-color", "black"); | |
| holder.selectAll("path") | |
| .data(hexarr).enter().append("svg:path") | |
| .attr("d", function(d) { return d.data;}) | |
| .attr("stroke", "rgba(255,255,255,1)") | |
| .attr("fill", "none") | |
| .attr("transform", "translate(400, 200)") | |
| .style("stroke-width", 1.5) | |
| ; | |
| // when the input range changes update the angle | |
| d3.select("#nAngle").on("input", function() { | |
| update(+this.value); | |
| }); | |
| // Initial starting angle of the hexagon | |
| update(0); | |
| function update(nAngle) { | |
| // adjust the hexagon on the range slider | |
| d3.select("#nAngle-value").text(nAngle); | |
| d3.select("#nAngle").property("value", nAngle); | |
| // rotate the hexagon | |
| holder.selectAll("path") | |
| .attr( | |
| "transform", function(d) { | |
| return "translate(400, 200) rotate("+ d.num/16.5 * nAngle +")" | |
| }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment