First, we need to add the headings you want to rotate through.
Edit Your Page with Elementor:
Add Heading Widgets:
Assign a Common Class:
rotating-heading
.Now, we need to style the headings and manage their transitions.
Go to WPCode (Code Snippets Plugin):
Create a New CSS Snippet: ( install it , it is completly free )
/* Ensure the main container hides overflow */
.Main11 {
overflow: hidden;
position: relative; /* Ensure positioned children can be absolutely positioned within */
}
/* Common heading styles */
.rotating-heading {
font-family: 'Syncopate', sans-serif;
font-size: 60px;
line-height: 67px;
font-weight: 500;
color: white;
text-transform: uppercase;
position: absolute;
opacity: 0;
transform: translateX(-100%);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
white-space: nowrap; /* Prevent text from wrapping */
}
/* Active state */
.rotating-heading.active {
opacity: 1;
transform: translateX(0);
}
/* Inactive state */
.rotating-heading.inactive {
opacity: 0;
transform: translateX(100%);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.rotating-heading {
font-size: 40px;
line-height: 45px;
white-space: normal; /* Allow text to wrap on small screens */
}
}
@media (max-width: 480px) {
.rotating-heading {
font-size: 30px;
line-height: 35px;
white-space: normal; /* Allow text to wrap on small screens */
}
}
Next, we need to add the JavaScript that will handle the rotation of the headings.
document.addEventListener('DOMContentLoaded', function () {
let currentIndex = 0;
const headings = document.querySelectorAll('.rotating-heading');
const totalHeadings = headings.length;
function showNextHeading() {
headings.forEach((heading, index) => {
heading.classList.remove('active', 'inactive');
if (index === currentIndex) {
heading.classList.add('active');
} else {
heading.classList.add('inactive');
}
});
currentIndex = (currentIndex + 1) % totalHeadings;
}
// Initial display
showNextHeading();
// Rotate headings every 3 seconds
setInterval(showNextHeading, 3000);
});
To ensure the headings are within the container that hides overflow:
Main11
.Finally, save your changes and publish your page.
Save and Publish Your Page:
Test on Different Devices:
Using WordPress plugins can enhance your website by adding new