Många sajtadministratörer försöker locka sina besökares uppmärksamhet med sin webbläsares funktionalitet genom att animera element. Det ser snyggt och attraktivt ut. Men problemet är att efter att sidan har laddats startar animeringen för alla element på en gång, och vi behöver den för att starta i samma ögonblick som användaren rullar på sidan.
Hur kan jag få animeringen att starta när jag rullar på sidan? Idag kommer vi att prata om detta i vår artikel. Men först rekommenderar vi att du läser detta material. I den kommer du att lära dig om filen animate.css som gör att du kan animera dina element och som är en integrerad del av vårt material idag.
Så för att utlösa den rullande animeringen behöver vi ett litet JavaScript-bibliotek som heter WOW.js. Den har en liten uppsättning funktioner, parametrar och ytterligare inställningar. En av dess fördelar är att du inte behöver inkludera JQuery-biblioteket för att använda det. Som ett resultat får vi en amimate.css-fil med en uppsättning animationer och en wow.js-fil som tar den här animationen och kör den när du rullar.
Låt oss gå vidare till att ansluta det här biblioteket till din webbplats.
Ansluter wow.jsFörst och främst måste du ha själva animationen ansluten, animate.css.
Följaktligen kommer den andra punkten att ansluta WOW.js. För att aktivera det måste du skriva några rader till.
nya WOW().init();
De två komponenterna är sammankopplade. Låt oss nu gå vidare till exemplet, låt oss använda låt oss skapa ett block och skriva wow-klasserna. Denna klass innebär att animeringen startar när du rullar om elementet inte är högst upp på sidan. Och den andra klassen är själva animationen, låt oss ta bounceInUp till exempel. Därför borde vi sluta med kod som denna.
Ditt innehåll
Som vi redan har sagt har biblioteket flera parametrar för mer detaljerad anpassning av animationer.
Extra tillvaldata-wow-duration: Ändra animeringens varaktighet;
data-wow-delay: Fördröjning innan animeringen startar;
data-wow-offset: Avstånd för att starta animeringen (från den nedre kanten av webbläsaren);
data-wow-iteration: Hur många gånger upprepas animeringen?
Ditt innehåll
Ditt innehåll
När du initierar ett objekt kan du skicka ett objekt med parametrar:
inställningarboxClass: klass för wow-objekt;
animateClass: klass för att trigga CSS-animation ("animerad" för animate.css);
offset: liknande data-wow-offset, men i global skala;
mobil: aktivera/avaktivera WOW.js på mobila enheter.
live: ständig kontroll av nya WOW-element på sidan.
wow = nytt WOW(
{
boxClass: "wow", // default
animateClass: "animerad", // standard
offset: 0, // standard
mobil: sant, // standard
live: true // default
}
wow.init();
Det är allt, instruktionerna om hur du använder WOW.js-biblioteket för att animera element när du rullar är klara. Skriv dina recensioner och kommentera materialet. Dela med dina vänner.
Numera kan man hitta sådan animation på många sajter, och nedan kommer jag också att visa ett exempel. Personligen använder jag den här typen av animation när jag skapar landningssidor. Många webbansvariga använder det aktivt på sina webbplatser och den här animationen ser ganska vacker ut när man rullar.
För att göra detta på din hemsida måste du jobba lite. Om du förstår åtminstone lite, så är det inget komplicerat. Låt oss dela upp alla våra handlingar i steg för att inte bli förvirrade.
Steg 1Som alltid, för att jQuery-biblioteket ska fungera, måste du inkludera biblioteket i sidhuvudet före det avslutande huvudet eller i sidfoten före det avslutande brödtexten.
Steg 2
//Kod här
Eller skapa en fil, till exempel - scriptviewport.js och anslut den.
Lägg till följande kod inuti taggarna eller filen:
Function(a)(a.fn.viewportChecker=function(b)(var c=(classToAdd:"visible",classToRemove:"invisible",offset:100,repeat:!1,invertBottomOffset:!0,callbackFunction:function( a,b)(),scrollHorizontal:!1);a.extend(c,b);var d=this,e=(height:a(window).height(),width:a(window).width( )),f=-1!=navigator.userAgent.toLowerCase().indexOf("webkit")?"body":"html";retur this.checkElements=function())(var b,g;c.scrollHorizontal ? (b=a(f).scrollLeft(),g=b+e.width):(b=a(f).scrollTop(),g=b+e.height),d.each(function() )( var d=a(this),f=(),h=();if(d.data("vp-add-class")&&(h.classToAdd=d.data("vp-add-class) ") ),d.data("vp-remove-class")&&(h.classToRemove=d.data("vp-remove-class")),d.data("vp-offset")&&(h. offset= d.data("vp-offset")),d.data("vp-repeat")&&(h.repeat=d.data("vp-repeat")),d.data("vp-scrollHorizontal ") &&(h.scrollHorizontal=d.data("vp-scrollHorizontal")),d.data("vp-invertBottomOffset")&&(h.scrollHorizontal=d.data("vp-invertBottomOffset")),a. extend( f,c),a.extend(f,h),!d.hasClass(f.classToAdd)||f.repeat)(String(f.offset).indexOf("%")>0&&(f. offset= parseInt(f.offset)/100*e.height);var i=f.scrollHorizontal?Math.round(d.offset().left)+f.offset:Math.round(d.offset(). top) +f.offset,j=f.scrollHorizontal?i+d.width():i+d.height();f.invertBottomOffset&&(j-=2*f.offset),g>i&&j>b?( d. removeClass(f.classToRemove),d.addClass(f.classToAdd),f.callbackFunction(d,"add")):d.hasClass(f.classToAdd)&&f.repeat&&(d.removeClass(f.classToAdd) ,f .callbackFunction(d,"remove")))))),a(dokument).bind("touchmove MSPointerMove pointermove",this.checkElements),a(window).bind("load scroll touchmove",this. checkElements) ,a(window).resize(function(b)(e=(height:a(window).height(),width:a(window).width()),d.checkElements())),detta .checkElements (),this))(jQuery);
Koden är komprimerad till en rad för snabb laddning av webbläsaren och är lång, så var försiktig när du kopierar och se till att du kopierar den helt.
Steg 3Efter att ha anslutit fördröjningsskriptet ansluter vi ett annat litet skript som ställer in inställningarna:
jQuery(document).ready(function() ( jQuery(".elementanm").addClass("hidden").viewportChecker(( classToAdd: "visible animated slideRight", offset: 100 )); ));
Den tredje raden innehåller klassen - elementanm - inom parentes. Den här klassen kommer att behöva tilldelas alla block och element som du vill tilldela animering. Den fjärde raden innehåller klassen - slideRight. Detta är en animationskurs. För att ställa in önskad animation och önskad klass, kommer den tidigare artikeln, som jag nämnde i början, att hjälpa dig. I vårt fall blir detta en utgång till höger.
Om du vill implementera flera olika typer av animering för sidelement, behöver du bara duplicera koden genom att ändra klassen på den tredje raden och animationsklassen. Till exempel:
jQuery(document).ready(function() ( jQuery(".blockanm").addClass("hidden").viewportChecker(( classToAdd: "visible animated slideLeft", offset: 100 )); ));
Steg 4Som jag nämnde i föregående steg måste du ställa in elementanm-klassen till elementen. HTML-uppmärkningen kommer att se ut ungefär så här:
Om du redan har tilldelat en klass till elementet, lägg helt enkelt till det avgränsat med ett mellanslag, till exempel:
Steg 5
Och det sista att göra är att ställa in CSS-stilar. Låt oss först skriva ner animationsstilarna. Vi tar dem från den tidigare artikeln, som jag redan nämnde i den här artikeln. Jag tar animationen - avsluta till höger.
/*Animation till höger*/ .slideRight( animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 4s; -webkit-animation-duration: 4s; animation-timing-function: ease-in -out ; -webkit-animation-timing-funktion: lätthet-in-ut: synlig !viktigt ) @keyframes slideRight ( 0% ( transform: translateX(-150%); ) 100% ( transform: translateX(0) %) ; ) ) @-webkit-keyframes slideRight ( 0% ( -webkit-transform: translateX(-150%); ) 100% ( -webkit-transform: translateX(0%); ) )
Som du kan se har animationsstilar en slideRight-klass, därför skrivs denna klass i skriptet i steg nr 3. Det finns också ett värde på 4s - det här är animationstiden och är lika med 4 sekunder. Låt oss nu lägga till stilar så att elementet från början är osynligt.
Hidden( opacitet:0; ) .visible( opacitet:1; )
Den svåra vägen i fem steg har övervunnits, så du kan se resultatet av ditt arbete. Du kan bli förvirrad, men om du gör allt noggrant kommer allt att lösa sig. Koden i artikeln är ett exempel, så allt fungerar. Prova att använda olika typer av animationer för att uppnå önskat resultat.
Det var allt, tack för din uppmärksamhet. 🙂
Vi animerade element med hjälp av biblioteket animate.css. CSS-animeringen fungerade direkt efter att sidan laddats och stoppats, vilket är en stor nackdel om sidan är lång.
Demo med animate.cssNär användaren bläddrar igenom en lång landningssida hinner helt enkelt inte se animeringen av alla avsnitt, eftersom animate.css-biblioteket redan har fungerat snabbt. Vad ska man göra? Hur man får animeringen att fortsätta att fungera när du rullar på sidan och reagerar på nya avsnitt med element.
Som populär visdom säger, om ett bibliotek inte räcker, lägg till ett till.
Ansluter plugin-programmet wow.jsWebbplats: https://github.com/matthieua/WOW
Vi måste se till att animeringen bara fungerar när vi rullar på sidan. Det är därför det finns en wow.js-plugin, som inte kräver att jQuery fungerar. Observera att filen animate.css också måste inkluderas och taggarnas klasser måste anges, detta nämndes i början av artikeln.
Kom ihåg! Animate.css och wow.js fungerar tillsammans!
Oavsett anslutningsmetod skriver vi en länk till JS-filen före den avslutande body-taggen, i script-taggen. Startar plugin-funktionen - new WOW().init()
Anslutning via CDNnya WOW().init();
Anslutning via arkivnedladdning
Ladda ner arkivet från github och överför wow.min.js-filen från den nedladdade arkivmappen dist till js-mappen med ditt projekt.
nya WOW().init();
För att animering på webbplatsen ska fungera måste du lägga till wow-klassen i taggarna för de element som du ska animera, istället för den animerade klassen. Att ersätta klasser gäller för de som bara använde ett animate.css-bibliotek på sajten, men bestämde sig för att lägga till plugin-programmet wow.js. Om du installerade båda filerna samtidigt anger du bara wow och namnet på animationen.
Det var så här:
Och det blev så här:
Nu startar animeringen när du rullar sidan, flyttar sig nedåt, allt eftersom nya element dyker upp på sidan.
Ytterligare alternativLåt oss nu titta på de ytterligare alternativen som vi kan använda i våra animationer. För att göra detta, låt oss titta på vad som finns i dokumentationen av fyra alternativ, jag använder faktiskt bara två. Resten är enligt min mening värdelösa och till och med skadliga.
Attributet data-wow-duration anger varaktigheten av animeringen i sekunder ibland är det nödvändigt att sakta ner animeringen för att göra den smidigare. Data-wow-offset-attributet anger på vilket avstånd från nedre kanten av webbläsaren animeringen ska starta.
Låt oss säga att du vill att animeringen ska vara i 1 sekund. Lägg till lämplig parameter i taggklassen.
Hur det fungerar
Demoexempel med animate.css+wow.jsVar är det bäst att använda kombinationen animate.css + wow.js i praktiken? När du aktivt marknadsför en produkt eller tjänst kommer denna presentation av information att locka fler kunder. Den viktigaste konsumenten av animationer när du rullar en sida är målsidan. Det finns en sak, men innan du hänger upp animation på den måste du först lära dig att skapa målsidor på ett professionellt sätt, åtminstone från den här videokursen. Lägg märke till hur snyggt själva säljsidan för videokursen är animerad.
Internet förändras varje dag. Vissa tekniker och metoder dyker upp, andra försvinner. Av denna anledning måste webbdesigners och frontend-utvecklare hålla sig uppdaterade med de senaste trenderna inom webbdesign. Parallax-rullning, fasta rubriker, platt design, ensidiga sajter och CSS-animering är några av de hetaste webbtrenderna för tillfället.
I den här handledningen kommer vi att titta på att skapa rullande animationer och effekter med CSS och jQuery.
De fyra effekter vi kommer att skapa kan ses på den här sidan.
Obs: Koden som används i denna handledning kan förbättras genom att cachelagra objekt och använda CSS-animering istället för jQuery " animera()", men för enkelhetens skull fokuserar vi på idén först.
Vad är animationer och effekter när du rullar en sida?Sådan animering och effekter är en ny, allt mer populär metod som ger front-end-utvecklare möjlighet att skapa multimedia och interaktiva webbprojekt. När användaren rullar ner på sidan kan utvecklare enkelt manipulera objekt med CSS och jQuery.
För att upptäcka om användaren rullar ner på sidan använder vi händelsen jQuery scroll().
När vi väl vet att användaren rullar på sidan kan vi få rullningslistens vertikala position med metoden scrollTop() och tillämpa de önskade effekterna:
if ($(this ) .scrollTop () > 0 ) (
// skapa effekter och animering
}
}
)
;
Om vi är intresserade av att skapa adaptiva effekter (optimerade för olika skärmupplösningar), måste vi definiera följande egenskaper:
- Fast egendom bredd- webbläsarfönstrets bredd.
- Fast egendom höjd- höjden på webbläsarfönstret.
Utan att definiera dessa egenskaper kommer vi att skapa effekter som är "statiska" och kommer inte att fungera korrekt om användaren ändrar storlek på fönstret horisontellt eller vertikalt.
Vi kan enkelt få värdena för dessa egenskaper med metoderna width() och height().
Följande kodavsnitt visar alla nödvändiga kontroller som vi behöver ta hänsyn till för att skapa sidrullningseffekter.
$(window).scroll(function() (
if ($(this).width()<
992
)
{
if ($(this).height() 1000) (
// skapa effekter
}
}
}
}
)
;
Nu när vi har täckt grunderna för att skapa dessa effekter, låt oss se dem i aktion med fyra olika exempel.
Exempel #1Denna effekt utlöses när den övre positionen på fönstrets rullningslist överstiger 60px. I det här fallet exekveras följande kodfragment:
if ($(window).scrollTop() > 60) (
$(".banner h2") .css ("display" , "ingen" );
$(".banner .info" ) .css ( "display" , "block" );
) annat (
$(".banner h2") .css ("display" , "block" );
$(".banner .info" ) .css ( "display" , "ingen" );
}
Koden ovan döljer det underordnade elementet h2 inuti ett element med en klass .baner och visar dess underordnade element .info, som ursprungligen var dolt.
Denna kod kan också skrivas på följande sätt:
if ($(window).scrollTop() > 60) (
$(".banner h2" ) .hide () ;
$(".banner .info" ) .show () ;
) annat (
$(".banner h2") .show () ;
$(".banner .info" ) .hide () ;
}
Följande effekt beror inte bara på den översta positionen på webbläsarens rullningslist, utan också på fönstrets bredd. I synnerhet gör vi följande antaganden:
Ovanstående antaganden implementeras i följande kodavsnitt:
if ($(fönster).width() 600 ) (
firstAnimation() ;
}
) else if ($(window).width() > 480 ) (
// animation som ska köras
firstAnimation() ;
}
) annat (
if ($(window).scrollTop() > 450 ) (
// animation som ska köras
firstAnimation() ;
}
}
Koden som innehåller animeringen som kommer att köras är följande:
var firstAnimation = function() (
$(".clients .clients-info" ) .each (
fungera()(
$(this ) .delay (500 ) .animate ((
opacitet: 1,
höjd: "180",
bredd: "250"
}
,
2000
)
;
}
)
;
}
;
Koden ovan animerar egenskaperna för opacitet, höjd och bredd för ett element .clients-info.
Exempel #3Den tredje effekten beror också på den övre positionen för fönstrets rullningslist och fönstrets bredd. I synnerhet gör vi följande antaganden:
Och här är koden:
if ($(fönster).width() 1750 ) (
secondAnimation() ;
}
) else if ($(window).width() > 549 && amp; $(window).width() 1150 ) (
secondAnimation() ;
}
) annat (
if ($(window).scrollTop() > 850 ) (
secondAnimation() ;
}
}
Koden som innehåller animationen är följande:
var secondAnimation = funktion () (
$(".method:eq(0)" ) .delay (1000 ) .animate ((
opacitet: 1
), "långsam" ,
fungera()(
}
)
;
$(".method:eq(1)" ) .delay (2000 ) .animate ((
opacitet: 1
), "långsam" ,
fungera()(
$(this) .find("h4" ) .css("bakgrundsfärg" , "#b5c3d5" ) ;
}
)
;
$(".method:eq(2)" ) .delay (3000 ) .animate ((
opacitet: 1
), "långsam" ,
fungera()(
$(this) .find("h4" ) .css("bakgrundsfärg" , "#b5c3d5" ) ;
}
)
;
$(".method:eq(3)" ) .delay (4000 ) .animate ((
opacitet: 1
), "långsam" ,
fungera()(
$(this) .find("h4" ) .css("bakgrundsfärg" , "#b5c3d5" ) ;
}
)
;
}
;
Koden ovan animerar egenskapen sekventiellt opacitet för element .metod och ändrar sedan bakgrundsfärgen för de underordnade elementen h4.
Exempel #4Denna effekt beror också på rullningslistens översta position och fönstrets bredd. Mer specifik:
Detta implementeras med följande kod:
if ($(fönster).width() 3500 ) (
thirdAnimation() ;
}
) else if ($(window).width() > 549 && amp; $(window).width() 2200 ) (
thirdAnimation() ;
}
) annat (
if ($(window).scrollTop () > 1600 ) (
thirdAnimation() ;
}
}
Animationskoden är som följer:
.delay (2000) .animate ((opacitet: 1,
höger: 0
), "långsam"
) ;
$(".blogs" ) .find ("knapp" ) .delay (2500 ) .animate ((
opacitet: 1,
botten: 0
), "långsam"
)
;
}
;
Koden ovan animerar sekventiellt opacitet, vänster, höger och bottenegenskaper för elementen i P, IMG, KNAPP.
SlutsatsJag hoppas att de fyra exemplen som visas här hjälper dig att förstå hur du kan skapa olika effekter och animationer när du rullar en sida.
Om du har några frågor rekommenderar vi att du använder vår
Hej kära vänner! Jag tillbringade lång tid med att förbereda materialet för dagens artikel och försökte presentera det så detaljerat som möjligt. Jag hoppas att du efter att ha läst detta inte längre kommer att ha några frågor om hur css går till.
Jag vill varna dig direkt: vi kommer inte att skriva manus eller liknande själva (bloggen är designad för nybörjare, och vi behöver att den ska vara enkel att ansluta och fungera felfritt).
För att fungera måste vi ladda ner flera verktyg.
Storlek: 0,48 MB
Ladda ner källa
Först och främst är detta filen animate.css - ett bibliotek där stilar för att animera element på sidan skrivs. För att visuellt utvärdera och välja typ av animation använder jag vanligtvis resurssidan http://daneden.github.io/animate.css/
Det vill säga, processen att lägga till animation till ett element börjar med det faktum att jag går till den här resursen och väljer en animationsstil från de föreslagna alternativen. (Tack och lov finns det mycket att välja på)
Därefter måste du ansluta stilmallen. För att göra detta, kopiera filen animate.css till mappen med stilmallarna för din webbplats. För mig heter den här mappen "css". Och i filen "index.html", mellan head-taggarna skriver vi:
Nu måste vi tilldela en klass till elementet som vi vill animera, med det lämpliga namnet som valdes i föregående steg. Det vill säga, bounceInRight-stilen som visas i skärmdumpen ovan kommer att vara en klass för elementet som vi kommer att animera. Och även den animerade klassen, så att animationen spelar. Jag hoppas att jag förklarade det tydligt? Om inte, använd exemplet nedan - det är extremt enkelt!
Till exempel:
Nu, när sidan har uppdaterats, kommer en animation att spelas upp. Du kan prova genom att trycka på f5-knappen.
Är inte det coolt? Men detta är inte slutet på animeringsprocessen, eftersom vi måste se till att animationen spelas upp när du rullar på sidan, och inte direkt efter att den har laddats!
För att göra detta måste vi använda det färdiga wow.js-skriptet. Den måste placeras i mappen js i huvudkatalogen på din webbplats. Jag postade bara den komprimerade versionen eftersom den väger mindre och laddar snabbare. Du kan bekanta dig med projektet i sin helhet.
Så för att animeringen av element ska ske när du rullar på sidan måste du lägga till följande 2 rader i filen index.html mellan head-taggarna:
nya WOW().init();
Och även i klassen bounceInRight, istället för animerad, måste du lägga till wow. Det ska se ut så här:
Som du kan se spelas den första animationen upp direkt efter att sidan har laddats, och den andra endast när du rullar, när användaren ser den. Medan den första inte kommer att märkas om den inte finns på den första skärmen.
Vi kan dra slutsatsen att processen att skapa en sådan animation kommer ner till 5 minuters bortkastad tid. Allt du behöver göra är:
- Lägg till 3 rader kod mellan öppnings- och stängningshuvudtaggen.
- Kopiera filen animate.css och wow.min.js till lämpliga mappar.
- Lägg till en wow-klass och en klass med namnet på animationen till elementet som vi vill animera
Och det är det, din webbplats kommer att se mycket mer livlig och imponerande ut. Och vid försäljning - dyrare.
Men det finns ytterligare verktyg för animeringskontroll. För varje element kan du ställa in flera speciella attribut för finjustering:
- data-wow-offset: Avstånd från den nedre kanten av webbläsaren för att starta animeringen;
- data-wow-duration: Ändra animeringens varaktighet;
- data-wow-delay: Fördröjning innan animeringen startar;
- data-wow-iteration: Hur många gånger ska animeringen upprepas?
Till exempel så här:
Det var allt för idag, vi ses på smartlanding. Lämna dina kommentarer och ställ frågor! Hejdå!
P.s.: Om du vill få animationen att spela upp när du rullar åt båda hållen rekommenderar jag att du läser
