<div id="btnContainer">
<button id="btnUpdateText">EDIT TEXT</button>
</div>
<a href="https://superplug.in/supermarquee"
target="_blank">
<div id="badge">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 517.85 603.34" style="background-color:#8089ff"><defs><style>.cls-1{fill:#fff;fill-rule:evenodd;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="9.85" y1="222.09" x2="337.68" y2="222.09" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#d9d9d9"/></linearGradient><linearGradient id="linear-gradient-2" x1="9.85" y1="440.61" x2="337.68" y2="440.61" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="9.85" y1="310.78" x2="337.68" y2="310.78" xlink:href="#linear-gradient"/></defs><title>S2</title><path class="cls-1" d="M524.53,143.94l-.54-32.5-31-9.76C422.13,79.39,352.39,52.89,286,19.38L265.71,9.11V39.42l8.13,4.1c67.66,34.18,138.77,61.23,211,84l12.4,3.9.22,13c2.73,165.28-47.45,381.67-226.35,438l-5.42,1.71v28.36l13.54-4.26C470.9,547.85,527.47,322.34,524.53,143.94Zm-159,171.32c-36.82-13.69-69.81-27.56-99.81-41.59V386.18c17.82,8,36.68,16,56.73,23.9A194.48,194.48,0,0,1,297.61,439a158.68,158.68,0,0,1-31.9,23.61V563.56c53.46-16.83,94.57-49.06,125.78-90.06a325.86,325.86,0,0,0,20.9-31.14c17.67-29.84,31.21-62.86,41.35-97.11C422,335.37,392.72,325.37,365.52,315.26ZM479.45,143.07C392,115.54,323.18,87,265.71,58V161.4C304.42,179.16,344,195,384.09,209.35a604.1,604.1,0,0,1-10,70.66Q418,296.5,462.83,310.36C475.81,253.28,480.3,194.67,479.45,143.07ZM365.52,315.26c-36.82-13.69-69.81-27.56-99.81-41.59V386.18c17.82,8,36.68,16,56.73,23.9A194.48,194.48,0,0,1,297.61,439a158.68,158.68,0,0,1-31.9,23.61V563.56c53.46-16.83,94.57-49.06,125.78-90.06a325.86,325.86,0,0,0,20.9-31.14c17.67-29.84,31.21-62.86,41.35-97.11C422,335.37,392.72,325.37,365.52,315.26ZM479.45,143.07C392,115.54,323.18,87,265.71,58V161.4C304.42,179.16,344,195,384.09,209.35a604.1,604.1,0,0,1-10,70.66Q418,296.5,462.83,310.36C475.81,253.28,480.3,194.67,479.45,143.07ZM365.52,315.26c-36.82-13.69-69.81-27.56-99.81-41.59V386.18c17.82,8,36.68,16,56.73,23.9A194.48,194.48,0,0,1,297.61,439a158.68,158.68,0,0,1-31.9,23.61V563.56c53.46-16.83,94.57-49.06,125.78-90.06a325.86,325.86,0,0,0,20.9-31.14c17.67-29.84,31.21-62.86,41.35-97.11C422,335.37,392.72,325.37,365.52,315.26ZM479.45,143.07C392,115.54,323.18,87,265.71,58V161.4C304.42,179.16,344,195,384.09,209.35a604.1,604.1,0,0,1-10,70.66Q418,296.5,462.83,310.36C475.81,253.28,480.3,194.67,479.45,143.07Z" transform="translate(-6.78 -9.11)"/><path class="cls-2" d="M93.48,129.47q-20,6.83-41.51,13.6c0,.27,0,.55,0,.83a737,737,0,0,0,8.32,122.74c34.16,24.44,70.58,48.9,113.4,73.09,27.64,15.62,57.95,31.13,92,46.46V273.67a1092.66,1092.66,0,0,1-118.37-64.28.08.08,0,0,0,0,0q21.61-7.72,43-16.06,38.13-14.88,75.37-31.89h0V58h0C217.66,82.27,161.66,106.19,93.48,129.47Z" transform="translate(-6.78 -9.11)"/><path class="cls-3" d="M265.71,563.56h0V462.63h0C237.62,447,215.65,422.84,198.62,394q-6.3-3.21-12.58-6.5A1169.86,1169.86,0,0,1,72.93,319.46l-2.63-1.79C96.52,426.57,154.31,528.49,265.71,563.56Z" transform="translate(-6.78 -9.11)"/><path class="cls-4" d="M265.71,584.08h0l-5.41-1.71C81.39,526.06,31.21,309.67,33.94,144.39l.22-13,12.4-3.9c72.25-22.74,143.36-49.79,211-84l8.13-4.1h0V9.11h0L245.38,19.38c-66.35,33.51-136.09,60-206.94,82.3l-31,9.76-.54,32.5C4,322.34,60.52,547.85,252.17,608.19l13.54,4.26h0Z" transform="translate(-6.78 -9.11)"/></svg>
</div>
</a>
<div id="overlay"></div>
<div id="scrollwall">
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
<div class="scroller"></div>
</div> *, body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: black;
color: lightyellow;
}
#overlay {
position: absolute;
z-index: 10;
background: linear-gradient(-45deg, rgba(238, 119, 82, 0.6), rgba(231, 60, 126, 0.6),rgba(35, 166, 213, 0.6), rgba(35, 213, 171, 0.6));
background-size: 400% 400%;
animation: gradient 15s ease infinite;
width: 100vw;
height: 100vh;
}
#btnContainer {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 30;
width: 96px;
height: 24px;
border: 2px solid black;
border-radius: 10%;
background: transparent;
}
#btnUpdateText {
width: 100%;
font-size: 14px;
line-height: 24px;
height: 24px;
border: none;
background: rgba( 255, 255, 255, 0.9 );
color: #2e2e2e;
cursor: pointer;
}
#badge {
position: absolute;
z-index: 20;
background-color: #8089ff;
bottom: 12px;
border-radius: 10%;
right: 12px;
width: 42px;
height: 42px;
padding: 6px;
}
#scrollwall {
width: 100vw;
height: 100vh;
overflow: hidden;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.scroller {
width: 100%;
height: 5%;
font-size: 4.2vh;
}// SuperMarquee library
// https://www.superplug.in/supermarquee
const cntMax = 100;
let sms = [],
time = Date.now(),
cnt = 0,
cntI = 0,
currentText = "Hello <b>Codepen</b>".toUpperCase();
document.querySelectorAll(".scroller").forEach((scrollContainer) => {
sms.push(
new SuperMarquee(scrollContainer, {
easing: true,
speed: 0.1,
content: currentText
})
);
});
document.getElementById("btnUpdateText").onclick = () => {
let newText = prompt("Update scroll text", currentText);
if (!newText) return;
currentText = newText.toUpperCase();
sms.forEach((sc, i) => {
sc.setScrollContent(currentText);
});
time = Date.now();
};
function tick() {
requestAnimationFrame(tick);
const currentTime = Date.now();
const deltaTime = currentTime - time;
time = currentTime;
cnt += deltaTime;
if (cnt > cntMax) {
cnt = cnt - cntMax;
cntI += 0.1;
sms.forEach((sc, i) => {
sc.setScrollSpeed((1 + Math.sin(cntI + i / 10)) / 10);
});
}
}
tick();
External CSS
This Pen doesn't use any external CSS resources.