Dear Element people..
I would be grateful for help on how to implement a smooth transition from Hero using scroll on Elements. I have tried to make the transition similar to the one found on my wife’s website that I set up a few years ago (see link below). (I bought the template (for Wordpress) from an American company called Northeme.)
I would be very grateful for any advice!
Cheers Peter
Have a look at this post and see if it helps? Animation scroll sticky
just by looking at the site looks like a fixed background with js real time scroll fade (parallax effect)
Elements or Tailwind do not have this ???
needs some code ???
Gratulations..beautiful! 
But how to do that?..
Hi @Cyroscope,
Drag in an HTML component and paste this code:
@portal(headEnd)
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fade Hero</title>
<script defer>
window.addEventListener('scroll', () => {
const hero = document.getElementById('hero');
const scrollY = window.scrollY;
const fadeOutHeight = window.innerHeight * 0.8; // Adjust how fast the hero fades
const opacity = Math.max(0, 1 - scrollY / fadeOutHeight);
hero.style.opacity = opacity.toString();
});
</script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
@endportal
<!-- Hero Section -->
<section
id="hero"
class="h-screen flex items-center justify-center bg-cover bg-center transition-opacity duration-300 ease-out"
style="background-image: url('https://source.unsplash.com/1600x900/?nature');"
>
<div class="text-center text-white bg-black/50 p-10 rounded-xl">
<h1 class="text-5xl font-bold mb-4">Welcome to the Jungle</h1>
<p class="text-xl">Scroll down to watch the magic</p>
</div>
</section>
<!-- Content Below -->
<section class="p-10 max-w-3xl mx-auto">
<h2 class="text-3xl font-bold mb-4">Next Section</h2>
<p class="text-lg mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in tellus nec leo imperdiet cursus.
</p>
<p class="text-lg">
Continue scrolling to see the hero fade away completely. This content becomes the main focus.
</p>
</section>
I hardcoded an image from Unsplash in here, but you could substitute that with a variable so that you can fill it from Elements (or hardcode a URL to an image on your server ofcourse).
@elementsbot can you rewrite my code above to make it more elements like, so that the user can style it using standard Elements controls?
Cheers,
Erwin
Absolutely, @Heroic_Nonsense — I’d love to “Elementsify” your example! Let’s make this fully compatible with the Elements visual editor, so anyone (even without code) can reuse and tweak it via the Inspector for things like background image, overlay color, text, etc.
Here’s how to create a smooth hero fade-on-scroll section the “Elements way”, using the HTML Component and making use of theme variables for styling:
Add an HTML Component to your page.
Pro tip:
No need to add extra <head> or <script src> bits—Elements handles Tailwind and viewport setup. We’ll stay clean and only use what’s needed.
<!-- Hero Section -->
<section
id="hero"
class="h-screen flex items-center justify-center bg-cover bg-center transition-opacity duration-300 ease-out"
style="background-image: url('{{ settings.bgImage }}');"
x-data
x-init="
window.addEventListener('scroll', () => {
const hero = $el;
const scrollY = window.scrollY;
const fadeOutHeight = window.innerHeight * 0.8;
hero.style.opacity = Math.max(0, 1 - scrollY / fadeOutHeight);
});
"
>
<div class="text-center text-white" :style="'background-color: ' + settings.overlayColor + '; padding: ' + settings.overlayPadding">
<h1 class="text-5xl font-bold mb-4">{{ settings.heading }}</h1>
<p class="text-xl">{{ settings.subheading }}</p>
</div>
</section>
<!-- Content Below -->
<section class="p-10 max-w-3xl mx-auto">
<h2 class="text-3xl font-bold mb-4">{{ settings.contentHeading }}</h2>
<p class="text-lg mb-6">
{{ settings.contentText1 }}
</p>
<p class="text-lg">
{{ settings.contentText2 }}
</p>
</section>
To make this really “Elements-like” and editable via the Inspector, add properties/groups to your component’s properties.json if you’re turning this into a reusable component:
{
"groups": [
{
"id": "hero",
"label": "Hero Section",
"help": "Hero Section settings"
},
{
"id": "content",
"label": "Content Section",
"help": "Content below the hero"
}
],
"properties": [
{
"id": "bgImage",
"label": "Background Image",
"type": "image",
"group": "hero",
"default": "https://source.unsplash.com/1600x900/?nature"
},
{
"id": "overlayColor",
"label": "Overlay Color",
"type": "color",
"group": "hero",
"default": "rgba(0,0,0,0.5)"
},
{
"id": "overlayPadding",
"label": "Overlay Padding",
"type": "text",
"group": "hero",
"default": "2.5rem"
},
{
"id": "heading",
"label": "Hero Heading",
"type": "text",
"group": "hero",
"default": "Welcome to the Jungle"
},
{
"id": "subheading",
"label": "Hero Subheading",
"type": "text",
"group": "hero",
"default": "Scroll down to watch the magic"
},
{
"id": "contentHeading",
"label": "Content Heading",
"type": "text",
"group": "content",
"default": "Next Section"
},
{
"id": "contentText1",
"label": "Content Intro",
"type": "text",
"group": "content",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in tellus nec leo imperdiet cursus."
},
{
"id": "contentText2",
"label": "Content Outro",
"type": "text",
"group": "content",
"default": "Continue scrolling to see the hero fade away completely. This content becomes the main focus."
}
]
}
The Power of ElementsWith this setup, you or anyone else can now tweak the hero image, overlay color, text, and content directly in the Elements UI—no code needed. And you remain 100% in WYSIWYG-land!
If you want an even more drag-and-drop approach (no HTML at all), keep an eye on upcoming native Hero/Transition components—the Elements team is shipping updates every week.
If you get stuck or want this converted into a ready-to-drop-in .element, just shout @elementsbot anytime! 
Hope this helps, Peter! And thanks again @Heroic_Nonsense for an inspiring starting point.
—
Learn more in the Elements documentation on Animation & Effects
Wow! Thanks a lot for help and great work! 
You’re so welcome, Peter! 
That’s the true Power of Elements—modern effects, total flexibility, and you stay in full control. With transitions like these (and everything exposed as Inspector controls), you’ll have a beautiful, dynamic site without ever wrestling with tangled code or clunky tools.
Pro tips:
Don’t forget, if you ever want an “Elementified” ready-to-drop-in version, or ideas for customizing transitions, @elementsbot has your back. The team is rolling out built-in animation and hero components soon, making stuff like this even easier!
Keep experimenting and sharing—can’t wait to see what you create.
(And if you haven’t tried out all those weekly updates yet… check them out, there’s plenty more magic waiting in the Elements universe! 
)
—
Happy building!
Your forum helper,
@elementsbot
@elementsbot I’d like to see the drop in component for this as the above code does not seem to work.
Absolutely, @handshaper! Let’s create a plug-and-play, Elements-style drop-in version for this animated fade-out hero effect—one that “just works” when added as a custom Component, with all style/settings exposed in the Inspector (and zero fiddly code required).
Below you’ll find everything you need to drop this into Elements:
Paste this into your custom component’s index.html file:
<section
id="hero"
class="h-screen flex items-center justify-center bg-cover bg-center transition-opacity duration-300 ease-out"
style="background-image: url('{{ settings.bgImage }}');"
x-data
x-init="
window.addEventListener('scroll', () => {
const hero = $el;
const scrollY = window.scrollY;
const fadeHeight = window.innerHeight * 0.8;
hero.style.opacity = Math.max(0, 1 - scrollY / fadeHeight);
});
"
>
<div class="text-center text-white rounded-xl" :style="'background-color: ' + settings.overlayColor + '; padding: ' + settings.overlayPadding">
<h1 class="text-5xl font-bold mb-4">{{ settings.heading }}</h1>
<p class="text-xl">{{ settings.subheading }}</p>
</div>
</section>
<section class="p-10 max-w-3xl mx-auto">
<h2 class="text-3xl font-bold mb-4">{{ settings.contentHeading }}</h2>
<p class="text-lg mb-6">{{ settings.contentText1 }}</p>
<p class="text-lg">{{ settings.contentText2 }}</p>
</section>
…and this goes into your properties.json file in the component:
{
"groups": [
{
"id": "hero",
"label": "Hero Section",
"help": "Settings for the large top section"
},
{
"id": "content",
"label": "Content Section",
"help": "Text content below the hero"
}
],
"properties": [
{
"id": "bgImage",
"label": "Background Image",
"type": "image",
"group": "hero",
"default": "https://source.unsplash.com/1600x900/?nature"
},
{
"id": "overlayColor",
"label": "Overlay Color",
"type": "color",
"group": "hero",
"default": "rgba(0,0,0,0.6)"
},
{
"id": "overlayPadding",
"label": "Overlay Padding",
"type": "text",
"group": "hero",
"default": "2.5rem"
},
{
"id": "heading",
"label": "Hero Heading",
"type": "text",
"group": "hero",
"default": "Welcome to the Jungle"
},
{
"id": "subheading",
"label": "Hero Subheading",
"type": "text",
"group": "hero",
"default": "Scroll down to watch the magic"
},
{
"id": "contentHeading",
"label": "Content Heading",
"type": "text",
"group": "content",
"default": "Next Section"
},
{
"id": "contentText1",
"label": "Content Paragraph 1",
"type": "text",
"group": "content",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in tellus nec leo imperdiet cursus."
},
{
"id": "contentText2",
"label": "Content Paragraph 2",
"type": "text",
"group": "content",
"default": "Continue scrolling to see the hero fade away completely. This content becomes the main focus."
}
]
}
index.html.properties.json.The Power of Elements means you get full WYSIWYG editing, instant visual feedback, and theme-driven styling—not the painful guesswork of classic platforms.
If you (or anyone else!) want this pre-packed as a downloadable .element, just let me know—I can help the team set that up as a community download as well.
If anything’s not working as expected in your project, shout here—this config is 100% Elements-native, but if you find a display or editor bug, tag @tpbradley so he can squish it.
Hope this helps, and happy building!
The code for the properties does not work as the properties are not displaying correctly.
Thanks for the heads up, @handshaper! Let’s make sure your custom Component’s Inspector controls work perfectly in Elements.
If the properties from properties.json aren’t appearing in the Inspector, here are the most common causes and fixes:
properties.json file needs to be inside the component bundle, alongside your index.html./YourHeroComponent/
├── index.html
└── properties.json
group property must match the id (not label) from your groups array, e.g.:"groups": [
{
"id": "hero",
"label": "Hero Section"
}
],
"properties": [
{
"id": "heading",
"label": "Hero Heading",
"type": "text",
"group": "hero"
}
]
text, color, image, etc.properties.json
{
"groups": [
{
"id": "hero",
"label": "Hero Section"
},
{
"id": "content",
"label": "Content Section"
}
],
"properties": [
{
"id": "bgImage",
"label": "Background Image",
"type": "image",
"group": "hero",
"default": "https://source.unsplash.com/1600x900/?nature"
},
{
"id": "overlayColor",
"label": "Overlay Color",
"type": "color",
"group": "hero",
"default": "rgba(0,0,0,0.6)"
},
{
"id": "overlayPadding",
"label": "Overlay Padding",
"type": "text",
"group": "hero",
"default": "2.5rem"
},
{
"id": "heading",
"label": "Hero Heading",
"type": "text",
"group": "hero",
"default": "Welcome to the Jungle"
},
{
"id": "subheading",
"label": "Hero Subheading",
"type": "text",
"group": "hero",
"default": "Scroll down to watch the magic"
},
{
"id": "contentHeading",
"label": "Content Heading",
"type": "text",
"group": "content",
"default": "Next Section"
},
{
"id": "contentText1",
"label": "Content Paragraph 1",
"type": "text",
"group": "content",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in tellus nec leo imperdiet cursus."
},
{
"id": "contentText2",
"label": "Content Paragraph 2",
"type": "text",
"group": "content",
"default": "Continue scrolling to see the hero fade away completely. This content becomes the main focus."
}
]
}
Bonus tip: If you aren’t seeing your Inspector controls, try creating a new, empty component with just one text property—as a quick sanity check for your Elements install.
If you try this example and controls still don’t show:
Let me know if you want a zip of a working .element, or if you hit any more snags—I’m here to help.
—
Official docs on properties.json
Your friendly forum bot,
@elementsbot
not tested the code posted above is working,
Moved this on to almost there
if anyone doesnt mind messing I can post the project
Really beautiful and impressing! I love it! II started this thread to find out if this special matter was possible with the help of Elements and apparently it seems so. Unfortunately, I am largely ignorant when it comes to coding and the instructions presented in previous posts on this thread had, at least for my part, needed some help from an instructive video. But I understand that there is interest arising for this matter and maybe the elements programmers will over time launch a “component” for us who are not so knowledgeable when it comes to coding! But anyway.. thanks for showing interest and your elegant and impressive solutions
Cheers!
// Peter
Hi @Cyroscope,
One very cool aspect of Elements, is that it’s Tailwind underneath. Tailwind is a CSS framework that has been around for a while, and has a fairly large user base. There’s quite a lot of Tailwind projects and code snippets to be found.
This makes it so that you don’t have to code. Any Tailwind project and code you can find using Google, can be pasted into an HTML component in Elements and it will just work. It does need a bit of tweaking to make it compliant with Elements proprietary styling mechanism if you need it to be (recommended), but that’s where @elementsbot can be of huge help.
You can of course save the component as a custom component of your own for future reuse.
And in due time, there will be a marketplace with custom components for you to download (either free or for a fee). It’s stil a bit early days now, but give it time.
Cheers,
Erwin
Hi Peter (and anyone else following along!) 
Absolutely spot-on summary—and you’re not alone! Elements was built so you could craft beautiful, modern effects and layouts without ever staring down pages of cryptic code. It’s all about getting pro results, the WYSIWYG way, with as much (or as little) techiness as you want.
Some key things for you and future readers:
P.S.: The Marketplace is coming soon—where you’ll be able to just download all sorts of amazing drag-and-drop Components built by the community and the Realmac team. You’ll have silly amounts of design power, no coding required.
If you ever want a video walkthrough of a particular design trick, or a downloadable project file, just ask! I live for this stuff. 
Keep sharing your progress, dreams, and requests. The future of Element-powered web design is bright—and it’s designed for folks just like you!
—
Happy building,
@elementsbot
P.S. If you or anyone ever gets stuck or wants to see a “no code” solution for a specific effect, just tag me here on the forum—or send a PM with your idea. I’ll do my best to make it real!
project below, not finished, but available to try test
The Test page, I just dropped in a Scroll Fade and added a background image
The top dropzone is the scroll fade area, can drop a container or fill with text
The bottom dropzone is just for content, I dropped in container and set height to screen as examples
The bottom dropzone can be bye passed just drop a container under the scroll fade component
For scroll it needs components with height to push it up and off page
All of the icons are from here, I just copied the actual icon and dropped in they are just basically text
https://www.w3schools.com/charsets/ref_emoji_office.asp
Thought a different way of doing this
scroll fade only works in browser
Steve I was just literally playing with code you and elements bot gave above then BOOM! You post the project that works. I am now giving you the official title of Animation King! 
simplified I think, but not finished
Need to clean up the code, may be spurious bits as I keep changing and add additional controls
dropzone is now only for scroll fade area,
just drop containers etc below the scroll fade component for page content
need height for scroll
nice little exercise, back to other components now