File size: 1,547 Bytes
9db4052 7630ce9 dde6bca 7630ce9 9db4052 7630ce9 |
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 |
<div style="position: relative; height: 120px; width: 100%; overflow: hidden; background: linear-gradient(270deg, #FFEBEE, #FFF3E0, #FFFDE7, #E8F5E9, #E3F2FD, #F3E5F5); background-size: 1400% 1400%; animation: rainbow 13.33s ease infinite;">
<div id="banner-text" style="position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 120px; font-weight: black; font-family: Impact, sans-serif; color: white; animation: text-pan 13.33s linear infinite;">
Collaboration
</div>
</div>
<style>
@keyframes rainbow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes text-pan {
0% { left: -100%; }
16.66% { left: 100%; }
16.67% { left: -100%; content: "Compute"; }
33.33% { left: 100%; }
33.34% { left: -100%; content: "Security"; }
50% { left: 100%; }
50.01% { left: -100%; content: "Governance"; }
66.66% { left: 100%; }
66.67% { left: -100%; content: "Compliance"; }
83.33% { left: 100%; }
83.34% { left: -100%; content: "Support"; }
100% { left: 100%; }
}
</style>
<script>
const bannerText = document.getElementById('banner-text');
const textSequence = ["Collaboration", "Compute", "Security", "Governance", "Compliance", "Support"];
let currentIndex = 0;
setInterval(() => {
bannerText.textContent = textSequence[currentIndex];
currentIndex = (currentIndex + 1) % textSequence.length;
}, 2222); // 13.33s / 6 colors = ~2222ms per color
</script> |