Image swap on scroll

Hi everyone,

Here is a mini tutorial on how to swap an image on scroll using relative styling:

Before following the tutorial, please ensure that your header section has the Scroll Direction set to active.

To achieve the swap you will need two image blocks:

  • The first image block disappears when the user scrolls down and reappears when back at the top
  • The second image appears when the user scrolls down and disappears when back at the top.

Note: don’t forget to set the cc-scrolld-top virtual class to your header section.
This ensures that when the user reaches the top, the first image reappears, and the second one disappears.

Enjoy :hugs:

hmm is there a easier way to just swap to states (wether color, img-src) etc…i mean i can accomplish this much faster with pure javascript and code snippets…for me a sophisticated and NEW revolutionary (!) UX must accomplish such task much easier then - i think counted - 15 mouse clicks?


May I ask you what you expect or have in mind how things should work?
It’s a builder, and yes, clicks are required.

You are always free to use custom code, like any other tool forces you to do.
Cwicly gives you the choice to achieve everything visually. It’s an option, not a must.

in this special case of swapping two image states it should be much easier as this is a thing we use since 20 years and are very repetitive and often used…i think its too complicated right nwo. there a so many fancy new conceptions in Cwicly…but i miss the ease for the normal stuff…

While this is the cleanest in-built way to swap images, or any other elements based on these related states, I’m sure that things will get a lot easier as soon as we receive a major Interaction update/overhaul.

So, the only thing you can do right now, if you dislike using Relative Styling, is to patiently wait and use custom code.
Cwicly rapidly improves over time.

one more thing :slight_smile: i see that a really lot of new things are in the pipe…very sophisticated stuff, new quite revolutionary conceptions which need a bigger learning curve and such…and this is ok and cool…but we worked now with a transfer-project from existing detailed project to re-built it with Cwicly…and the navigator is way too buggy…if we click it happens to often that the pointer ist missing, the choosen layer just jumped around landing on a whole other layer or if drag and drop something gests just messed up or even completely lost…those essential things must work like in Adobe Photoshop…extremely stable and intuitive without those millisecond delays and such…you see? otherwise its not possible to work fast…and this is contradictory to the integrated conceptions…

right now i work on a page…i have an example what happens right now…i click on the “image” layer at the left…but in the visual area…not bounding box is visible…i just dont now which element was choosen…nothing…this holds the process of creating completely on hold…finding out what happened…like in a nebula…in this case the image above “Hygiene” should have the bounding focus box…

and the next bug…i duplicated that image…and drag and dropped it into the other layer…after that the focus bounding box is focusing the header-title as you see…but this is wrong…it must focus the latest touched and re-arranged element…now i - again - have to grad the mouse and click into that layer once again…this is completely buggy…i talk about the very essentials…

I suggest you create a Feedback thread to share your thoughts.
Wrong topic here, it might get missed.


yes thanx you right :slight_smile: