Start animasjon når du ruller css. Introduksjon til jQuery-rulleanimasjoner
Hei, kjære venner! Jeg brukte lang tid på å forberede materialet til dagens artikkel og prøvde å presentere det så detaljert som mulig. Jeg håper du etter å ha lest dette ikke lenger vil ha noen spørsmål om hvordan css gjøres.
Jeg vil advare deg med en gang: vi kommer ikke til å skrive manus eller noe sånt selv (bloggen er laget for nybegynnere, og vi trenger at den skal være enkel å koble til og fungere feilfritt).
For å fungere, må vi laste ned flere verktøy.
Størrelse: 0,48 MB
Last ned kilde
Først av alt er dette filen animate.css - et bibliotek der stiler for animering av elementer på siden er skrevet. For å visuelt vurdere og velge type animasjon bruker jeg vanligvis ressurssiden http://daneden.github.io/animate.css/
Det vil si at prosessen med å legge til animasjon til et element begynner med det faktum at jeg går til denne ressursen og velger en animasjonsstil fra de foreslåtte alternativene. (Heldigvis er det mye å velge mellom)
Deretter må du koble til stilarket. For å gjøre dette, kopier animate.css-filen til mappen med stilarkene til nettstedet ditt. For meg heter denne mappen "css". Og i filen "index.html", mellom head-taggene skriver vi:
Nå må vi tilordne en klasse til elementet som vi ønsker å animere, med det riktige navnet som ble valgt i forrige trinn. Det vil si at bounceInRight-stilen vist i skjermbildet ovenfor vil være en klasse for elementet som vi skal animere. Og også den animerte klassen, slik at animasjonen spiller. Håper jeg forklarte det tydelig? Hvis ikke, bruk eksemplet nedenfor - det er ekstremt enkelt!
For eksempel:
Nå, når siden er oppdatert, spilles en animasjon av. Du kan prøve ved å trykke på f5-knappen.
Er ikke det kult? Men dette er ikke slutten på animasjonsopprettingsprosessen, fordi vi må sørge for at animasjonen spilles av når du ruller siden, og ikke umiddelbart etter at den er lastet!
For å gjøre dette, må vi bruke det ferdige wow.js-skriptet. Den må plasseres i js-mappen i hovedkatalogen på nettstedet ditt. Jeg la bare ut den komprimerte versjonen fordi den veier mindre og laster raskere. Du kan gjøre deg kjent med prosjektet i sin helhet.
Så, for at animasjonen av elementer skal skje når du ruller siden, må du legge til følgende 2 linjer i index.html-filen mellom head-taggene:
ny WOW().init();
Og også, i bounceInRight-klassen, i stedet for animert, må du legge til wow. Det skal se slik ut:
Som du kan se, spilles den første animasjonen umiddelbart etter at siden er lastet, og den andre bare når du ruller, når brukeren ser den. Mens den første ikke vil bli lagt merke til hvis den ikke er plassert på den første skjermen.
Vi kan konkludere med at prosessen med å lage en slik animasjon kommer ned til 5 minutter bortkastet tid. Alt du trenger å gjøre er:
- Legg til 3 linjer med kode mellom åpnings- og lukkingshodebrikkene.
- Kopier filene animate.css og wow.min.js til de riktige mappene.
- Legg til en wow-klasse og en klasse med navnet på animasjonen til elementet vi ønsker å animere
Og det er det, nettstedet ditt vil se mye mer livlig og imponerende ut. Og i tilfelle salg - dyrere.
Men det er flere animasjonskontrollverktøy. For hvert element kan du angi flere spesielle attributter for finjustering:
- data-wow-offset: Avstand fra nedre kant av nettleseren for å starte animasjonen;
- data-wow-varighet: Endre animasjonens varighet;
- data-wow-delay: Forsinkelse før animasjonen starter;
- data-wow-iterasjon: Hvor mange ganger skal animasjonen gjentas?
For eksempel slik:
Det var alt for i dag, vi sees på smartlanding. Legg igjen dine kommentarer og still spørsmål! Ha det!
P.s.: Hvis du vil få animasjonen til å spille av når du ruller i begge retninger, anbefaler jeg deg å lese
Internett endrer seg hver dag. Noen teknologier og metoder dukker opp, andre forsvinner. Av denne grunn må nettdesignere og front-end-utviklere holde seg oppdatert med de siste trendene innen webdesign. Parallax-rulling, faste overskrifter, flat design, énsides nettsteder og CSS-animasjon er noen av de hotteste nett-trendene for øyeblikket.
I denne opplæringen skal vi se på å lage rullende animasjoner og effekter ved hjelp av CSS og jQuery.
De fire effektene vi skal lage kan sees på denne siden.
Merk: Koden som brukes i denne opplæringen kan forbedres ved å bufre objekter og bruke CSS-animasjon i stedet for jQuery " animere()", men for enkelhets skyld fokuserer vi på ideen først.
Hva er animasjoner og effekter når du ruller en side?Slike animasjoner og effekter er en ny, stadig mer populær metode som gir front-end utviklere muligheten til å lage multimedia og interaktive nettprosjekter. Når brukeren ruller nedover siden, kan utviklere enkelt manipulere objekter ved hjelp av CSS og jQuery.
For å oppdage om brukeren ruller nedover siden, bruker vi jQuery scroll()-hendelsen.
Når vi vet at brukeren ruller siden, kan vi få den vertikale posisjonen til rullefeltet ved å bruke scrollTop()-metoden og bruke de ønskede effektene:
if ($(this ) .scrollTop () > 0 ) (
// lage effekter og animasjon
}
}
)
;
Hvis vi er interessert i å lage adaptive effekter (optimalisert for forskjellige skjermoppløsninger), må vi definere følgende egenskaper:
- Eiendom bredde- nettleservinduets bredde.
- Eiendom høyde- høyden på nettleservinduet.
Uten å definere disse egenskapene vil vi lage effekter som er "statiske" og vil ikke fungere riktig hvis brukeren endrer størrelsen på vinduet horisontalt eller vertikalt.
Vi kan enkelt få verdiene til disse egenskapene ved å bruke metodene width() og height().
Følgende kodebit viser alle de nødvendige kontrollene vi må ta hensyn til for å lage siderullingseffekter.
$(window).scroll(function() (
if ($(this).width()<
992
)
{
if ($(this).height() 1000) (
// lage effekter
}
}
}
}
)
;
Nå som vi har dekket det grunnleggende om å lage disse effektene, la oss se dem i aksjon med fire forskjellige eksempler.
Eksempel #1Denne effekten utløses når toppposisjonen til vinduets rullefelt overstiger 60 piksler. I dette tilfellet kjøres følgende kodefragment:
if ($(window).scrollTop () > 60 ) (
$(".banner h2") .css ("display" , "ingen" );
$(".banner .info" ) .css ( "display" , "block" );
) annet (
$(".banner h2") .css ("display" , "block" );
$(".banner .info" ) .css ( "display", "ingen" );
}
Koden ovenfor skjuler det underordnede elementet h2 inne i et element med en klasse .banner og viser dets underordnede element .info, som opprinnelig var skjult.
Denne koden kan også skrives som følger:
if ($(window).scrollTop () > 60 ) (
$(".banner h2" ) .hide () ;
$(".banner .info" ) .show () ;
) annet (
$(".banner h2") .show ();
$(".banner .info") .skjul () ;
}
Følgende effekt avhenger ikke bare av toppposisjonen til nettleserens rullefelt, men også av bredden på vinduet. Spesielt gjør vi følgende forutsetninger:
Forutsetningene ovenfor er implementert i følgende kodebit:
if ($(window).width() 600 ) (
firstAnimation() ;
}
) else if ($(window).width() > 480 ) (
// animasjon som skal utføres
firstAnimation() ;
}
) annet (
if ($(window).scrollTop() > 450 ) (
// animasjon som skal utføres
firstAnimation() ;
}
}
Koden som inneholder animasjonen som vil bli utført er følgende:
var firstAnimation = funksjon() (
$(".clients .clients-info" ) .each (
funksjon()(
$(this ) .delay (500 ) .animate ((
opasitet: 1,
høyde: "180",
bredde: "250"
}
,
2000
)
;
}
)
;
}
;
Koden ovenfor animerer egenskapene for opasitet, høyde og bredde for et element .clients-info.
Eksempel #3Den tredje effekten avhenger også av toppposisjonen til vinduets rullefelt og bredden på vinduet. Spesielt gjør vi følgende forutsetninger:
Og her er koden:
if ($(window).width() 1750 ) (
secondAnimation() ;
}
) else if ($(window).width() > 549 && amp; $(window).width() 1150) (
secondAnimation() ;
}
) annet (
if ($(window).scrollTop() > 850 ) (
secondAnimation() ;
}
}
Koden som inneholder animasjonen er følgende:
var secondAnimation = funksjon () (
$(".method:eq(0)" ) .delay (1000 ) .animate ((
opasitet: 1
) , "langsom" ,
funksjon()(
}
)
;
$(".method:eq(1)" ) .delay (2000 ) .animate ((
opasitet: 1
) , "langsom" ,
funksjon()(
$(this) .find("h4" ) .css("bakgrunnsfarge" , "#b5c3d5" ) ;
}
)
;
$(".method:eq(2)" ) .delay (3000 ) .animate ((
opasitet: 1
) , "langsom" ,
funksjon()(
$(this) .find("h4" ) .css("bakgrunnsfarge" , "#b5c3d5" ) ;
}
)
;
$(".method:eq(3)" ) .delay (4000 ) .animate ((
opasitet: 1
) , "langsom" ,
funksjon()(
$(this) .find("h4" ) .css("bakgrunnsfarge" , "#b5c3d5" ) ;
}
)
;
}
;
Koden ovenfor animerer egenskapen sekvensielt opasitet for elementer .metode og endrer deretter bakgrunnsfargen til de underordnede elementene h4.
Eksempel #4Denne effekten avhenger også av toppposisjonen til rullefeltet og bredden på vinduet. Mer spesifikt:
Dette implementeres med følgende kode:
if ($(window).width() 3500 ) (
thirdAnimation() ;
}
) else if ($(window).width() > 549 && amp; $(window).width() 2200 ) (
thirdAnimation() ;
}
) annet (
if ($(window).scrollTop() > 1600 ) (
thirdAnimation() ;
}
}
Animasjonskoden er som følger:
.delay (2000) .animate ((opasitet: 1,
høyre: 0
), "langsom"
) ;
$(".blogs" ) .finn ("knapp" ) .delay (2500 ) .animate ((
opasitet: 1,
bunn: 0
), "langsom"
)
;
}
;
Koden ovenfor animerer sekvensielt opasitet, venstre, høyre og bunnegenskapene til elementene i P, IMG, KNAPP.
KonklusjonJeg håper at de fire eksemplene som vises her vil hjelpe deg å forstå hvordan du kan lage ulike effekter og animasjoner når du ruller en side.
Hvis du har spørsmål, anbefaler vi å bruke vår
Jeg er sikker på at du har kommet over nettsteder hvor, når du ruller nedover siden, ekstra innhold, nemlig blokker, er lastet med vakre og jevne effekter. Det viser seg at dette er veldig enkelt å gjøre ved å bruke et enkelt skript og noen få CSS-regler. Demoen vil ha flere lasteeffekter som du kan velge for nettstedet ditt.
La oss nå se hvordan strukturen til lastede blokker ser ut i HTML:
Som du kan se, er koden veldig enkel.
CSSDermed har vi en side hvor det er flere blokker, som skal lastes jevnt når man scroller nedover. Nå må vi komme opp med 2 CSS-klasser som vil fungere hvis en av blokkene er i det synlige feltet i nettleseren:
Skjult( opasitet:0; ) .visible( opasitet:1; )
jQueryNå må vi legge til et skript som vil starte hele denne enkle motoren. Det er i denne koden vi skal bruke klassen som er ansvarlig for en av de mange animasjonstypene i Animate.css, for eksempel vil det være fadeIn, så koden vil se slik ut:
JQuery(document).ready(function() ( jQuery(".post").addClass("hidden").viewportChecker(( classToAdd: "visible animated fadeIn", offset: 100 )); ));
Dette skriptet fungerer som følger: hvis blokken vår er i et usynlig felt i nettleseren, blir den tildelt den skjulte klassen, som skjuler blokken vår, etter at blokkeringen vår akkurat når den synlige delen av vinduet, tildeles den umiddelbart den synlige klassen langs med klassen fra Animate.css, som legger til vakker animasjon når du vises. Det er hele hemmeligheten :)
Jeg håper du likte denne leksjonen. Ha det:)
Hei alle sammen. Noen av dere har allerede lest en artikkel om... Mange likte dette materialet, men faktum er at animasjonen bare ble spilt av når du scrollte nedover. Mange, som meg, ønsket at denne animasjonen skulle spilles av både nedover og oppover. For eksempel, når du ruller ned, dukket et element jevnt opp, og når du scrollte videre, forsvant det også jevnt. Og i motsatt retning skjedde alt på samme måte.
Jeg har allerede sagt at jeg ikke kjenner javascript godt (i ferd med å lære), og jeg var selv ikke i stand til å implementere denne funksjonaliteten. Men heldigvis fant jeg en ferdig løsning på en annen side. Den ble oppfunnet av Artem Anashev, en av forfatterne på bloggen loftblog.ru. Der presenteres materialet om dette emnet utelukkende i videoformat, men jeg skal prøve å beskrive alt i tekst og legge ut kilden min. Hvis det er mer praktisk for deg å se videomaterialet, kan du lese originalen på slutten av artikkelen :)
Akkurat som forrige gang laster vi ned og kobler til animate.css-biblioteket, hvor du også kan velge type animasjon i en praktisk visuell design:
I denne artikkelen vil jeg bruke en ikke-optimalisert versjon av annimate.css-biblioteket, men jeg anbefaler at du bruker animate.min.css, lastet ned fra github. Siden denne versjonen veier mindre, og derfor vil laste raskere.
Jeg plasserte den i "css"-mappen, så den endte opp med å bli følgende bane:
Nå må vi koble til jquery og waypoints-pluginen, som vil hjelpe oss å rulle animasjonen i begge retninger:
Du kan laste ned veipunkter fra denne lenken eller ta den fra kilden (samt andre filer som er nødvendige for å implementere denne effekten).
Som i videoen nedenfor, foreslår jeg å lage en slik struktur slik at tre elementer som ligger etter hverandre (på rad) jevnt vises med en liten forsinkelse, og deretter jevnt forsvinner. Jeg laget en liten layout med store ikoner som vil bli animert:
Merk følgende! Du må teste effekten på en lokal eller ekstern server. Ellers vil ikke animasjonen spilles av.
Animasjon ved rulling i begge retninger - html-markering
Jeg opprettet en "boks"-klasse der jeg skal lagre bildene mine.
Det er ikke noe spesielt her, jeg setter bare bredden og høyden på området der jeg skal lagre ikonene. Jeg lager et venstreinnrykk på 50px og justerer det til venstre. Denne blokken er rent individuell, og du kan ignorere den. Det er bare at disse parameterne passet best til oppsettet mitt. Gå videre.
For at animasjonen skal spilles, må du legge til den animerte klassen. Egenskapene er spesifisert i animate.css-biblioteket, som vi inkluderte tidligere.
BoxHidded-klassen er nødvendig for å gjøre ikonene våre helt gjennomsiktige i det første øyeblikket. Dette antydes av logikken i skriptet vårt. Tross alt skal ikoner vises jevnt når du ruller, og deretter jevnt forsvinne.
BoxHidded( synlighet: skjult; /* Gjør ikoner helt gjennomsiktige */ ) .fadeInUp, .fadeOutDown( synlighet: synlige; /* Gjør ikoner helt ugjennomsiktige */ )
Delay-05s og delay-1s-klassene er ansvarlige for forsinkelsen i avspillingen av animasjonen med henholdsvis 0,5 sekunder og 1 sekund. La oss se på egenskapene gitt til disse klassene:
Delay-05s( -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; ) .delay-1s( -webkit- animasjonsforsinkelse: 1s; -moz-animasjonsforsinkelse: 1s; -o-animasjonsforsinkelse: 1s; animasjonsforsinkelse: 1s; )
Dette fullfører arbeidet med stilarket, alt vi trenger å gjøre er å plassere følgende script før den avsluttende body-taggen
$(".box") .waypoint(function(dir) (if (dir === "ned") $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); ellers $(this) . removeClass("fadeInUp") .addClass("fadeOutDown"); ), (offset: "80%" )) .waypoint(function(dir) (if (dir === "ned") $(this) .removeClass( "fadeInUp") .addClass("fadeOutDown"); else $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); ), (offset: -50 ))
Vær oppmerksom på linjene:
RemoveClass("fadeOutDown") .addClass("fadeInUp");
I dem legger vi til og fjerner klasser som er ansvarlige for animasjonsstilene som spilles av når du ruller. I dette tilfellet fadeInUp og fadeOutDown. Du kan velge alle typer animasjoner som presenteres på den offisielle siden til animate.css-biblioteket.
For å endre tidspunktet da animasjonen skal begynne å spille, endre offset-verdien. I dette tilfellet er den satt til 80 %. Slik jeg forstår det, er dette avstanden fra det øverste punktet på skjermen til blokken som vi animerer.
Jeg ble spurt flere ganger om det er mulig å sette avstanden til starten av animasjonen i prosent, siden alles skjermer er forskjellige. I forrige versjon av denne effekten var det ikke mulig å gjøre dette i prosent. Dette førte til visse problemer.
I dette tilfellet er dette problemet løst. Den første offset er ansvarlig for å starte animasjonen. Og den andre er for forsvinningen av blokker. Det vil si når 50 piksler med animert innhold blir usynlig. Prøv det! Et eksempel vil hjelpe deg å forstå alt.
dimadv7
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // vise min miniatyrbildestørrelse?>
Hilsener. I dag skal vi lære hvordan du animerer elementer på en side og viser animasjonen når du ruller siden. I denne opplæringen vil vi jobbe med bibliotekene animate.css og wow.js. Denne leksjonen er også tatt opp i en video, og bloggen har nå en kanal på YouTube. Derfor vil nye leksjoner bli ledsaget av videomateriell. Gå!
Til å begynne med utarbeidet jeg en html-side med enkle elementer (overskrifter og bilder) som vi skal animere. Her er HTML-koden til siden:
Overskrift én 
Overskrift to 
Overskrift tre 
Overskrift fire 
Overskrift fem 
Og enkel CSS-oppmerking:
Seksjon ( bredde: 80 %; tekstjustering: senter; posisjon: relativ; margin: 0 auto; utfylling-topp: 50 piksler; polstring-bunn: 50 piksler; ) seksjon h1 ( skriftstørrelse: 32 piksler; skriftvekt: fet skrift; margin: 20px 0 50px; teksttransformering: store bokstaver; ) seksjon .col (bredde: 30%; margin: 0 1% 50px; display: inline-block; )
Som du kan se, er alt egentlig veldig enkelt.
Vi kobler til animate.css. Animerende elementerLast ned animate.css-biblioteket. Jeg legger filen animate.min.css i /libs-mappen ved siden av html-siden. Vi kobler animate.min.css som en vanlig css-fil, mellom temaene.
Nå, til elementene som trenger å bruke animasjon, må du legge til de nødvendige CSS-stilklassene. Du må legge til den animerte klassen og en klasse med navnet på animasjonen, for eksempel swing. Dette er hva du ender opp med for h1-overskriften:
Overskrift én
Nå vil denne overskriften spille av den angitte animasjonen når siden lastes. På samme måte vil vi sette animasjon for andre elementer:
Overskrift én
Vi la til animerte klasser for overskriften, og for hver kolonne vil de nå spille av animasjon når siden lastes. På samme måte kan du legge til animasjon til andre sideelementer. Men det er et lite problem, all animasjonen spilles av når siden lastes. Og når vi ruller til elementer som er utenfor den første skjermen, vil vi ikke lenger se animasjonen, siden det allerede skjedde da siden ble lastet. For å vise animasjon bare når elementet er synlig, må du inkludere wow.js-biblioteket
Koble til wow.js-biblioteket for animasjon når du ruller sidenwow.js-biblioteket ble spesiallaget for å fungere sammen med animate.css-biblioteket. Det fungerer på en slik måte at animasjonen av elementer ikke fungerer når siden lastes, men når disse elementene kommer til syne, det vil si når siden rulles.
For å koble til biblioteket plasserte jeg wow.min.js-filen i pgre/libs ved siden av siden, og koblet den til som et vanlig js-skript. Også, etter tilkobling, må dette biblioteket initialiseres. Du bør koble til wow.js etter å ha koblet til jquery. Dette er et must.
ny WOW().init();
Nå som biblioteket er koblet til, la oss gå videre til å redigere koden. For å bruke arbeidet til wow.js på elementer, må du legge til wow-klassen. Forresten, du kan erstatte den animerte klassen med den. Det blir slik.
Overskrift én
Overskrift én
Etter å ha endret animert til wow på alle elementer med animasjon, vil vi se at nå utløses animasjonen av elementene når siden rulles, og ikke når den lastes.
wow.js-biblioteket inneholder også tilleggsinnstillinger. Du kan se dem i dokumentasjonen på bibliotekets nettside. Du kan for eksempel legge til en forsinkelse i animasjonen. Den er satt av html5-parameteren data-wow-delay="1s". I stedet for 1s kan du spesifisere din egen forsinkelsesverdi. Jeg satte en forsinkelse for elementene i den første delen slik at animasjonen av hvert element vil begynne etter den forrige, og dette er hva som skjedde:
Overskrift én
Det er alt. Nedenfor kan du se videoen av denne leksjonen, finne lenker til bibliotekene som er brukt, se det ferdige resultatet av det som skjedde og laste ned filene – et arkiv med det ferdige oppsettet, og en mal for å fullføre denne leksjonen.
Referanser til leksjonen
Animate.css-bibliotek: