Gå tilbake til artikler
Legg til automatisk roterende faner i Webflow
Opplæringsprogrammer

Legg til automatisk roterende faner i Webflow

Med en liten bit tilpasset kode kan webflytkomponenten ha superkrefter. Automatisk roterende faner kan være en utrolig effektiv måte å vise informasjon på en mer engasjerende og interativ måte. Sjekk ut noen av eksemplene nedenfor

Peter Bekkers
6. mai 2021
Eksempel på det ferdige produktet


Hei gutter, i denne opplæringen skal jeg vise deg hvordan du setter Webflow-faner for å bla automatisk gjennom hver fanekobling på en angitt tid. Dette vil ikke forstyrre den vanlige muligheten til brukere å klikke på fanekoblingene. 

Automatisk roterende faner kan oppnås i tre enkle trinn.

Trinn 1. Legg til skriptet på webflytsiden din

Plasser denne koden inne i<head> stikkord

Alt denne koden gjør er å fortelle nettleseren om å blokkere utilsiktet utheving av faneknappene for ekstra polering som vist i demonstrasjonen nedenfor.


 


Plasser denne koden før</body> stikkord

Dette er den viktige koden. Du kan endre timingen til hva du vil. Det er for øyeblikket satt til 6 sekunder per fane som standard.



Legger til skript i sidens overskrift og kropp



Trinn 2. Opprett en ny fanekomponent

Det er to måter å legge til en fanekomponent, du kan gå inn i panelet Legg til elementer, bla ned til komponenter og dra inn kategorikomponenten. Eller den raskeste måten er å bare trykke på ctrl-e, skrive "tabs" og trykke på enter. 

Opprette nye fanekomponenter


Trinn 3. Gi alle fanekoblinger klassen "Standard-fanen" og kategorien-menyen klassen til "fanemenyen".

Koden vi satte inn tidligere, får tilgang til fanekoblingene og fanemenyen gjennom disse klassenavnene. Selv om du kan endre navnet på klassene som skriptet vil målrette mot.

Giving Tab Links et kursnavn på "Standard Tab"
Gi fanemenyen et kursnavn på "Tabs Menu"

Ferdig. Det er det. 

Publiser nå nettstedet ditt og se det live for å se de automatisk roterende fanene i aksjon!


Bonus trinn!

Hvis du har lyst til å gå en ekstra mil, anbefaler vi å lage en lastelinje for å gi brukerne en visuell indikasjon på når neste faneendring vil skje. Ikke bekymre deg, dette er super enkelt. 

Trinn 1. Legg til en div-blokk inne i fanekoblingen - denne inneholder lastelinjen. 

Du kan stille inn klassenavn, bredde, høyde og farge til hva du vil. Absolutt posisjonering er det viktige her, da det vil tillate belastningsfeltet vi lager ved siden av å sitte på toppen av denne divblokken. 

Opprette "Load Bar Base" klasse

Trinn 2. Legg til en ny divblokk inne i diven du nettopp har laget - dette vil være belastningsfeltet.

Det skal se slik ut
  • Sett bredden til 0% (dette blir animert for å endre størrelsen til 100% senere)
  • Høyden til 100% slik at den tar opp hele høyden på lastestangpakken som den sitter inne i. 
  • Velg en farge du liker.


Trinn 3. Når fanen er i sikte, vil vi animere størrelsen "load bar" fra 0% til 100% over 6 sekunder. 

  • Med koblingen "Standard Tab" valgt, gå til interaksjoner og legg til en ny elementutløser for å oppstå under "faneendring".
  • Lag en ny tidsbestemt animasjon når fanen er i visning.
  • Velg lastelinjen og legg til en ny handling for å påvirke størrelsen.
  • Sett bredden til 0% og varigheten til 0 sekunder.
  • Med lastelinjen fortsatt valgt - legg til en annen handling for å påvirke størrelsen. Denne gangen vil vi sette bredden til 100% og varigheten til 6 sekunder.


Trinn 4. Nå må vi tilbakestille lastelinjen til 0% når det ikke er den nåværende fanen. 

Vi vil lage en ny animasjon når fanen ikke vises. Når lastelinjen er valgt, starter du en ny animasjon og stiller størrelsen til 0% bredde med 0 sekunders forsinkelse.

Alt du trenger å gjøre er å beundre den fantastiske nye animasjonen din.

OM FORFATTEREN
Peter Bekkers

Peter er en fremtredende Webflow-utvikler med en spesiell interesse i å heve Webflows-funksjonaliteten gjennom tilpassede kodeløsninger. Peter er en lederutvikler i Flowbase og har hatt hendene på en rekke av de viktigste Flowbase-produktene

Likte du denne lesningen?

Hold deg oppdatert med de siste nyhetene i videoen, strategier og innsikt sendt direkte til innboksen din!

takk! Bidraget ditt er mottatt!
Oops! Noe gikk galt under innsending av skjemaet.

Motta webflytressurser direkte til postboksen.

Registrer deg for å få ukentlig innsikt og inspirasjon i innboksen din.

ANDRE GUIDER OG LEKSJONER

Øk nettsted for nettstedsflyt ytterligere.