-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
72 lines (59 loc) · 3.78 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function _(e, all=false) {
let divs = document.querySelectorAll(e);
if (all || (divs.length > 1)) { return divs; }
return divs[0];
}
_('input', true).forEach(element => {
element.addEventListener('input', drawBordr);
});
const resultDiv = _('.result');
drawBordr();
function drawBordr() {
let borderWidth = Number(_('[name="borderWidth"]').value);
let color1 = _('[name="borderColor"]').value;
let dashLength = Number(_('[name="dashLength"]').value);
let spacing = Number(_('[name="spacing"]').value);
let slanting = Number(_('[name="slanting"]').value);
let borderFade = 100 - Number(_('[name="borderFade"]').value);
let diraction = _('[name="diraction"]').checked;
let animation = Number(_('[name="animation"]').value);
let color2 = 'transparent';
const backgroundImage = `
repeating-linear-gradient(${slanting + (diraction ? 180 : 0) }deg, ${color1}, ${color1} ${Math.round(dashLength * borderFade) / 100}px, ${color2} ${dashLength}px, ${color2} ${dashLength + (Math.round(spacing * borderFade) / 100)}px, ${color1} ${dashLength + spacing}px),
repeating-linear-gradient(${slanting + (diraction ? 270 : 90)}deg, ${color1}, ${color1} ${Math.round(dashLength * borderFade) / 100}px, ${color2} ${dashLength}px, ${color2} ${dashLength + (Math.round(spacing * borderFade) / 100)}px, ${color1} ${dashLength + spacing}px),
repeating-linear-gradient(${slanting + (diraction ? 0 : 180) }deg, ${color1}, ${color1} ${Math.round(dashLength * borderFade) / 100}px, ${color2} ${dashLength}px, ${color2} ${dashLength + (Math.round(spacing * borderFade) / 100)}px, ${color1} ${dashLength + spacing}px),
repeating-linear-gradient(${slanting + (diraction ? 90 : 270)}deg, ${color1}, ${color1} ${Math.round(dashLength * borderFade) / 100}px, ${color2} ${dashLength}px, ${color2} ${dashLength + (Math.round(spacing * borderFade) / 100)}px, ${color1} ${dashLength + spacing}px)`;
const borderLengthPx = Math.round((dashLength + spacing) / Math.sin((90 - Math.abs(slanting)) * Math.PI / 180) * 100) / 100;
const borderLength = (animation > 0) ? `calc(100% + ${borderLengthPx}px)` : '100%';
const backgroundSize = `${borderWidth}px ${borderLength}, ${borderLength} ${borderWidth}px, ${borderWidth}px ${borderLength} , ${borderLength} ${borderWidth}px`;
const backgroundPosition = `0 0, 0 0, 100% 0, 0 100%`;
resultDiv.style.backgroundImage = backgroundImage;
resultDiv.style.backgroundSize = backgroundSize;
resultDiv.style.backgroundPosition = backgroundPosition;
const animationPropery = (animation > 0) ? `borderAnimation ${Math.round((1.1 - animation) * 10) / 10}s infinite linear${diraction ? ' reverse' : ''}` : 'unset';
resultDiv.style.animation = animationPropery;
let animationTxt = '';
if (animation > 0) {
document.documentElement.style.setProperty('--AnimationLength', `-${borderLengthPx}px`);
animationTxt = `
<span><b>animation:</b> ${animationPropery};</span>
}<br>
<br>
@keyframes <b>borderAnimation</b> {
<span>from { background-position: 0 0, -${borderLengthPx}px 0, 100% -${borderLengthPx}px, 0 100%; }</span>
<span>to { background-position: 0 -${borderLengthPx}px, 0 0, 100% 0, -${borderLengthPx}px 100%; }</span>
`;
}
resultDiv.style.padding = `calc(1em + ${borderWidth}px)`;
resultDiv.innerHTML = `
<code>
.box {
<span><b>background-image:</b> ${backgroundImage};</span>
<span><b>background-size:</b> ${backgroundSize};</span>
<span><b>background-position:</b> ${backgroundPosition};</span>
<span><b>background-repeat:</b> no-repeat; </span>
${animationTxt}
}
</code>
`;
}