Opret on-page speech bobler med Popper.js
Alle ved det værktøjsvink og der er snesevis af gratis ressourcer til at hjælpe dig med at gøre dem. Imidlertid, brugerdefinerede meddelelsesbobler eller “poppers” er også meget nyttige.
De er ikke begrænset til svævebegivenheder, så de kan vises på siden konsekvent og arbejde rundt om andre brugeradfærd.
Hvis du søger at oprette disse tale bubble poppers på dit websted da Popper.js er det bedste valg. Det er et gratis open source plugin, der er hostet på den officielle js.org hjemmeside.
Du finder disse bobletips på mange websteder, der har komplekse grænseflader. Nogle gange vil de tilbyde hurtige tip, walkthroughs, og onboarding rådgivning for folk, der er nye til grænsefladen.
Med Popper.js behøver du ikke vente på, at brugeren svæver bare for at oprette et værktøjstip. I stedet kan du tvinge en popper til vises overalt, enhver størrelse, enhver farve, med dynamisk positionering.
Tjek Popper.js demosiden for at se, hvad jeg mener. Den leveres med a bred vifte af positioneringsfunktioner Det giver dig mulighed for automatisk at vende popperpositionen baseret på skærmens placering.
Når brugeren ruller ned på siden, kan de miste popperboblen. Med dette plugin kan du tvinge det tilbage i visningen ved at vende det op (eller ned), afhængigt af brugerens rulleretning.
Du har fuld kontrol over grænserne, pilens positioner, værktøjstipfarverne og meget mere. For ikke at nævne denne plugin er smuk og fuldt udvides hvis du vil tilføje dine egne funktioner i blandingen.
Alt kildekoden er tilgængelig gratis på GitHub, hvis du vil tjekke det.
For at komme i gang skal du kigge på dokumentationsside for en komplet vejledning. Dette fortæller dig, hvilke scripts du skal bruge, hvordan du opretter en brugerdefineret popper, og hvordan du konfigurerer de forskellige visningsindstillinger. Selvom den bedste ressource er hoved Popper.js side, med demoer i massevis og masser af kodeprøver.
Hvis du vil læse mere om udvikling, tjek dette blogindlæg skrevet af skaberen Federico Zivolo.
