<div class="marquee">
<div class="marquee__group">
<span>🚀 Galactic Stick Mix Choos ➺</span>
<span>🌞 Giant Solar Crunch ➺</span>
<span>🍋 Lemon Zesty Comets ➺</span>
<span>🌕 Moon Rock Sours ➺</span>
<span>🍨 Moon Rocks Dessert ➺</span>
<span>🍓 Moon Rocks Fruit ➺</span>
<span>🍍 Moon Rocks Tropical ➺</span>
<span>🫐 Moon Rocks Wild Berry ➺</span>
<span>✨ Starry Delight ➺</span>
</div>
<div class="marquee__group" aria-hidden="true">
<span>🚀 Galactic Stick Mix Choos ➺</span>
<span>🌞 Giant Solar Crunch ➺</span>
<span>🍋 Lemon Zesty Comets ➺</span>
<span>🌕 Moon Rock Sours ➺</span>
<span>🍨 Moon Rocks Dessert ➺</span>
<span>🍓 Moon Rocks Fruit ➺</span>
<span>🍍 Moon Rocks Tropical ➺</span>
<span>🫐 Moon Rocks Wild Berry ➺</span>
<span>✨ Starry Delight ➺</span>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;800&display=swap');
.marquee {
display: flex;
overflow: hidden;
height: 10vh;
user-select: none;
gap: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #151C52;
}
.marquee:hover {
-webkit-text-stroke: 1.5px #fff;
text-stroke: 1.5px #fff;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
transition: all 0.6s ease;
-webkit-font-smoothing: antialiased;
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
min-width: 100%;
animation: scroll 60s linear infinite reverse; /* Slowed down */
}
.marquee__group span {
color: white;
font-size: 2.4vw;
font-weight: 800;
white-space: nowrap;
font-family: 'Barlow', sans-serif !important;
text-transform: uppercase;
letter-spacing: 1px;
transition: transform 0.3s ease-in-out; /* Optional smooth hover effect */
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 2rem));
}
}
@media only screen and (max-width: 480px) {
.marquee__group span {
font-size: 4vw;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Red Slide Animation</title>
<style>
.elementor-text-editor span {
display: inline-block;
color: #000;
animation: redSlide 2s infinite;
animation-delay: calc(var(--i) * 0.2s);
}
@keyframes redSlide {
0%, 100% {
color: #000;
}
50% {
color: red;
}
}
.elementor-text-editor span:nth-child(1) { --i: 1; }
.elementor-text-editor span:nth-child(2) { --i: 2; }
.elementor-text-editor span:nth-child(3) { --i: 3; }
.elementor-text-editor span:nth-child(4) { --i: 4; }
.elementor-text-editor span:nth-child(5) { --i: 5; }
.elementor-text-editor span:nth-child(6) { --i: 6; }
.elementor-text-editor span:nth-child(7) { --i: 7; }
.elementor-text-editor span:nth-child(8) { --i: 8; }
.elementor-text-editor span:nth-child(9) { --i: 9; }
.elementor-text-editor span:nth-child(10) { --i: 10; }
.elementor-text-editor span:nth-child(11) { --i: 11; }
.elementor-text-editor span:nth-child(12) { --i: 12; }
.elementor-text-editor span:nth-child(13) { --i: 13; }
.elementor-text-editor span:nth-child(14) { --i: 14; }
.elementor-text-editor span:nth-child(15) { --i: 15; }
.elementor-text-editor span:nth-child(16) { --i: 16; }
.elementor-text-editor span:nth-child(17) { --i: 17; }
</style>
</head>
<body>
<div class="elementor-text-editor elementor-clearfix elementor-inline-editing">
<span>Parken.</span>
<span>Neu</span>
<span>gedacht.</span>
<span>Ticketlos.</span>
<span>Digital.</span>
<span>Vollautomatisiert.</span>
<span>BÄRL!N</span>
<span>Parkraummanagement</span>
<span>–</span>
<span>das</span>
<span>Parksystem</span>
<span>von</span>
<span>morgen,</span>
<span>schon</span>
<span>heute</span>
<span>in</span>
<span>Berlin.</span>
</div>
</body>
</html>
<div class="marquee">
<div class="marquee__group">
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo1" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo2" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo3" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo4" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo5" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo6" />
</div>
<!-- Duplicate group for infinite scroll -->
<div class="marquee__group" aria-hidden="true">
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo7" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo8" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo9" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo10" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo11" />
<img decoding="async" src="https://fullhousepartne08.webworkscraft.com/wp-content/uploads/2025/06/image-6.png" alt="logo12" />
</div>
</div>
<style>
.marquee {
display: flex;
overflow: hidden;
width: 100%;
padding: 1rem 0;
user-select: none;
position: relative;
}
.marquee__group {
display: flex;
align-items: center;
gap: 2rem;
flex-shrink: 0;
animation: scroll 30s linear infinite;
min-width: fit-content;
}
.marquee__group img {
width: calc(100% / 6 - 2rem); /* 6 logos minus gap */
height: auto;
object-fit: contain;
transition: transform 0.3s ease-in-out;
}
.marquee:hover img {
transform: scale(1.1);
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* Mobile responsive (show 3 at a time) */
@media only screen and (max-width: 768px) {
.marquee__group img {
width: calc(100% / 3 - 2rem);
}
}
</style>