Most sok oldalon találhat ilyen animációt, és alább mutatok egy példát is. Személy szerint én ezt az animációt használom céloldalak (céloldalak) létrehozásakor. Sok webmester aktívan használja webhelyén, és ez az animáció nagyon jól néz ki görgetés közben.

Ahhoz, hogy ezt megtegye a webhelyén, egy kicsit dolgoznia kell. Ha legalább egy kicsit megérti, akkor nincs semmi bonyolult. Bontsuk minden cselekedetünket lépésekre, nehogy összezavarodjunk.

1. lépés

Mint mindig, a munka érdekében jQuery könyvtár, a zárófej előtti fejlécben vagy a záró törzs előtti láblécben lévő könyvtárat kell csatlakoztatni.

2. lépés

//Kód itt

Vagy hozzon létre egy fájlt, például - scriptviewport.js, és foglalja bele.

Adja hozzá a következő kódot a címkéken vagy a fájlon belül:

Function(a)(a.fn.viewportChecker=function(b)(var c=(classToAdd:"látható",classToRemove:"láthatatlan",eltolás:100,ismétlés:!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";return 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(document).bind("touchmove MSPointerMove pointermove",this.checkElements),a(window).bind("load scroll touchmove",this.checkElements) ,a(ablak).resize(function(b)(e=(height:a(window).height(),width:a(window).width()),d.checkElements())),this.checkElements (),ez))(jQuery);

A kódot egyetlen sorba tömöríti a böngésző gyors betöltése érdekében, és hosszú, ezért legyen óvatos a másoláskor, és ügyeljen arra, hogy teljes egészében másolja át.

3. lépés

A késleltetési szkript csatlakoztatása után egy másik kis szkriptet csatlakoztatunk, amely megadja a beállításokat:

jQuery(document).ready(function() ( jQuery(.elementanm").addClass("hidden").viewportChecker(( classToAdd: "látható animált slideRight", offset: 100 )); ));

A harmadik sorban az elemanm osztály szerepel zárójelben. Ezt az osztályt hozzá kell rendelni minden blokkhoz és elemhez, amelyhez animációt szeretne rendelni. A negyedik sor az osztályt adja meg - slideRight. Ez az animációs osztály. A kívánt animáció és a kívánt osztály beállításához az utolsó cikk, amelyet a legelején említettem, segít. Esetünkben ez lesz a jobb oldali kijárat.

Ha több különböző típusú animációt szeretne megvalósítani az oldalelemekhez, akkor a kódot csak a harmadik sorban lévő osztály és az animációs osztály megváltoztatásával kell megkettőzni. Például:

jQuery(document).ready(function() ( jQuery(.blockanm").addClass("hidden").viewportChecker(( classToAdd: "látható animált diaLeft", eltolás: 100 )); ));

4. lépés

Ahogy az előző lépésben említettük, az elemeknek elemanm osztályt kell adni. BAN BEN HTML jelölésígy lesz:

Ha már hozzárendelt egy osztályt az elemhez, akkor csak adjon hozzá egy szóközt, például:

5. lépés

És az utolsó dolog a CSS stílusok beállítása. Először írjuk meg az animációs stílusokat. Ezeket az előző cikkből vettük át, amelyről ebben a cikkben már volt szó. Fogom az animációt - jobbra lépjen ki.

/*Animáció jobbra*/ .slideRight( animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 4s; -webkit-animation-duration: 4s; animation-timing-function: easy-in -out ; -webkit-animation-timing-function: easy-in-out; láthatóság: látható !fontos %) ; ) ) @-webkit-keyframes slideRight ( 0% ( -webkit-transzform: translateX(-150%); ) 100% ( -webkit-transform: translateX(0%); ) )

Amint láthatja, az animációs stílusoknak van slideRight osztálya, így ez az osztály a 3. lépésben található szkriptben van beírva. Van egy 4s érték is - ez az animáció ideje, és 4 másodpercnek felel meg. Most adjunk hozzá stílusokat, hogy az elem először láthatatlan legyen.

Hidden( opacitás:0; ) .visible( opacitás:1; )

Az öt lépésben megtett nehéz utat sikerült leküzdeni, így megtekintheti munkája eredményét. Összezavarodhatsz, de ha mindent óvatosan csinálsz, akkor minden sikerülni fog. A cikkben szereplő kód egy példából származik, tehát minden működik. Próbálj meg jelentkezni különböző típusok animáció a kívánt eredmény eléréséhez.

Ennyi, köszönöm a figyelmet. 🙂

Sziasztok kedves barátaim! A mai cikk anyagát régóta készítem, és igyekeztem minél részletesebben bemutatni. Remélem, miután elolvasta, többé nem lesz kérdése a css elkészítésével kapcsolatban.

Azonnal figyelmeztetlek: mi magunk nem fogunk szkripteket vagy ilyesmit írni (elvégre a blog kezdőknek készült, és szükségünk van rá, hogy könnyen csatlakoztatható legyen és hibátlanul működjön).

A munkához több eszközt is le kell töltenünk.

Méret: 0,48 Mb

Letöltés forrás

Először is, ez az animate.css fájl – egy könyvtár, amely stílusokat tartalmaz az oldalon található animációs elemekhez. Az animáció vizuális kiértékeléséhez és kiválasztásához általában a http://daneden.github.io/animate.css/ forrásoldalt használom.

Vagyis az animáció elemhez való hozzáadásának folyamata azzal a ténnyel kezdődik, hogy felkeresem ezt az erőforrást, és kiválasztom az animációs stílust a javasolt lehetőségek közül. (Szerencsére van miből válogatni)

Ezután csatolnia kell egy stíluslapot. Ehhez másolja az animate.css fájlt webhelye stíluslap mappájába. Megvan - ennek a mappának a neve "css". És az „index.html” fájlban a head címkék közé írjuk:

Most hozzá kell rendelnünk egy osztályt az animálni kívánt elemhez az előző lépésben kiválasztott megfelelő névvel. Vagyis a fenti képernyőképen látható bounceInRight stílus lesz az animált elem osztálya. Csakúgy, mint az animációs osztály, annak érdekében, hogy az animáció lejátszhassa. Remélem érthetően elmagyaráztam? Ha nem, akkor az alábbi példa rendkívül egyszerű!

Például:

Most, amikor az oldal frissül, az animáció lejátszásra kerül. Megpróbálhatja megnyomni az f5 gombot.

Nagyon klassz? De ezzel még nem ért véget az animációkészítés folyamata, mert ügyelnünk kell arra, hogy az oldal görgetése közben játsszuk le az animációt, és ne közvetlenül a betöltés után!

Ehhez a kész wow.js szkriptet kell használnunk. A webhely főkönyvtárának js mappájába kell helyezni. Csak tömörített verziót tettem közzé, mert kisebb a súlya és gyorsabban töltődik. Teljesen megismerkedhet a projekttel.

Tehát ahhoz, hogy az oldal görgetése során az elemek animációja megjelenjen, az index.html fájlban a head tagek közé a következő 2 sort kell hozzáadni:

new WOW().init();

Ezenkívül a bounceInRight osztályhoz animáció helyett hozzá kell adni a wow-t. A következőket kell beszerezned:

Mint látható, az első animáció közvetlenül az oldal betöltése után kerül lejátszásra, a második pedig csak görgetéskor, amikor a felhasználó látja. Míg az elsőt nem veszik észre, ha nem az első képernyőn található.
Megállapíthatjuk, hogy egy ilyen animáció létrehozásának folyamata az eltöltött idő 5 percére csökkenthető. Mindössze annyit kell tennie, hogy:

• Adjon hozzá 3 kódsort a nyitó és záró fejcímkék közé.
• Másolja az animate.css és wow.min.js fájlokat a megfelelő mappákba.
• Adjuk hozzá a wow osztályt és egy osztályt az animáció nevével ahhoz az elemhez, amellyel animálni szeretnénk

És ennyi, webhelye sokkal élénkebb és látványosabb lesz. És eladás esetén - drágább.

De vannak további animációvezérlő eszközök. Minden elemhez több speciális attribútumot is beállíthat a finomabb testreszabás érdekében:

• data-wow-offset: Távolság a böngésző alsó szélétől az animáció elindításához;
• data-wow-duration: Az animáció időtartamának módosítása;
• data-wow-delay: Késleltetés az animáció megkezdése előtt;
• data-wow-iteration: Hányszor kell megismételni az animációt?

Például így:

Mára ennyi, találkozunk a smartlandingen. Hagyja észrevételeit és tegyen fel kérdéseket! Viszlát!

P.s.: Ha szeretnéd, hogy az animáció mindkét irányban görgetéskor lejátsszon, akkor javaslom, hogy olvassa el

Sokan láttak már animációt az oldalakon az oldal görgetése közben. A gyűjtemény webhelyei azonban kissé eltérnek a Runetben általában található webhelyektől. Itt az animáció közvetlenül a tekercstől függ. Miközben ezeket a webhelyeket böngészi, próbálja meg lassan görgetni az oldalt lefelé, majd lassan felfelé.

Korábban írtam már az interaktív céloldalakról. Mindenképpen nézd meg ezt a gyűjteményt:

Néhány szó arról, hogy a gyűjtemény webhelyein görgető animáció miben tér el a Runeten leggyakrabban megtalálható animációtól:

Általában az oldal görgetésekor az elem teljes egészében megjelenik. Például egy ilyen animáció elkészíthető a Wow.js beépülő modul használatával. Vannak olyan analógok is, ahol az elem minden alkalommal megjelenik, amikor eltűnik a képernyőről, amelyet a felhasználó lát.

És itt vannak példák olyan webhelyekre, ahol az elemek animációja közvetlenül függ a képernyő görgetésétől. Vagyis az elem pontosan addig jelenik meg, ameddig a személy görgetett a képernyőn. Az értékek interpolálása folyamatban van.

Ennek köszönhetően a felhasználó maga irányítja az elemek megjelenésének folyamatát az oldalon. A görgető animációnak ebben az esetben más jelentése van.

Itt azonnal megtalálhatja ennek az animációnak a mínuszait és előnyeit is. Végtére is, nem mindig akarja, hogy egy személy irányítsa az elemek megjelenését, mert nem mindenki fogja kitalálni, hogy a megfelelő sebességgel forduljon. És ennek elkerülése érdekében jobb, ha nem készíti el az animációt a fő funkció görgetése során.

Kicsit később megpróbálom részletesebben elmagyarázni egy ilyen animáció létrehozásának folyamatát, de egyelőre nézze meg ezeket a webhelyeket, és görgessen mindegyiknek a végére.

1 Appliancetecltd.com

Az animáció ezen az oldalon az alap. Mert a blokkok csak akkor jelennek meg, ha görgetjük az oldalt. Ha egy kicsit feljebb görgetjük az oldalt, akkor az animáció az ellenkező irányba megy.

Ezen az oldalon a blokk animáció mellett blur animációt is alkalmaznak, ami még vonzóbbá teszi az oldalt. Az animáció működésének ismerete nélkül azt gondolhatja, hogy az oldal nagyon széles. Valójában azonban az animációs könyvtárak sok mindent lehetővé tesznek automatikusan.

Az alább látható webhelyekhez képest ez meglehetősen kicsi, de a blokkok animációja nagyon lenyűgözőnek tűnik.

2. Lempens-design.com

Itt rögtön sokkal több különböző animációt látunk az elemekről: a blokkok eltávolodnak egymástól, a gombok forognak, elhalad a vonat, stb. Szokatlan animáció jelenik meg akkor is, ha néhány gomb fölé viszi az egérmutatót.

De ezen az oldalon leginkább a blokk végén elhelyezett képek szembetűnőek. Bár teljesen fehérek, de a szép miatt háttérkép tökéletesen kiegészítik a blokkot.

3. Pedrolandaverde.com

Az tetszik ezen az oldalon, hogy itt van az animáció kiegészítő elem, nem a fő. Vagyis nem zavarja az oldal görgetését. Az animáció itt csak kiegészíti és "élénkíti" az oldalt, dinamikusabbá teszi.

Amint azt már észrevetted (ha már jártál ezen az oldalon), a forgó fogaskerekeken kívül még számos animált kép található itt. De nem nagyon van belőlük. És ez az animáció nagyon szép és érdekes. Azt tanácsolom, hogy fogadja el ezt a koncepciót.

4. InfoQuest

A példa mögött meghúzódó gondolat nagyon érdekes. Fokozatosan görgetve az oldalt, úgy tűnik, hogy egy képregényt lapozgat. Vagyis vannak párbeszédek, meg akció, és gyönyörű grafika. Olyan öröm nézni. És mindössze annyit kell tennie, hogy fokozatosan lefelé görgeti az oldalt.

Az ötlet klassz, kis léptékben ezt egy landing oldalon is meg lehet valósítani. A lényeg az, hogy valóban tematikus legyen a nyitóoldal számára.

5 Sustainability.bam.co.uk

Egy másik példa görgetős animációval rendelkező oldalra, ahol az animáció nem zavarja az oldal megtekintését, és nem függ attól. Vagyis itt kiegészíti az összképet.

Az animáció elkészítésének ez a módja sokkal egyszerűbb, és könnyebben kitalálható egy ilyen animáció.

6. Makeyourmoneymatter.org

Senkit nem fogsz meglepni az oldalon található infografikákkal. Még azok az infografikák is, amelyek a teljes oldalterületet elfoglalják. De ez az oldal remek példa az infografikus animációra az oldal görgetése közben. Egyetértek, ez az infografika nagyon jól néz ki!

Ha szereted ezeket az animációkat és infografikákat, akkor először létre kell hoznod egy infografikát. Ezt az alábbi szolgáltatások egyikével teheti meg:

7. Vidám Сhristmallax

Aranyos animáció, mely során egy kézzel rajzolt karácsonyfa válik belőle karácsonyfa. Itt tökéletesen nyomon követhetők az egyes blokkok, amelyek az oldal görgetése során animálva vannak. Gyönyörűen elkészült, és néhány ötletet "befogadhat".

8 Fluger.com

Kreatív ötlet két irányba repülõ géppel: ha lejjebb görgetsz az oldalon, a gép lefelé, néha jobbra repül, ha ellenkezõ irányba görgetsz, a gép megfordítja az irányt. Ez az apró árnyalat valóban még interaktívabbá teszi ezt az oldalt.

9. Kávé

Szeretné tudni, hogyan készül a kávé? Ezután görgesd a leszállást a legvégéig. Még angoltudás nélkül is megértheti, hogy mit kérdéses ezen az oldalon. Minden kép olyan színes és jól kivitelezett, hogy olyan, mintha videót néznénk. De csak ez egy "videó" egy előnnyel... Teljes mértékben te irányítod 😉 .

10. Kaipoche

Maga az oldal nem túl nagy, de a tetején lévő animáció remekül néz ki. Számos elem is készült CSS3 animációkkal. Azok számára, akik még nem tudják, hogyan jön létre, azt tanácsolom, hogy tanulmányozzák ezt a cikket:

11. Buntspenden

Nézés után egy nagy szám animációt tartalmazó webhelyeken, ez nem valószínű, hogy bármivel is meglepné. De van itt egy olyan elem, ami nem szerepel az előző oldalakon. Ez az elem egy menü. Vagyis a menüpontokra kattintva megnyílik a megfelelő blokk.

12. KIA

A KIA weboldalán található animáció is szépen elkészült, de az oldal betöltése nagyon sokáig tart. És ha az internet gyenge, akkor a letöltési idő elérheti a 2-3 percet is. Nem valószínű, hogy a felhasználók ennyit várnak, valószínűleg bezárják az oldalt ezzel az oldallal.

13. Veszélyek

Az előző példához képest ez az oldal sokkal gyorsabban töltődik be, de itt nem olyan nagy az animáció.

14. Minden utolsó csepp

Egy interaktív weboldal animált elemekkel, amely megmutatja a napi felhasznált víz mennyiségét. Még ha nem is tudja, mi van leírva angolul, a képekből intuitív módon egyértelmű, hogy mi az.

15. Arnold Clark

Ez azon oldalak közé tartozik, ahol annyi görgetős animáció található, hogy még az ujjak is elfáradnak az oldal görgetése közben. Ezenkívül az animáció néha nagyon lassan jelenik meg. Ezért az elem teljes animációjának megtekintéséhez az egér görgőjét nagyon kell forgatni.

Az internet minden nap változik. Egyes technológiák és módszerek megjelennek, mások eltűnnek. Emiatt a webdesignereknek és a front-end fejlesztőknek naprakésznek kell lenniük a webdesign legújabb trendjeivel. A parallaxis görgetés, a rögzített fejlécek, a lapos kialakítás, az egyoldalas webhelyek és a CSS-animációk jelenleg a legnépszerűbb internetes trendek közé tartoznak.

Ebben az oktatóanyagban az oldalgörgetési animációk és effektusok létrehozását vizsgáljuk meg CSS és jQuery használatával.

Az általunk létrehozandó négy effektus megtekinthető ezen az oldalon.

Megjegyzés: Az ebben az oktatóanyagban használt kód javítható objektumok gyorsítótárazásával és a jQuery helyett CSS-animációk használatával. élő()", de az egyszerűség kedvéért először az ötletre koncentrálunk.

Mik azok az oldalgörgetési animációk és effektusok?

Ezek az animációk és effektusok egy új és növekvő technikát jelentenek, amely lehetővé teszi a front-end fejlesztőknek multimédiás és interaktív webprojektek létrehozását. Ahogy a felhasználó lefelé görgeti az oldalt, a fejlesztők könnyedén manipulálhatják az objektumokat CSS és jQuery segítségével.

A jQuery scroll() eseményt használjuk annak észlelésére, hogy a felhasználó lefelé görget-e az oldalon.

Miután tudjuk, hogy a felhasználó görgeti az oldalt, a scrollTop() metódussal meghatározhatjuk a görgetősáv függőleges helyzetét, és alkalmazhatjuk a kívánt effektusokat:

if ($(this ).scrollTop () > 0 ) (
// effektusok és animációk létrehozása
}
} ) ;

Alkalmazkodóak?

Ha szeretnénk reszponzív effektusokat létrehozni (különböző képernyőfelbontásokra optimalizálva), akkor a következő tulajdonságokat kell meghatároznunk:

• Ingatlan szélesség- böngészőablak szélessége.
• Ingatlan magasság- a böngészőablak magassága.

E tulajdonságok meghatározása nélkül olyan effektusokat hozunk létre, amelyek "statikusak", és nem működnek megfelelően, ha a felhasználó vízszintesen vagy függőlegesen átméretezi az ablakot.

Ezeknek a tulajdonságoknak az értékeit könnyen megkaphatjuk a width() és height() metódusokkal.

A következő kódrészlet bemutatja az összes szükséges ellenőrzést, amelyet figyelembe kell vennünk az oldalgörgetési effektusok létrehozásához.

$(ablak).scroll(function()(
if ($(this ).width()< 992 ) {
if ($(this ).height () 1000 ) (
// effektusok létrehozása
}
}
}
} ) ;

Most, hogy megismertük az effektusok létrehozásának alapjait, nézzük meg működésüket négy különböző példán keresztül.

1. példa

Ez a hatás akkor aktiválódik, ha az ablak görgetősávjának felső pozíciója meghaladja a 60 képpontot. Ebben az esetben a következő kódrészlet kerül végrehajtásra:

if ($(ablak).scrollTop() > 60 ) (
$(.banner h2" ) .css ("megjelenítés" , "nincs" ) ;
$(".banner .info" ) .css ("display" , "block" ) ;
) más (
$(.banner h2" ) .css ("display" , "block" ) ;
$(".banner .info" ) .css ("megjelenítés" , "nincs" ) ;
}

A fenti kód elrejti a gyermek elemet h2 egy elemen belül egy osztállyal .transzparensés megmutatja annak gyermek elemét .info, amely eredetileg el volt rejtve.

Ez a kód így is írható:

if ($(ablak).scrollTop() > 60 ) (
$(".banner h2" ) .hide() ;
$(".banner.info" ) .show () ;
) más (
$(".banner h2" ) .show() ;
$(".banner.info" ) .hide() ;
}

2. példa

A következő hatás nemcsak a böngésző görgetősávjának felső pozíciójától, hanem az ablak szélességétől is függ. Különösen a következő feltételezéseket tesszük:

Az ablak szélessége legfeljebb 549 képpont. Ebben az esetben az animáció csak akkor indul el, ha az ablak görgetősávjának felső pozíciója meghaladja a 600 képpontot.

Az ablak szélessége 550 és 991 képpont között van. Ebben az esetben az animáció csak akkor indul el, ha az ablak görgetősávjának felső pozíciója meghaladja a 480 pixelt.

A böngésző szélessége nagyobb, mint 991 képpont. Ebben az esetben az animáció csak akkor indul el, ha az ablak görgetősávjának felső pozíciója meghaladja a 450 képpontot.

A fenti feltételezések a következő kódrészletben valósulnak meg:

if ($(ablak).width() 600 ) (

firstAnimation() ;
}
) else if ($(ablak).width() > 480 ) (
// előadandó animáció
firstAnimation() ;
}
) más (
if ($(window).scrollTop() > 450 ) (
// előadandó animáció
firstAnimation() ;
}
}

A végrehajtandó animációt tartalmazó kód a következő:

var firstAnimation = function()(
$(".clients.clients-info" ) .each (
funkció()(
$(this ) .delay (500 ) .animate ((
átlátszatlanság: 1
magasság: "180",
szélesség: "250"
} , 2000 ) ;
}
) ;
} ;

A fenti kód animálja az elemek átlátszatlanságát, magasságát és szélességét .clients-info.

3. példa

A harmadik hatás az ablak görgetősávjának felső helyzetétől és az ablak szélességétől is függ. Különösen a következő feltételezéseket tesszük:

Az ablak szélessége legfeljebb 549 képpont. Ebben az esetben az animáció csak akkor indul el, ha az ablak görgetősávjának felső pozíciója meghaladja az 1750 képpontot.

Az ablak szélessége 550 és 991 képpont között van. Ebben az esetben az animáció csak akkor indul el, ha az ablak görgetősávjának felső pozíciója meghaladja az 1150 képpontot.

Az ablak szélessége nagyobb, mint 991 képpont. Ebben az esetben az animáció csak akkor indul el, ha az ablak görgetősávjának felső pozíciója meghaladja a 850 képpontot.

És itt a kód:

if ($(ablak).width() 1750 ) (
secondAnimation() ;
}
) else if ($(ablak) .width () > 549 & amp;& amp; $(ablak) .width () 1150 ) (
secondAnimation() ;
}
) más (
if ($(window).scrollTop() > 850 ) (
secondAnimation() ;
}
}

Az animációt tartalmazó kód a következő:

var secondAnimation = function()(
$(.method:eq(0)" ) .delay (1000 ) .animate ((
átlátszatlanság: 1
) , "lassú" ,
funkció()(

}
) ;

$(.method:eq(1)" ) .delay (2000 ) .animate ((
átlátszatlanság: 1
) , "lassú" ,
funkció()(
$(this ) .find ("h4" ) .css ("háttérszín" , "#b5c3d5" ) ;
}
) ;

$(.method:eq(2)" ) .delay (3000 ) .animate ((
átlátszatlanság: 1
) , "lassú" ,
funkció()(
$(this ) .find ("h4" ) .css ("háttérszín" , "#b5c3d5" ) ;
}
) ;

$(.method:eq(3)" ) .delay (4000 ) .animate ((
átlátszatlanság: 1
) , "lassú" ,
funkció()(
$(this ) .find ("h4" ) .css ("háttérszín" , "#b5c3d5" ) ;
}
) ;
} ;

A fenti kód szekvenciálisan animálja a tulajdonságot átlátszatlanság elemekhez .módszer majd módosítsa a háttérszínt gyermek elemek h4.

4. példa

Ez a hatás a görgetősáv felső helyzetétől és az ablak szélességétől is függ. Konkrétabban:

Ha az ablak szélessége kisebb vagy egyenlő, mint 549 képpont, az animáció csak akkor aktiválódik, ha az ablak görgetősávjának felső pozíciója nagyobb, mint 3500 képpont.

Ha az ablak szélessége 550 és 991 képpont között van, az animáció csak akkor aktiválódik, ha az ablak görgetősávjának felső pozíciója nagyobb, mint 2200 képpont.

Ha az ablak szélessége nagyobb, mint 991 képpont, az animáció csak akkor aktiválódik, ha az ablak görgetősávjának felső pozíciója nagyobb, mint 1600 képpont.

Ezt a következő kód valósítja meg:

if ($(ablak).width() 3500 ) (
thirdAnimation() ;
}
) else if ($(ablak) .width () > 549 & amp;& amp; $(ablak) .width () 2200 ) (
thirdAnimation() ;
}
) más (
if ($(window).scrollTop() > 1600 ) (
thirdAnimation() ;
}
}

Az animációs kód a következő:

.delay(2000) .animate((
átlátszatlanság: 1
jobbra: 0
), "lassú"
) ;

$(.blogs" ) .find ("button" ) .delay (2500) .animate ((
átlátszatlanság: 1
alsó: 0
), "lassú"
) ;
} ;

A fenti kód egymás után animálja az átlátszatlanság , bal , jobb és alsó tulajdonságokat a benne lévő elemekhez P,IMG,GOMB.

Következtetés

Remélem, hogy az itt bemutatott négy példa segít megérteni, hogyan hozhat létre különféle effektusokat és animációkat az oldal görgetése során.

Ha kérdése van, kérjük, használja a mi

Ezen az oldalon egy kicsit lejjebb láthatja ennek a kombinációnak a használatának legegyszerűbb példáját. A legérdekesebb az, hogy ez a szépség (görgető animáció) jQuery NÉLKÜL működik. Kiderült, hogy minden ajtó nyitva áll ennek a forgatókönyvnek... És példaként görgess lejjebb... Bátran...

Bátran kijelenthetem, hogy a görgetős animáció mára NAGYON népszerűvé válik, és ezt a hatást gyakran láthatja a sikeres internetes vállalkozók értékesítési oldalain. Ezek a "trükkök" NAGYON életre keltik az oldalakat, és segítik a látogató figyelmét azokra a fontos pontokra összpontosítani, amelyekre először szeretnének felfigyelni.

Scroll animáció: Kombináció
"WOW.js" és "Animate.css"
a wordpressen...

* Az animáció megismétléséhez töltse be újra az oldalt.

Hogyan kell beállítani?

1. LÉPÉS
A kezdéshez töltse le ezt a két fájlt („WOW.js” és „Animate.css”).

FRISSÍTVE (2019. július 25.):
wow.min.js v1.2.1 | anim.min.css v3.7.2
2. LÉPÉS
A "wow-animation" mappát az oldal gyökérmappájába helyezzük. Természetesen bárhová elhelyezheti, ha megadja a fájlok helyes elérési útját. Ezt a mappát továbbra is ajánlatos a gyökérmappába helyezni: index.html. Ha WordPress, akkor helyezze a mappát oda, ahová akarja. (a lényeg az, hogy meg kell adni a megfelelő elérési utat).

3. LÉPÉS
Tedd ebbe a sorba:

* Természetesen adja meg a fájl helyes elérési útját. Ha WordPress-re telepítesz, akkor javaslom a teljes elérési út megadását, pl. kezdve a httpS://YourDomain stb. Annak ellenőrzéséhez, hogy megfelelően csatlakoztatta-e a fájlt - másolja ki az URL-t, és írja be címsorés nyomja meg az "Enter" gombot. Ha megnyílik egy érthetetlen kódú fájl, akkor minden rendben van 🙂

4. LÉPÉS
Az oldal legvégére helyezzük a következő sorok elé:

new WOW().init();

* Adja meg a fájl helyes elérési útját is, és ellenőrizze a böngészőben.

Bizonyos információk

6. LÉPÉS
További beállítások. Funkciók hozzáadása:
data-wow-duration : Az animáció időtartamának módosítása;
data-wow-delay : Késleltetés az animáció megkezdése előtt;
data-wow-offset : Távolság az animáció kezdete előtt (a böngészőablak aljához viszonyítva);
data-wow-iteration : Ismételje meg az "annyiszor" animációt.

bizonyos információk bizonyos információk