Page 1 of 1

Fade-In Effects, transparent 'Modules' ?

Posted: 10 Oct 2025, 07:27
by AJF
Hello,

I would like to make a new project with x3 because there will be manyx photos. But also text, and I need some 'fade in' text/picture blocks. To give it a modern look and not so static.

Also blocks with fixed background would be nice.

Like this for example:

https://joomlaplates.org/landing/#about

Here are some text blocks 'flying in' from the bottom. After further scrolling down, there are 'transparent' text blocks with afixed underlying picture.

Is this possible in X3? I think with CSS, but can you tell me the way or an example how to do?

Thank you very much!
Andreas

Re: Fade-In Effects, transparent 'Modules' ?

Posted: 11 Oct 2025, 00:17
by mjau-mjau
You know, I might suggest not using X3 for something like this unfortunately. Unlike typical website templates (wordpress, joomla, html5), which have index pages created specifically for such presentation, X3 does not. X3 is primarily a photo gallery, and only has a simple "content" section where you would add your own html for such a layout.

For starters, if you want to create a more complex "page" layout like in that example, it all has to come from your own custom html. There is nothing pre-built into X3 to create advanced custom page content layouts. Our own website www.photo.gallery and I remember one customer website hochzeiten.danielbollinger.de has custom page layouts, but it would take you a lot of time to create.
AJF wrote:Here are some text blocks 'flying in' from the bottom. After further scrolling down, there are 'transparent' text blocks with afixed underlying picture.

Is this possible in X3? I think with CSS, but can you tell me the way or an example how to do?
So even if you have already created the custom html layout you want (I guess you have not?), then you would also need to implement a javascript-CSS based elements fade-in that applies on elements when they appear in scroll. Personally, I'm not a fan of this, but if you want to use it, it would need to get added with some manual per-element considerations. You can find a decent example on this by searching Google (AI) "js elements fade in on scroll" (I already checked).

Before I would recommend considering animated elements, did you already create your custom html? This would normally be the biggest task and challenge.