<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Text Hero Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-container {
text-align: center;
color: white;
max-width: 800px;
padding: 2rem;
}
.hero-text {
font-size: 4rem;
font-weight: bold;
line-height: 1.2;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.rotating-text-container {
display: inline-block;
position: relative;
min-width: 300px;
height: 1.2em;
vertical-align: top;
}
.rotating-word {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #FFD700;
font-weight: 900;
}
.rotating-word.active {
opacity: 1;
transform: translateY(0);
}
.rotating-word.fade-out {
opacity: 0;
transform: translateY(-30px);
}
.subtitle {
font-size: 1.2rem;
font-weight: 300;
opacity: 0.9;
margin-top: 2rem;
animation: fadeInUp 1s ease-out 0.5s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 0.9;
transform: translateY(0);
}
}
/* Responsive design */
@media (max-width: 768px) {
.hero-text {
font-size: 2.5rem;
}
.rotating-text-container {
min-width: 200px;
}
.subtitle {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.hero-text {
font-size: 2rem;
}
.rotating-text-container {
min-width: 150px;
}
}
/* Optional: Add a subtle animation to the background */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
</style>
</head>
<body>
<div class="hero-container">
<h1 class="hero-text">
WE FIX
<span class="rotating-text-container">
<span class="rotating-word active">WASHERS</span>
<span class="rotating-word">DRYERS</span>
<span class="rotating-word">DISHWASHERS</span>
<span class="rotating-word">REFRIGERATORS</span>
<span class="rotating-word">OVENS</span>
<span class="rotating-word">MICROWAVES</span>
</span>
</h1>
<p class="subtitle">Professional appliance repair services you can trust</p>
</div>
<script>
class RotatingText {
constructor(container, options = {}) {
this.container = container;
this.words = container.querySelectorAll('.rotating-word');
this.currentIndex = 0;
this.interval = options.interval || 2500;
this.isRunning = false;
this.init();
}
init() {
if (this.words.length === 0) return;
// Set first word as active
this.words[0].classList.add('active');
// Start the rotation
this.start();
}
start() {
if (this.isRunning) return;
this.isRunning = true;
this.timer = setInterval(() => {
this.rotate();
}, this.interval);
}
stop() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
this.isRunning = false;
}
rotate() {
const currentWord = this.words[this.currentIndex];
const nextIndex = (this.currentIndex + 1) % this.words.length;
const nextWord = this.words[nextIndex];
// Start fade out animation for current word
currentWord.classList.add('fade-out');
currentWord.classList.remove('active');
// After fade out completes, show next word
setTimeout(() => {
currentWord.classList.remove('fade-out');
nextWord.classList.add('active');
this.currentIndex = nextIndex;
}, 250); // Half of the CSS transition duration
}
// Method to manually go to specific word
goToWord(index) {
if (index >= 0 && index < this.words.length && index !== this.currentIndex) {
const currentWord = this.words[this.currentIndex];
const targetWord = this.words[index];
currentWord.classList.add('fade-out');
currentWord.classList.remove('active');
setTimeout(() => {
currentWord.classList.remove('fade-out');
targetWord.classList.add('active');
this.currentIndex = index;
}, 250);
}
}
}
// Initialize the rotating text effect when the page loads
document.addEventListener('DOMContentLoaded', function() {
const rotatingContainer = document.querySelector('.rotating-text-container');
if (rotatingContainer) {
const rotatingText = new RotatingText(rotatingContainer, {
interval: 2500 // Change word every 2.5 seconds
});
// Optional: Pause on hover
rotatingContainer.addEventListener('mouseenter', () => {
rotatingText.stop();
});
rotatingContainer.addEventListener('mouseleave', () => {
rotatingText.start();
});
}
});
// Optional: Add keyboard navigation
document.addEventListener('keydown', function(e) {
const rotatingContainer = document.querySelector('.rotating-text-container');
if (!rotatingContainer) return;
const words = rotatingContainer.querySelectorAll('.rotating-word');
let currentIndex = Array.from(words).findIndex(word => word.classList.contains('active'));
if (e.key === 'ArrowLeft') {
e.preventDefault();
const prevIndex = currentIndex > 0 ? currentIndex - 1 : words.length - 1;
// You'd need to access the rotatingText instance here for manual control
} else if (e.key === 'ArrowRight') {
e.preventDefault();
const nextIndex = (currentIndex + 1) % words.length;
// You'd need to access the rotatingText instance here for manual control
}
});
</script>
</body>
</html>
Read posts about —> HTML-Components!!! You will find how to use the provided code on your wix website.
-
Example for FLIP-CARDS:
Flip card - #2 by J.D -
Example for communication between HTML-Component and your Wix-Page
Sending custom html script to an iframe on dynamicpage -
Or even generating own REPEATERS???
Modifying repeater - #15 by CODE-NINJA
You will find much more if you search with the right SERACH-TERMS 
RESULT FOR YOUR REQUEST —> Edit fiddle - JSFiddle - Code Playground