Today, we’re making a Rotating Ad Hero Section.
The beauty of this component is its simplicity. There are no dependencies or frameworks needed.Just clean HTML with CSS and JavaScript. It is also fully responsive.
Visitors feel hooked instantly. The 3D prism spins, scrolling text grabs attention. Ads rotate smoothly, etching your brand in their minds. A blurred reflection adds sleek depth. Hue shifts and zooming create a bold vibe. Use it on hero sections, product pages, or landing pages to spark excitement.
Here are the steps to integrate it into your Elementor website:
1.Create three HTML blocks.
2.Paste the separate codes in each block.
html
<div id="living-words-component"></div>JS+CSS
<script>
// Self-executing function to create a reusable component
(function() {
// Create component class
class LivingWordsComponent {
constructor(targetElement) {
this.targetElement = targetElement;
this.init();
}
init() {
// Load required fonts
this.loadFonts();
// Add styles
this.addStyles();
// Create HTML structure
this.createStructure();
// Add event listeners
this.addEventListeners();
// Insert poem text
this.insertPoemText();
}
loadFonts() {
// Add font preconnect links
const preconnect1 = document.createElement('link');
preconnect1.rel = 'preconnect';
preconnect1.href = 'https://fonts.googleapis.com';
document.head.appendChild(preconnect1);
const preconnect2 = document.createElement('link');
preconnect2.rel = 'preconnect';
preconnect2.href = 'https://fonts.gstatic.com';
preconnect2.crossOrigin = 'anonymous';
document.head.appendChild(preconnect2);
// Add font stylesheet
const fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.href = 'https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap';
document.head.appendChild(fontLink);
}
addStyles() {
// Create style element
const styleEl = document.createElement('style');
styleEl.innerHTML = `
.wputopia-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 562px;
background-color: transparent;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.wputopia-content-area {
position: relative;
width: 1000px;
height: 562px;
overflow: hidden;
transform-origin: center;
}
@media (max-width: 1000px) {
.wputopia-content-area {
width: 100%;
height: auto;
aspect-ratio: 1000/562;
transform: none;
}
.wputopia-container-full {
width: 100%;
height: 100%;
transform: none;
}
.wputopia-prism-container,
.wputopia-reflection-container,
.wputopia-background,
.wputopia-foreground,
.wputopia-overlay {
width: 100%;
height: 100%;
transform-origin: center;
}
.wputopia-foreground {
object-fit: contain;
max-height: 100%;
}
}
.wputopia-background {
position: absolute;
width: 1000px;
z-index: 0;
}
.wputopia-foreground {
position: absolute;
width: 1000px;
z-index: 2;
animation: wputopia-blur 200s linear infinite;
bottom: 0;
top: auto;
}
.wputopia-container-full {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 1000px;
height: 562px;
margin: 0;
transform: scale(1);
}
.wputopia-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
mix-blend-mode: overlay;
background: #1e5799;
background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
opacity: 1;
}
@media (max-width: 768px) {
.wputopia-overlay {
width: 100vw;
left: 50%;
transform: translateX(-50%);
}
}
.wputopia-overlay.wputopia-animated {
animation: wputopia-filter-animation 8s infinite;
}
.wputopia-prism-container {
display: flex;
align-items: center;
justify-content: center;
}
.wputopia-prism {
position: relative;
width: 870px;
height: 190px;
transform-style: preserve-3d;
perspective: 480px;
transform-style: preserve-3d;
perspective-origin: 51% 70%;
}
.wputopia-face {
position: absolute;
display: flex;
align-items: center;
overflow: hidden;
width: 870px;
height: 190px;
background: transparent;
border: 0 solid #000;
opacity: 0.5;
}
.wputopia-face.wputopia-top,
.wputopia-face.wputopia-bottom {
width: 870px;
height: 870px;
}
.wputopia-face p {
white-space: nowrap;
overflow: hidden;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: calc(6em + (190px / 10) * 0.7);
padding-top: 20px;
color: #fff;
margin: 0;
}
.wputopia-face span {
color: red;
}
.wputopia-face.wputopia-front {
transform: translateZ(435px);
display: none;
}
.wputopia-face.wputopia-back {
transform: translateZ(-435px) rotateY(180deg) scaleX(-1);
}
.wputopia-face.wputopia-left {
transform: translateX(-435px) rotateY(-90deg) scaleX(-1);
}
.wputopia-face.wputopia-right {
transform: translateX(435px) rotateY(90deg) scaleX(-1);
}
.wputopia-face.wputopia-top {
transform: translateY(-435px) rotateX(90deg) scaleY(-1);
}
.wputopia-face.wputopia-bottom {
transform: translateY(-245px) rotateX(-90deg) scaleY(-1);
}
.wputopia-face.wputopia-left p {
margin-left: 480px;
animation: wputopia-left 200s linear infinite;
}
.wputopia-face.wputopia-back p {
margin-left: -390px;
animation: wputopia-back 200s linear infinite;
}
.wputopia-face.wputopia-right p {
margin-left: -1260px;
animation: wputopia-right 200s linear infinite;
}
.wputopia-reflection-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
margin-top: 380px;
filter: blur(10px);
}
.wputopia-reflection-container .wputopia-prism {
perspective-origin: 51% -30%;
}
.wputopia-reflection-container .wputopia-face.wputopia-back {
transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1);
}
.wputopia-reflection-container .wputopia-face.wputopia-left {
transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1);
}
.wputopia-reflection-container .wputopia-face.wputopia-right {
transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1);
}
.wputopia-reflection-container p {
transform: scaleY(70%);
}
@media (max-width: 768px) {
.wputopia-face p {
font-size: calc(4em + (190px / 10) * 0.7);
}
.wputopia-prism {
transform: scale(0.8);
}
}
@media (max-width: 480px) {
.wputopia-face p {
font-size: calc(3em + (190px / 10) * 0.7);
}
.wputopia-prism {
transform: scale(0.6);
}
}
@keyframes wputopia-left {
100% {
margin-left: -54000px;
}
}
@keyframes wputopia-back {
100% {
margin-left: -54870px;
}
}
@keyframes wputopia-right {
100% {
margin-left: -55740px;
}
}
@keyframes wputopia-filter-animation {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(100deg);
}
}
@keyframes wputopia-blur {
0% {
filter: blur(0px);
}
100% {
filter: blur(3px);
}
}
@keyframes wputopia-brightness {
0% {
filter: brightness(1) contrast(1);
}
100% {
filter: brightness(0.8) contrast(1.3);
}
}
`;
document.head.appendChild(styleEl);
}
createStructure() {
const template = `
<div class="wputopia-container">
<div class="wputopia-content-area">
<div class="wputopia-container-full">
<!-- Color overlay -->
<div class="wputopia-overlay wputopia-animated"></div>
<!-- Foreground image -->
<img src="https://i.imgur.com/gdxPD81.png" alt="Boy silhouette" class="wputopia-foreground">
<!-- 3D Prism -->
<div class="wputopia-prism-container">
<div class="wputopia-prism">
<div class="wputopia-face wputopia-top"></div>
<div class="wputopia-face wputopia-bottom"></div>
<div class="wputopia-face wputopia-left wputopia-text"></div>
<div class="wputopia-face wputopia-right wputopia-text"></div>
<div class="wputopia-face wputopia-front"></div>
<div class="wputopia-face wputopia-back wputopia-text"></div>
</div>
</div>
<!-- Reflection desgined by wputopia.com-->
<div class="wputopia-reflection-container">
<div class="wputopia-prism">
<div class="wputopia-face wputopia-top"></div>
<div class="wputopia-face wputopia-bottom"></div>
<div class="wputopia-face wputopia-left wputopia-text"></div>
<div class="wputopia-face wputopia-right wputopia-text"></div>
<div class="wputopia-face wputopia-front"></div>
<div class="wputopia-face wputopia-back wputopia-text"></div>
</div>
</div>
</div>
</div>
</div>
`;
this.targetElement.innerHTML = template;
}
addEventListeners() {
window.addEventListener("load", this.adjustContentSize.bind(this));
window.addEventListener("resize", this.adjustContentSize.bind(this));
}
adjustContentSize() {
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const contentDiv = this.targetElement.querySelector(".wputopia-content-area");
const container = this.targetElement.querySelector(".wputopia-container-full");
if (viewportWidth < 1000) {
// Calculate the height based on aspect ratio
const aspectRatio = 562/1000;
const newHeight = viewportWidth * aspectRatio;
// Ensure everything fits properly
contentDiv.style.height = newHeight + 'px';
container.style.height = '100%';
container.style.width = '100%';
} else {
// Reset to original dimensions for larger screens
contentDiv.style.height = '562px';
contentDiv.style.width = '1000px';
container.style.height = '562px';
container.style.width = '1000px';
}
}
insertPoemText() {
// Poem "If" by Rudyard Kipling
const kiplingPoem = `<p>If you can <span>keep</span> your head when all about you
Are <span>losing</span> theirs and <span>blaming</span> it on you;
If you can <span>trust</span> yourself when all men <span>doubt</span> you,
But make <span>allowance</span> for their doubting too;
If you can <span>wait</span> and not be tired by waiting,
Or, being <span>lied</span> about, don't deal in <span>lies</span>,
Or, being <span>hated</span>, don't give way to <span>hating</span>,
And yet don't look too good, nor talk too wise;
If you can <span>dream</span>—and not make dreams your <span>master</span>;
If you can <span>think</span>—and not make thoughts your <span>aim</span>;
If you can meet with <span>triumph</span> and <span>disaster</span>
And treat those two <span>impostors</span> just the same;
If you can bear to hear the <span>truth</span> you've spoken
<span>Twisted</span> by knaves to make a <span>trap</span> for fools,
Or watch the things you gave your life to <span>broken</span>,
And <span>stoop</span> and build 'em up with wornout tools;
If you can make one <span>heap</span> of all your <span>winnings</span>
And <span>risk</span> it on one turn of pitch-and-toss,
And <span>lose</span>, and start again at your beginnings
And never breathe a word about your <span>loss</span>;
If you can <span>force</span> your heart and nerve and <span>sinew</span>
To <span>serve</span> your turn long after they are gone,
And so <span>hold on</span> when there is nothing in you
Except the <span>Will</span> which says to them: "Hold on";
If you can <span>talk</span> with crowds and keep your <span>virtue</span>,
Or <span>walk</span> with kings—nor lose the common <span>touch</span>;
If neither <span>foes</span> nor loving friends can hurt you;
If all men <span>count</span> with you, but none too much;
If you can fill the unforgiving <span>minute</span>
With sixty seconds' worth of distance <span>run</span>—
Yours is the <span>Earth</span> and everything that's in it,
And—which is more—you'll be a <span>Man</span>, my son! -Rudyard Kipling</p>`;
// Insert poem into all text faces
const textDivs = this.targetElement.querySelectorAll(".wputopia-text");
textDivs.forEach((div) => {
div.innerHTML = kiplingPoem;
});
}
}
// Initialize the component
document.addEventListener('DOMContentLoaded', function() {
// Find the target element
const targetElement = document.getElementById('living-words-component');
// Create a new instance of the component
if (targetElement) {
new LivingWordsComponent(targetElement);
}
});
// Make component available globally
window.LivingWordsComponent = LivingWordsComponent;
})();
</script>If you like it, don’t forget to like and comment, so I can send you the file.
