<div id="main" class="container lead-red">
HAPPY PRIDE MONTH
</div>
<div id="fade" class="container lead-orange">
HAPPY PRIDE MONTH
</div>
$transition-duration: 1400ms;
.container {
transition: all $transition-duration ease-in-out;
font-size: 6em;
font-weight: 800;
font-family: Arial, sans-serif;
text-align: center;
opacity: 1;
position: absolute;
top: 0;
padding: 0.5em;
}
.container.hide {
opacity: 0;
}
.container.halt {
transition-duration: 0ms;
}
#main {
z-index: 1;
}
#fade {
z-index: 2;
}
$red: red;
$orange: orange;
$yellow: yellow;
$green: green;
$blue: blue;
$purple: purple;
@mixin lead($one, $two, $three, $four, $five, $six) {
background: linear-gradient(80deg, $one, $two, $three, $four, $five, $six);
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lead-red {
@include lead($red, $orange, $yellow, $green, $blue, $purple);
}
.lead-orange {
@include lead($orange, $yellow, $green, $blue, $purple, $red);
}
.lead-yellow {
@include lead($yellow, $green, $blue, $purple, $red, $orange);
}
.lead-green {
@include lead($green, $blue, $purple, $red, $orange, $yellow);
}
.lead-blue {
@include lead($blue, $purple, $red, $orange, $yellow, $green);
}
.lead-purple {
@include lead($purple, $red, $orange, $yellow, $green, $blue);
}
View Compiled
const rainbow = ["red", "orange", "yellow", "green", "blue", "purple"];
const target = 1400;
var lastTimeoutExecuted = null;
var getNextTimeoutDuration = function() {
var now = (new Date().getTime());
if (!lastTimeoutExecuted) {
lastTimeoutExecuted = now;
return target;
}
var diff = (now - lastTimeoutExecuted);
lastTimeoutExecuted = now;
return ((2 * target) - diff);
};
function rainbowify() {
const main = document.getElementById("main");
const fade = document.getElementById("fade");
var i;
const ilen = rainbow.length;
for (i = 0; i < ilen; i++) {
if (main.classList.contains("lead-" + rainbow[i])) {
main.classList.remove("lead-" + rainbow[i]);
main.classList.add("lead-" + rainbow[(i + 1) % ilen]);
fade.classList.add("halt");
fade.classList.add("hide");
fade.classList.remove("lead-" + rainbow[(i + 1) % ilen]);
fade.classList.add("lead-" + rainbow[(i + 2) % ilen]);
void fade.offsetWidth;
fade.classList.remove("halt");
fade.classList.remove("hide");
break;
}
}
};
function intervalFunction() {
rainbowify();
setTimeout(intervalFunction, getNextTimeoutDuration());
};
intervalFunction();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.