I have 2 interaction issues in my current project:
in the home page, inside “product tour” section I have a slider which i’m trying to create an interaction for, in which each time a slide has changed, the corresponding above icon will change its background color and image. I don’t why the image keeps changing back to the original image.
Also in the home page I have a main menu background, which I’ve defined to change its color, when the hero section goes out of view, The problem is that if you’re not at the head of the page and you refresh the browser, the background color disappears.
#1: On that product tour slider - When I click the arrow for next slide, the background goes red on active slide. Then previous slide returns to white. On both the icon is dark grey. Is that not how it’s supposed to work?
#2: The Nav bar used is only 1 nav right? If so, there’s going to be an initial state that will get refreshed on load.
On load - transparent
On scroll - grey
For this you’ll need two navs or the initial appearance will get reset.
#1: How are you changing the icon block? I can’t find where the interaction is set.
#2: You can add an initial appearance in the interaction. Then add the opacity change just below it in the interactions panel. So you’ll have two actions for each one. The initial appearance will show as a little double arrow. Try adding that before the opacity change, then on refresh it will set on it’s own.
#1 - each circle div contains 2 divs inside of it, each one containing a different icon, one is dark Gray and the other is White.
In the interaction, I replace the background color and then I hide the dark Gray icon and display the White icon.
#2 - thank you very much for this, I’ll try and update.
Hi @garymichael1313, #1 - since we got to go live today, we decided to give up the icon replacement for now. Did you ever discover what was wrong there? #2 - your idea did solve the problem of refreshing the page while you’re not at the top of the page, but unfortunately it caused a new problem - when you load the page, the nav bar straight away becomes Gray instead of transparent… so eventually we used some javascript and that solved the problem:
Okay gotcha. I saw how to get the white icon to stay, but the grey kept fading out. To do that, I move the images out of the div and set the interaction on the image directly. But I agree, if you need to get going, I wouldn’t waste anymore time on it. Have a great day.
