| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>ZARA</title> | |
| <style> | |
| /* https://www.dafont.com/bodoni-xt.font */ | |
| @font-face { | |
| font-family: 'BodoniXT'; | |
| src: url('BodoniXT.ttf'); | |
| } | |
| html, body { | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| font-family: 'BodoniXT', Georgia; | |
| } | |
| span { | |
| position: absolute; | |
| font-size: 100px; | |
| top: 50%; | |
| } | |
| </style> | |
| <body></body> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script> | |
| const text = Array.from("ZARA") | |
| const margin = 200 | |
| const scaleX = d3.scaleLinear() | |
| .domain([975, 400]) | |
| .range([1.5, 1]) | |
| const scaleY = d3.scaleLinear() | |
| .domain([975, 400]) | |
| .range([0.75, 1.5]) | |
| const body = d3.select("body") | |
| body.selectAll("span") | |
| .data(text) | |
| .enter() | |
| .append("span") | |
| .text(d => d) | |
| function render() { | |
| const x = d3.scaleLinear() | |
| .domain([0, text.length - 1]) | |
| .range([margin, innerWidth - margin]) | |
| d3.selectAll("span") | |
| .style("left", (d, i) => `${x(i)}px`) | |
| .style("transform", ` | |
| scaleX(${scaleX(innerWidth)}) | |
| scaleY(${scaleY(innerWidth)}) | |
| translate(-50%, -50%) | |
| `) | |
| } | |
| d3.timer(render) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment