In my website Apartments Near Me we wanted to do uplift to the manu and we took inspiration from https://www.fashionnova.com/ but keeping our style
the complicated part was to create a clickable banner that running msg to different pages in different colors this is how we accomplished this:
we had one important limitation - it should not dmg the load speed.
at first we thought using 7 buttons and run a loop of show and hide, but this increasing the #dom loading so we scrap that idea.
than we suggested have one button and an object with all the information needed and to run a while loop together with for each loop on the object with show and hide + adding color - this caused the preview to get stuck - so we figured its not the best way.
full solution below
let manu_link_count=Math.floor(Math.random() * Math.floor(6));
let manue_animation = {
"duration": 500,
"direction": "top",
//"delay": 1000
};
let manue_animation_out = {
"duration": 500,
"direction": "bottom",
//"delay": 1000
};
let manuslide = [{ text: "🏠🏠 How To Be Approved For An Apartment 🏠🏠", link: "https://www.apartmentsnearme.biz/how-to-be-approved-for-an-apartment", color: "rgb(255,69,0)" },
{ text: "☑️☑️ How To Pass A Background Check ☑️☑️", link: "https://www.apartmentsnearme.biz/how-to-pass-a-background-check", color: "rgb(0,71,119)" },
{ text: "📝📝 Application Evaluation 📝📝", link: "https://www.apartmentsnearme.biz/application-evaluation", color: "rgb(163,0,0)" },
{ text: "🔑🔑 How To Find The Right Apartment 🔑🔑", link: "https://www.apartmentsnearme.biz/how-to-find-the-right-apartment", color: "rgb(0,175,181)" },
{ text: "💳💳 Poor Credit and Application Approval 💳💳", link: "https://www.apartmentsnearme.biz/poor-credit-and-application-approva", color: "rgb(239,71,111)" },
{ text: "✨✨ First Time Renter ✨✨", link: "https://www.apartmentsnearme.biz/first-time-renter", color: "rgb(6,214,160)" },
{ text: "🚀🚀 Housing Application FAQ 🚀🚀", link: "https://www.apartmentsnearme.biz/housing-application-faq", color: "rgb(152,166,212)" }
];
$w.onReady(function () {
// Write your code here
//console.log("on lonin_");
button_change();
setInterval(button_change, 3000);
}
function button_change() {
$w("#MenuB1").hide("flip", manue_animation_out)
.then(() => {
$w("#MenuB1").label = manuslide[manu_link_count].text;
$w("#MenuB1").link = manuslide[manu_link_count].link;
$w("#MenuB1").style.color = manuslide[manu_link_count].color;
$w("#MenuB1").show("flip", manue_animation);
});
//console.log(manuslide[manu_link_count].text);
manu_link_count++;
if (manu_link_count >= manuslide.length) {
manu_link_count = 0;
}
}
I hope this will help someone