Jquery slots effekt

Jquery slots effekt h1>

Gratis Dhtml skript, Jquery plugins, Javascript, CSS, CSS3, Html5 Library.

jQuery quickie: Slotmaskinnavigasjon.

Navigasjon er en av de tingene du vil se pa hver nettside. Jeg ville gi denne delen litt ekstra liv, og da jeg sa en film i gar som inkluderte spilleautomater, slo det meg plutselig. Ved hjelp av jQuery og noen grunnleggende CSS og HTML, kan vi legge til litt sot spilleautomat stil animasjon til en normalt kjedelig slags navigasjon. Sa, for i dag, vil vi skape en slotmaskinnavigasjon som du kan bruke pa nettstedet ditt.

Lurer allerede pa hvordan det fungerer? Sjekk ut hvordan du kan lage denne spilleautomaten selv. Selvfolgelig kan dette lett bli transportert for a bli brukt med sosiale medier knapper (i stedet for hovednavigasjonen pa nettstedet ditt).

Som vanlig vil vi holde HTML sa kort og ren som mulig. Vi bruker ganske enkelt en uordnet liste som inneholder lenker. Vi vil stile det senere med CSS.

V r oppmerksom pa de forskjellige klasse- og id-attributter vi ma bruke. Alle koblingene har en annen klasse, siden vi ma referere den fra CSS.

Dette er all HTML som vi trenger for a gjore dette eksemplet arbeid. Na for a legge til noen stil ved hjelp av CSS.

Selv om CSS ikke er veldig spektakul r, er det noe som er selve nokkelen til a gjore denne teknikken til a fungere. La oss ta en titt pa forste del.

Ingenting skjer sa mye her. Bare noen koblinger som er plassert i en horisontal rad med en fast med og hoyde. Men det er den siste linjen som er veldig viktig: Bakgrunnsbildet er satt.

Siden vi ikke satte bakgrunnsrepetisjon eller bakgrunnsstatusegenskaper, blir bottons.png-bildet plassert pa 0, 0 (overst til venstre) og vil gjentas over hele tiden. Vi bruker CSS sprites for denne teknikken.

Na ser du hvorfor alle koblingene har forskjellige klasser. Vi ma angi bakgrunnsstatusegenskapen, for a vise riktig knapp.

Vi har na grunnlaget for det vi trenger for a fa spilleautomaten til a fungere. Alle koblingene er pa plass, og bakgrunnsposisjonen er alt riktig. Na for a fa noe magi skje med jQuery.

Forste ting forst: Vi trenger plugin for bakgrunnsposisjoner, siden vi trenger a animere bakgrunnsstatusegenskapen (som standard kan jQuery ikke gjore dette). Vi bruker ogsa jQuery Easing Plugin for a bruke noen tilpassede animasjoner. Of course, vi trenger jQuery-kjernen for a gjore alt dette til a fungere.

For vi handterer funksjonen hover (), ma vi gjore noen forberedelser. Vi ma fange den opprinnelige X-posisjonen til knappen, siden vi ma animere tilbake til den verdien senere. Vi stiller ogsa standard Y-posisjonen til 0 (overst), som vil bli okt med hover () -handlingen senere.

Na som vi har alt det, kan vi endelig ga videre med kjernen i denne teknikken: hover () hendelsen.

La oss sla det ned litt. NewYpos-verdien fra elementet okes med en. Ved a gjore dette (og bruke det senere med animasjonsfunksjonen), sikrer vi at knappen vil glide ned for alltid, noe som gir den spilleautomatens effekt. Siden bakgrunnsbildet gjentas, ser vi alltid en kopi av det samme bildet om og om igjen. Vi bruker originalXpos for a opprettholde samme tegn, sa det ser ikke merkelig ut.

OnMouseOver (forste funksjon) er litt raskere enn onMouseOut (andre funksjonen), men du kan endre det hvis du vil. Dette teller ogsa for lette effekten, som na er satt til easeInCirc og easeOutCirc (begge fra easing plugin).

Det handler om det! All koden du trenger for a skape en kjekk utseende slotmaskinnavigasjon.


Vil du spille i det beste kasinoet? Vi fant det for deg. Spill her nå!