Det är egentligen bara en "click" event listener i JavaScript.
När du klickar i en av bubblorna med siffror sker följande:
1) Innehållet i "flow charten" eller vad man vill kalla det byts ut. De har en animerad bild för varje steg i processen. Klickar du på bubbla 2 visas bild 2, osv. Du kan se med Inspect Element att innehållet i den rutan byts ut när man klickar.
2) De scrollar till nästa textruta nedan.
Detta är inget annat än ett bildspel, eller rättare sagt en "carousel". Bara att det ser mer tjusigt ut när bilden ("flödet") är animerad med lite bubblor och sådant.
Bildspel = byter automatiskt bild.
Carousel = byter innehåll (bild/text) när du klickar
Sök efter exempel på valfri carousel i t.ex. CodePen så hittar du "tekniken" bakom det.
Exempel på en "bubbel-knapp" kan se ut som:
<button class="bubbla" data-id="3">
<img src="bild1.gif" id="bildrutan">
Placera knapparna med position absolute, och ha bilden som position relative.
Det har dem också gjort. Du kan se de lekt fram o tillbaka med "top" och "left" för att hitta rätt position (X och Y).
Kod:
const bubbelKnappar = document.querySelectorAll(".bubbla");
bubbelKnappar?.forEach(bubbelKnapp => bubbelKnapp.addEventListener("click", bytbild));
function bytBild(e) {
e.stopImmediatePropagation();
e.preventDefault();
const bubbelId = Number(e.target.dataset.id);
const allImages = ["bild1.gif", "bild2.gif", "bild3.gif", "bild4.gif"];
const bildenDuVillVisa = allImages[bubbelId - 1];
const bildrutan = document.getElementById("bildrutan");
bildrutan?.src = bildenDuVillVisa;
}
orkar inte formatera eller skriva ordentligt här, men i princip så.
Sen lägger du till att visa rätt textrutan under "processkartan" (bildrutan)
//skrivet på mobil
Om du inte vill använda gif-bilder kan du skapa varje slide på annat sätt. Typ SVG som animeras med CSS. Sen kan du exempelvis Base64-encode varje slide's HTML. lägga de i en array, sen hämta rätt HTML segment, base64-decode det och köra ".innerHTML" istället för ".src" på hela bildrutans container div. Varför base64? Jo för det är mer kompakt.
