Sett opp tilbakemelding. Opprette et tilbakemeldingsskjema i PHP

Vi animerte elementer ved å bruke animate.css-biblioteket. CSS-animasjonen fungerte umiddelbart etter at siden ble lastet og stoppet, noe som er en stor ulempe hvis siden er lang.

Demo med animate.css

Mens han ruller gjennom en lang landingsside, har brukeren rett og slett ikke tid til å se animasjonen av alle seksjoner, fordi animate.css-biblioteket allerede har fungert raskt. Hva å gjøre? Hvordan få animasjonen til å fortsette å fungere mens du blar på siden og reagerer på nye seksjoner med elementer.

Som populær visdom sier, hvis ett bibliotek ikke er nok, så legg til et annet.

Kobler til wow.js-plugin-modulen

Nettsted: https://github.com/matthieua/WOW

Vi må sørge for at animasjonen bare fungerer når vi ruller siden. Dette er grunnen til at det er en wow.js-plugin, som ikke krever at jQuery fungerer. Vær oppmerksom på at filen animate.css også må inkluderes og klassene til taggene må spesifiseres, dette ble nevnt i begynnelsen av artikkelen.

Huske! Animate.css og wow.js fungerer sammen!

Uavhengig av tilkoblingsmetoden, skriver vi en lenke til JS-filen før den avsluttende body-taggen, i script-taggen. Starter plugin-funksjonen - new WOW().init()

Tilkobling via CDN

ny WOW().init();
Tilkobling via arkivnedlasting

Last ned arkivet fra github og overfør wow.min.js-filen fra den nedlastede arkivmappen dist til js-mappen med prosjektet ditt.

ny WOW().init();

For at animasjon på nettstedet skal fungere, må du legge til wow-klassen i taggene til elementene du skal animere, i stedet for den animerte klassen. Å erstatte klasser gjelder for de som bare brukte ett animate.css-bibliotek på siden, men bestemte seg for å legge til wow.js-pluginen. Hvis du installerte begge filene samtidig, skriv bare inn wow og navnet på animasjonen.

Det var slik:

Og det ble slik:

Nå starter animasjonen når du ruller siden, beveger seg nedover, ettersom nye elementer dukker opp på siden.

Ytterligere alternativer

La oss nå se på tilleggsalternativene vi kan bruke i animasjonene våre. For å gjøre dette, la oss se på hva som står i dokumentasjonen; av fire alternativer bruker jeg faktisk bare to. Resten, etter min mening, er ubrukelig og til og med skadelig.

Data-wow-duration-attributtet spesifiserer varigheten av animasjonen i sekunder; noen ganger er det nødvendig å bremse animasjonen for å gjøre den jevnere. Data-wow-offset-attributtet angir i hvilken avstand fra bunnkanten av nettleseren animasjonen skal starte.

La oss si at du vil at animasjonen skal vare i 1 sekund. Legg til den aktuelle parameteren i tag-klassen.

Hvordan det fungerer

Demoeksempel med animate.css+wow.js

Hvor er det best å bruke kombinasjonen animate.css + wow.js i praksis? Der du aktivt promoterer et produkt eller en tjeneste, vil denne presentasjonen av informasjon tiltrekke flere kunder. Den viktigste forbrukeren av animasjoner når du ruller en side er landingssiden. Det er én ting, men før du henger animasjon på det, må du først lære å lage landingssider profesjonelt, i hvert fall fra dette videokurset Legg merke til hvor attraktivt salgssiden til selve videokurset er animert.

Det har for lengst slått rot blant utviklere.
Så. Ved hjelp av pluginene som presenteres i denne samlingen, kan du lage et moderne nettsted med utmerket dynamikk. Jeg tror hver person som er interessert i utvikling av nettsteder har sett disse pluginene i aksjon. Når du ruller på siden, vises blokker, ulike elementer eller tekst jevnt, flyttes ut, spinner osv. Som praksis viser, liker klienter virkelig slike fancy ting.
Å implementere rulleeffekter på en side er ikke så vanskelig som det kan virke ved første øyekast. Alt du trenger er en plugin av høy kvalitet og direkte hender. Selvfølgelig kan en nybegynner layoutdesigner oppleve vanskeligheter, men hvis du sitter en stund, forstår prinsippene for drift, vil oppgaven virke veldig enkel.
Til tross for at mange mennesker liker animasjon på nettstedet, bør du ikke overdrive det, ellers vil du ende opp med en overbelastet, visuelt dårlig oppfattet side der all oppmerksomhet vil bli fokusert på alle disse "fløytene", og ikke på informasjonen som må formidles til besøkende. I tillegg, jo flere skript som er koblet til, jo tregere fungerer siden. I eldre nettlesere fungerer kanskje ikke dette i det hele tatt. Koble effekter klokt. Ofte er et enkelt glatt, diskret utseende av blokker nok. Denne effekten gir siden jevnhet og dynamikk, noe som gjør nettstedet levende. I min praksis har jeg sett mange nettsteder med effekter uten sans for proporsjoner. Dette gjør meg bare kvalm - den eneste følelsen som oppstår. Men sannsynligvis håpet utviklerne på en "Wow-effekt". Så. Bruk alt klokt og med måte!
Alle plugins er helt gratis, men jeg vil anbefale å gjøre deg kjent med lisensene, siden du i noen tilfeller må oppfylle en rekke betingelser for å bruke dem til kommersielle formål.

WOW.jsEn god plugin for å implementere animasjon av elementer ved rulling. Den har mange animerte blokkutseendealternativer og er ganske enkel å tilpasse. ScrollMagic En annen populær plugin som du kan implementere komplekse animasjoner som vil utløse når muserullen ruller. I dette tilfellet lar pluginet deg lage virkelig komplekse bevegelseseffekter, endre bakgrunnen på siden og generelt deformere former. ScrollMagic brukes ofte på reklamesider som krever mye animasjon.

ScrollmeEn enkel og lett plugin som du kan implementere spektakulær animasjon med når du ruller. Du kan skalere, rotere, flytte, redusere eller øke gjennomsiktigheten til ethvert element.

Superscrollorama Superscrollorama er en kraftig, men tung plugin for å lage rullende animasjoner. Dens arsenal inkluderer mange forskjellige innstillinger for animasjon av tekst, individuelle DIV-elementer, inkludert effekter.
Mer detaljert informasjon finnes i dokumentasjonen for denne jQuery-pluginen.

onScreen er en utmerket plugin som vi ofte bruker i våre prosjekter. Den lar deg enkelt og raskt lage ulike effekter for utseendet til elementer når du ruller en side. Programtillegget er lett og laster ikke inn siden.

OnePagejQuery OnePage-plugin lar deg dele en side i separate skjermer med en høyde på 100 % og animere overgangen gjennom dem. Alt som trengs er et lite dytt for å begynne å rulle til neste skjerm. Den samme effekten ble brukt på 5s-kampanjesiden.
Det er problemer med, som med nesten alle lignende plugins. Hvis teksten ikke passer i høyden, kuttes den rett og slett av og rullefeltet vises ikke.

FSVS Svært lik funksjonaliteten til forrige plugin. Lar deg gjøre glidende rulling over skjermer ved hjelp av css3. Har et lignende problem når du ser på telefoner. Navigering gjennom skjermer i form av separate lysbilder er mulig enten ved å bruke muserullen eller ved å klikke på navigasjonen på punktsiden.

jInvertScrolljInvertScroll lar deg lage kul horisontal parallaksrulling. Mens du ruller muserullen ned, beveger alle elementene på siden seg horisontalt, og med forskjellige hastigheter, noe som skaper en parallakseeffekt.

WaypointsWaypoints er en jQuery-plugin som lar deg vise hvilket som helst element når den besøkende er på et gitt punkt på siden. For eksempel, når en besøkende er ferdig med å lese en artikkel på et nettsted og nærmer seg slutten av teksten, dukker et informasjonsvindu opp på siden av siden som ber ham om å lese neste artikkel eller en lignende artikkel.

ScrollocueOriginal plugin for spesifikke oppgaver. Lar deg flytte rundt på siden ved å velge blokker ved å høyreklikke på siden. For hvert nytt klikk fremheves elementet under, og ruller dermed litt på siden. Rulling med piltastene på tastaturet støttes også.

Scrolling Progress BarEn interessant løsning som du kan vise fremdriften med å lese informasjon på en side med. Det er også mulig å dele teksten inn i seksjoner, og alt dette vil bli vist visuelt hvor som helst som passer deg på siden.

multiScroll.jsmultiScroll.js er en jQuery-plugin som ligner på de to forrige skyveskjerm-pluginene, men har en betydelig forskjell. Hvis skjermen i tidligere tilfeller bare ble snudd, er denne mer som en moderne bildeglidebryter. Skjermen er delt inn i to like deler og den venstre ruller opp og den høyre ruller ned. På denne måten blir innholdet praktisk talt revet fra hverandre.
Denne plugin-en kan for eksempel brukes til å lage en portefølje for en fotograf eller designer. Jeg tror besøkende vil sette pris på nettstedet ditt.

browserSwipe.jsEn annen fullskjermsrulling-plugin, ved hjelp av hvilken du skaper en effektiv overgang på tvers av skjermer. Tilgjengelige effekter inkluderer glidende overgang, overgang med fullskjermrotasjon, zoom og horisontal rulling over skjermer. Du kan kombinere alle effekter på én side.

jQuery.panelSnap Fullskjerms skyve-rulling-plugin. Ved første øyekast er ikke plugin-modulen forskjellig fra de forrige, men den har et internt rulleområde. Hvis vi blar til slutten av det interne innholdet, skjer overgangen til neste skjerm automatisk. Teoretisk sett er dette en løsning på problemet for responsive nettsider. Hvis det indre vinduet gjøres i full størrelse, vil ikke innhold som ikke passer i høyden gå tapt på små skjermer.

På siden. En trend som har vært populær i det siste er animasjonen av elementer som endrer seg mens du ruller en side. I denne artikkelen vil vi lage en overskrift helt øverst på siden, og i rullingsøyeblikket vil størrelsen og fargen på overskriften gradvis endres.

Slik vil det se ut til slutt:

HTML-oppmerking

HTML-en for vårt eksempel er på sitt enkleste, alt vi trenger er en h1-overskrift inne i et overskriftselement. Og for å gjøre eksemplet klarere, la oss legge til et bilde med en premie til handlingen =)

jQuery

La oss først legge til noen standardstiler som forbedrer utseendet til overskriften:

Jeg vil umiddelbart merke at CSS-overgangen er satt i standardstilen. Fra konstruksjonen av overgangsegenskapen er det klart at vi endrer alle egenskapene til elementet (overgangs-egenskap - alle), på 0,4 sekunder (overgang-varighet - 0,4 s), med lett akselerasjon (overgangs-timing-funksjon - letthet) ).

Nå beskriver vi den klebrige klassen, som brukes på overskriften under rulling. Det er et par ting vi ønsker å gjøre med tittelen: Først vil vi at tittelen skal være mindre, og vi vil også endre bakgrunnsfargen og justere teksten til venstre:

1 2 3 4 5 6 7 8 9 10

header.sticky( posisjon: fast; skriftstørrelse: 24px; linjehøyde: 48px; høyde: 48px; bredde: 100 %; bakgrunn : #efc47D ; tekstjustering: venstre; polstring-venstre: 20px; }

Klar! Basert på dette eksemplet kan du gjøre absolutt hvilken som helst manipulasjon med HTML-sideelementer mens du ruller, alt du trenger er jQuery, CSS og ideene dine!

Hilsen, kjære venner. I dag har jeg forberedt en annen interessant leksjon for deg, der du vil lære hvordan du lager vakre animasjoner for elementer på nettstedet ditt. Vi skal ikke studere å lage animasjon fra bunnen av, men vil bruke et ferdig manus.

Animate.CSS – det heter det. Den inneholder mange klare til bruk animasjoner. Alt vi trenger å gjøre er å koble dem på rett sted og til rett tid!

Hundre prosent er du nå bekymret for ett spørsmål:

-Hvordan ser Animate.CSS ut i aksjon?

Vel... jeg skal svare: - Bare flott

Vel, la oss være mer spesifikke... For eksempel implementerte jeg all animasjonen på treningssiden Layout for 5+ ved å bruke denne tingen. Klikk på knappen nedenfor og du kommer til treningssiden. Rull siden helt til slutten og se hvordan animasjonen fungerer:

Men du vil lage dette med dine egne hender, hvis du fullfører leksjonen:

Ok, slutt å klø deg i tunga. Det er på tide å begynne å jobbe med kroppen! Uff, dere små vindere, la oss komme til poenget!!

Animate.CSS-opplæring + rulleanimasjon