2018-09-10 20:21:55 +03:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<link href="../inter-ui.css" rel="stylesheet">
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: 'Inter UI var';
|
|
|
|
|
font-weight: 400 900;
|
2018-09-30 22:34:27 +03:00
|
|
|
font-style: oblique 0deg 10deg;
|
2018-09-10 20:21:55 +03:00
|
|
|
src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"),
|
|
|
|
|
url('../font-files/Inter-UI.var.woff2') format("woff2-variations");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
font-family: 'Inter UI', sans-serif;
|
|
|
|
|
font-size: 14px;
|
2018-09-29 20:32:06 +03:00
|
|
|
letter-spacing: 0;
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sample {
|
|
|
|
|
padding: 40px 40px 40px 35px;
|
2018-09-30 22:34:27 +03:00
|
|
|
font-size: var(--size);
|
2018-09-10 20:21:55 +03:00
|
|
|
letter-spacing: -0.03em;
|
2018-09-30 22:34:27 +03:00
|
|
|
font-variation-settings: 'wght' var(--weight), 'slnt' var(--slant);
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
|
|
|
html {
|
|
|
|
|
font-family: 'Inter UI var', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ctrl {
|
|
|
|
|
display: flex;
|
|
|
|
|
/*justify-content:center;*/
|
|
|
|
|
align-items:center;
|
|
|
|
|
background: #e5e5e5;
|
|
|
|
|
color: #333;
|
|
|
|
|
padding:20px 20px 20px 40px;
|
|
|
|
|
}
|
|
|
|
|
.ctrl input {
|
|
|
|
|
margin:0 8px;
|
|
|
|
|
}
|
|
|
|
|
.ctrl label {
|
|
|
|
|
display: flex;
|
|
|
|
|
/*justify-content:center;*/
|
|
|
|
|
align-items:center;
|
|
|
|
|
margin-right:20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="ctrl">
|
2018-09-30 22:34:27 +03:00
|
|
|
<label>Weight: <input type="range" value="400" min="400" max="900" name="weight"></label>
|
|
|
|
|
<label>Slant: <input type="range" value="0" min="0" max="10" step="0.01" name="slant"></label>
|
|
|
|
|
<label>Size: <input type="range" value="96" min="6" max="400" name="size"></label>
|
2018-09-10 20:21:55 +03:00
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" name="animate">
|
|
|
|
|
Animate
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sample" contenteditable>
|
2018-10-08 04:32:03 +03:00
|
|
|
Inter UI 3.0<br>
|
2018-09-30 22:34:27 +03:00
|
|
|
Variable weight axis<br>
|
|
|
|
|
Variable slant/oblique axis<br>
|
|
|
|
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
|
|
|
abcdefghijklmnopqrstuvwxyz<br>
|
|
|
|
|
1234567890?!()[]{}&*^%$#@~<><br>
|
2018-09-10 20:21:55 +03:00
|
|
|
</div>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
2018-09-30 22:34:27 +03:00
|
|
|
|
2018-09-10 20:21:55 +03:00
|
|
|
|
|
|
|
|
var samples = document.querySelectorAll('div.sample')
|
|
|
|
|
var weightInput = document.querySelector('[name="weight"]')
|
2018-09-30 22:34:27 +03:00
|
|
|
var slantInput = document.querySelector('[name="slant"]')
|
|
|
|
|
var sizeInput = document.querySelector('[name="size"]')
|
2018-09-10 20:21:55 +03:00
|
|
|
|
|
|
|
|
|
2018-09-30 22:34:27 +03:00
|
|
|
var ui = {
|
|
|
|
|
weight: parseFloat(weightInput.value),
|
|
|
|
|
slant: parseFloat(slantInput.value),
|
|
|
|
|
size: parseFloat(sizeInput.value),
|
|
|
|
|
|
|
|
|
|
setState(props) {
|
|
|
|
|
for (let k in props) {
|
|
|
|
|
if (k in this) {
|
|
|
|
|
this[k] = props[k]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.update()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
update() {
|
|
|
|
|
let s = document.body.style
|
|
|
|
|
s.setProperty(`--weight`, this.weight)
|
|
|
|
|
s.setProperty(`--slant`, this.slant)
|
|
|
|
|
s.setProperty(`--size`, `${this.size}px`)
|
|
|
|
|
// for (let i = 0; i < samples.length; i++) {
|
|
|
|
|
// let sample = samples[i]
|
|
|
|
|
// // sample.style.fontVariationSettings =
|
|
|
|
|
// // `'wght' ${ui.weight}, 'ital' ${ui.slant}`
|
|
|
|
|
// sample.style.fontVariationSettings =
|
|
|
|
|
// `'wght' ${ui.weight}, 'slnt' ${ui.slant}`
|
|
|
|
|
// }
|
|
|
|
|
},
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
|
|
|
|
|
2018-09-30 22:34:27 +03:00
|
|
|
ui.update()
|
|
|
|
|
|
2018-09-10 20:21:55 +03:00
|
|
|
// monotime() :float milliseconds
|
|
|
|
|
//
|
|
|
|
|
var monotime = (
|
|
|
|
|
window.performance !== undefined && window.performance.now ? function() {
|
|
|
|
|
return window.performance.now()
|
|
|
|
|
} : Date.now ? function() {
|
|
|
|
|
return Date.now()
|
|
|
|
|
} : function() {
|
|
|
|
|
return (new Date()).getTime()
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var isAnimating = false
|
|
|
|
|
function startAnimation() {
|
|
|
|
|
if (isAnimating) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
weightInput.disabled = true
|
2018-09-30 22:34:27 +03:00
|
|
|
slantInput.disabled = true
|
2018-09-10 20:21:55 +03:00
|
|
|
isAnimating = true
|
|
|
|
|
let v = 0
|
|
|
|
|
let wmin = parseFloat(weightInput.min)
|
|
|
|
|
, wmax = parseFloat(weightInput.max)
|
2018-09-30 22:34:27 +03:00
|
|
|
, imin = parseFloat(slantInput.min)
|
|
|
|
|
, imax = parseFloat(slantInput.max)
|
2018-09-10 20:21:55 +03:00
|
|
|
, wspeed = 200 // lower is faster; time divisor
|
|
|
|
|
, ispeed = 800
|
|
|
|
|
, clamp = 0.001
|
|
|
|
|
, startTime = monotime()
|
|
|
|
|
function update() {
|
|
|
|
|
let r = 0, v = 0
|
|
|
|
|
|
|
|
|
|
r = (1 + Math.sin((monotime() - startTime) / wspeed)) * 0.5
|
|
|
|
|
v = (wmin * (1 - clamp)) + (((wmax * (1 + clamp)) - (wmin * (1 - clamp))) * r)
|
|
|
|
|
v = Math.max(wmin, Math.min(wmax, v))
|
2018-09-30 22:34:27 +03:00
|
|
|
ui.weight = v
|
2018-09-10 20:21:55 +03:00
|
|
|
weightInput.value = v
|
|
|
|
|
|
|
|
|
|
r = (1 + Math.sin((monotime() - startTime) / ispeed)) * 0.5
|
|
|
|
|
v = (imin * (1 - clamp)) + (((imax * (1 + clamp)) - (imin * (1 - clamp))) * r)
|
|
|
|
|
v = Math.max(imin, Math.min(imax, v))
|
2018-09-30 22:34:27 +03:00
|
|
|
ui.slant = v
|
|
|
|
|
slantInput.value = v
|
|
|
|
|
|
|
|
|
|
ui.update()
|
|
|
|
|
|
2018-09-10 20:21:55 +03:00
|
|
|
if (isAnimating) {
|
|
|
|
|
requestAnimationFrame(update)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
update()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function stopAnimation() {
|
|
|
|
|
isAnimating = false
|
|
|
|
|
weightInput.disabled = false
|
2018-09-30 22:34:27 +03:00
|
|
|
slantInput.disabled = false
|
|
|
|
|
weightInput.value = String(ui.weight)
|
|
|
|
|
slantInput.value = String(ui.slant)
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
|
|
|
|
|
2018-09-30 22:34:27 +03:00
|
|
|
function bindRangeControl(rangeInput, handler) {
|
|
|
|
|
rangeInput.addEventListener('input',
|
|
|
|
|
rangeInput.valueAsNumber !== undefined ? ev => {
|
|
|
|
|
handler(rangeInput.valueAsNumber)
|
|
|
|
|
} : ev => {
|
|
|
|
|
handler(parseFloat(rangeInput.value))
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
}
|
2018-09-10 20:21:55 +03:00
|
|
|
|
2018-09-30 22:34:27 +03:00
|
|
|
// UI controls
|
|
|
|
|
bindRangeControl(weightInput, weight => ui.setState({ weight }) )
|
|
|
|
|
bindRangeControl(slantInput, slant => ui.setState({ slant }) )
|
|
|
|
|
bindRangeControl(sizeInput, size => ui.setState({ size }) )
|
|
|
|
|
|
|
|
|
|
// weightInput.addEventListener('input',
|
|
|
|
|
// weightInput.valueAsNumber !== undefined ? ev => {
|
|
|
|
|
// setWeight(weightInput.valueAsNumber)
|
|
|
|
|
// } : ev => {
|
|
|
|
|
// setWeight(parseFloat(weightInput.value))
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
// UI control: slant slider
|
|
|
|
|
// slantInput.addEventListener('input',
|
|
|
|
|
// slantInput.valueAsNumber !== undefined ? ev => {
|
|
|
|
|
// setSlant(slantInput.valueAsNumber)
|
|
|
|
|
// } : ev => {
|
|
|
|
|
// setSlant(parseFloat(slantInput.value))
|
|
|
|
|
// }
|
|
|
|
|
// )
|
2018-09-10 20:21:55 +03:00
|
|
|
|
|
|
|
|
// UI control: animate
|
|
|
|
|
var animateInput = document.querySelector('[name="animate"]')
|
|
|
|
|
if (!window.requestAnimationFrame) {
|
|
|
|
|
animateInput.disabled = true
|
|
|
|
|
} else {
|
|
|
|
|
animateInput.addEventListener('change', ev => {
|
|
|
|
|
if (animateInput.checked) {
|
|
|
|
|
startAnimation()
|
|
|
|
|
} else {
|
|
|
|
|
stopAnimation()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
