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) fro…

ok last post but a couple of pages in project same component, there will be bits not being used elementsapp://downloadDocument/bjSZHSzlg3YD

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! :slightly_smiling_face: 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 = d…

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 h…

Wow! Thanks a lot for help and great work! :slightly_smiling_face: :clap: :clinking_beer_mugs:

You’re so welcome, Peter! :tada::clinking_beer_mugs: 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 tangle…

@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 nee…

The code for the properties does not work as the properties are not displaying correctly.

Transistions

Elements

PMUK (Paul Moore) June 30, 2025, 2:28pm 2

Have a look at this post and see if it helps? Animation scroll sticky

Topic		Replies	Views
Fading Banner Component Elements API	21	392	August 13, 2025
Just a little fun Elements	85	1152	October 9, 2025
Ai generate practice and fun Elements API	13	144	October 4, 2024
Fade instead of slide for the header slideshow? Elements	1	69	November 22, 2025
Trying to streamline using drop zones Elements API	83	904	January 11, 2025

Transistions

Related topics