<!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