index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZARA</title>
<style>
@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>