RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 06:27:45 +00:00
Code Issues Activity Actions

Base: Add some more linear-gradient() transition hint demos

Browse source 
This adds a demo of making a 'rainbow' with hard edges using
transition hints, along with an animated demo of moving the
transition hint.
This commit is contained in:
MacDue 2022-08-11 19:03:45 +01:00 • committed by Andreas Kling
parent b205cf967d
commit c5d1cf7a5a
1 changed files with 42 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

57
Base/res/html/misc/gradients.html
View file

@ -102,6 +102,22 @@
background-image: linear-gradient(to top left, red, green, blue); background-image: linear-gradient(to top left, red, green, blue);
background-size: 30px 30px; background-size: 30px 30px;
} }
.grad-hints {
background-image: linear-gradient(to right, hotpink, 50%, rebeccapurple);
}
.grad-rainbow {
background-image: linear-gradient(
to right,
tomato,
25%,
orange 0,
50%,
yellowgreen 0,
75%,
dodgerblue 0)
}
</style> </style>
</head> </head>
<body> <body>
@ -112,13 +128,17 @@
<div class="box grad-2"></div> <div class="box grad-2"></div>
<div class="box grad-3"></div> <div class="box grad-3"></div>
<div class="box grad-4"></div> <div class="box grad-4"></div>
<b>Funky color hints:</b><br> <b>Funky transition hints:</b><br>
<div class="box grad-5"></div> <div class="box grad-5"></div>
<div class="box grad-6"></div> <div class="box grad-6"></div>
<div class="box grad-rainbow"></div>
<b>Transition hint test (click to animate):</b><br>
<div id="gradient-hints" class="box grad-hints"></div>
<b>Multiple color stops + arbitrary angles (click to spin!):</b><br> <b>Multiple color stops + arbitrary angles (click to spin!):</b><br>
<div id="gradient-spin" class="rect grad-7"></div> <div id="gradient-spin" class="rect grad-7"></div>
<b>Default color stops:</b><br> <b>Default color stops:</b><br>
<div class="box grad-8"></div> <div class="box grad-8"></div>
<b>Cool pattern demo</b><br>
<div class="box grad-9"></div> <div class="box grad-9"></div>
<b>Pre-multiplied alpha mixing test:</b><br> <b>Pre-multiplied alpha mixing test:</b><br>
<div class="box grad-10"></div> <div class="box grad-10"></div>
@ -156,23 +176,30 @@
}) })
} }
// Spinning gradient demo/test const backgroundAnimateDemo = (id, newBackgroundCallback) => {
let angle = 0; const el = document.getElementById(id);
let spinIntervalId = -1; let t = 0;
const gradientSpin = document.getElementById("gradient-spin"); let demoIntervalId = -1;
gradientSpin.onclick = () => { el.onclick = () => {
if (spinIntervalId <= -1) { if (demoIntervalId <= -1) {
spinIntervalId = setInterval(() => { demoIntervalId = setInterval(() => {
gradientSpin.style.backgroundImage = `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`; el.style.backgroundImage = newBackgroundCallback(t);
angle += 1; t += 1;
updateLabels(); updateLabels();
}, 100) }, 100)
} else { } else {
clearInterval(spinIntervalId); clearInterval(demoIntervalId);
spinIntervalId = -1; demoIntervalId = -1;
}
} }
} }
// Spinning gradient demo/test
backgroundAnimateDemo("gradient-spin", angle => `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`)
// Transistion hints demo
backgroundAnimateDemo("gradient-hints", t => `linear-gradient(to right, hotpink, ${((Math.sin(t/4)+1)*50)|0}%, rebeccapurple)`)
updateLabels(); updateLabels();
</script> </script>
</html> </html>