Na stránke. Trendom, ktorý je v poslednej dobe populárny, je animácia prvkov, ktoré sa menia pri posúvaní stránky. V tomto článku vytvoríme hlavičku úplne hore na stránke a v momente rolovania sa bude veľkosť a farba hlavičky postupne meniť.
Takto to bude vyzerať na konci:
HTML značkyHTML pre náš príklad je najjednoduchšie, všetko, čo potrebujeme, je hlavička h1 vo vnútri prvku hlavičky. A aby bol príklad jasnejší, pridajte do akcie obrázok s cenou =)
jQueryNajprv pridajte niekoľko predvolených štýlov, ktoré zlepšujú vzhľad hlavičky:
Chcel by som okamžite poznamenať, že prechod CSS je nastavený v predvolenom štýle. Z konštrukcie prechodovej vlastnosti je zrejmé, že meníme všetky vlastnosti prvku (transition-property - all), za 0,4 sekundy (transition-duration - 0,4s), s ľahkosťou zrýchlenia (transition-timing-function - easy ).
Teraz popíšeme lepiacu triedu, ktorá sa aplikuje na hlavičku počas rolovania. S nadpisom chceme urobiť niekoľko vecí: po prvé, chceme, aby bol nadpis menší, a tiež chceme zmeniť farbu pozadia a zarovnať text doľava:
1 | header.sticky( |
Pripravený! Na základe tohto príkladu môžete pri rolovaní robiť absolútne akúkoľvek manipuláciu s prvkami HTML stránky, všetko, čo potrebujete, je jQuery, CSS a vaše nápady!
Ahojte všetci. Niektorí z vás už čítali článok o... Mnohým sa tento materiál páčil, no faktom je, že animácia sa prehrávala len pri rolovaní nadol. Mnohí, ako ja, chceli, aby sa táto animácia prehrávala pri posúvaní nadol aj nahor. Napríklad pri posúvaní nadol sa nejaký prvok plynulo objavil a pri ďalšom posúvaní aj plynulo zmizol. A v opačnom smere sa všetko stalo rovnakým spôsobom.
Už som povedal, že javascript dobre nepoznám (v procese učenia) a sám som túto funkciu nedokázal implementovať. Ale našťastie som našiel hotové riešenie na inej stránke. Vynašiel ho Artem Anashev, jeden z autorov blogu loftblog.ru. Tam je materiál na túto tému prezentovaný výlučne vo formáte videa, ale pokúsim sa všetko opísať v texte a uverejniť svoj zdroj. Ak je pre vás pohodlnejšie sledovať video materiál, na konci článku si môžete prečítať originál :)
Rovnako ako minule sťahujeme a pripájame knižnicu animate.css, kde si môžete vybrať aj typ animácie vo vhodnom vizuálnom prevedení:
V tomto článku použijem neoptimalizovanú verziu knižnice annimate.css, ale odporúčam vám použiť animate.min.css stiahnutý z githubu. Keďže táto verzia váži menej, a preto sa načíta rýchlejšie.
Umiestnil som ho do priečinka „css“, takže to nakoniec bola nasledujúca cesta:
Teraz musíme prepojiť jquery a doplnok waypoints, ktorý nám pomôže posúvať animáciu oboma smermi:
Trasové body si môžete stiahnuť z tohto odkazu alebo ich prevziať zo zdroja (rovnako ako ďalšie súbory potrebné na implementáciu tohto efektu).
Rovnako ako vo videu nižšie navrhujem vytvoriť takú štruktúru, aby sa tri prvky umiestnené jeden po druhom (v rade) plynulo objavili s miernym oneskorením a potom tiež plynulo zmizli. Vytvoril som malé rozloženie s veľkými ikonami, ktoré budú animované:
Pozor! Účinok musíte otestovať na lokálnom alebo externom serveri. V opačnom prípade sa animácia neprehrá.
Animácia pri rolovaní v oboch smeroch - html značka
Vytvoril som triedu „box“, do ktorej budem ukladať svoje obrázky.
Nie je tu nič zvláštne, len nastavím šírku a výšku plochy, do ktorej budem ikony ukladať. Urobím ľavú zarážku 50px a zarovnám ju doľava. Tento blok je čisto individuálny a môžete ho ignorovať. Tieto parametre mi len najviac vyhovovali. Pokračuj.
Aby sa animácia prehrala, musíte pridať animovanú triedu. Jeho vlastnosti sú špecifikované v knižnici animate.css, ktorú sme zahrnuli skôr.
Trieda boxHidded je potrebná na to, aby boli naše ikony v počiatočnom okamihu úplne transparentné. Vyplýva to z logiky nášho scenára. Ikony by sa totiž mali pri rolovaní plynulo zobrazovať a potom aj plynulo miznúť.
BoxHidded( viditeľnosť: skryté; /* Urobiť ikony úplne priehľadné */ ) .fadeInUp, .fadeOutDown( viditeľnosť: viditeľné; /* Urobiť ikony úplne nepriehľadné */ )
Triedy delay-05s a delay-1s sú zodpovedné za oneskorenie prehrávania animácie o 0,5 sekundy a 1 sekundu. Pozrime sa na vlastnosti priradené týmto triedam:
Delay-05s( -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; ) .delay-1s( -webkit- oneskorenie-animácie: 1s; -oneskorenie-moz-animácie: 1s; -o-oneskorenie-animácie: 1s; oneskorenie-animácie: 1s; )
Tým je práca so štýlom ukončená, stačí, ak pred uzatváraciu značku body umiestnime nasledujúci skript
$(".box") .waypoint(function(dir) ( if (dir === "down") $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); inak $(this) . removeClass("fadeInUp") .addClass("fadeOutDown"); ), ( offset: "80%" )) .waypoint(function(dir) ( if (dir === "down") $(this) .removeClass( "fadeInUp") .addClass("fadeOutDown"); inak $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); ), ( offset: -50 ))
Venujte pozornosť riadkom:
RemoveClass("fadeOutDown") .addClass("fadeInUp");
V nich pridávame a odstraňujeme triedy zodpovedné za štýly animácií, ktoré sa budú prehrávať pri rolovaní. V tomto prípade fadeInUp a fadeOutDown. Môžete si vybrať akékoľvek typy animácií prezentované na oficiálnej stránke knižnice animate.css.
Ak chcete zmeniť okamih, v ktorom sa má animácia začať prehrávať, zmeňte hodnotu posunu. V tomto prípade je nastavená na 80 %. Ak tomu rozumiem, toto je vzdialenosť od horného bodu obrazovky k bloku, ktorý animujeme.
Niekoľkokrát som dostal otázku, či je možné nastaviť vzdialenosť od začiatku animácie v percentách, keďže každý má iné monitory. V predchádzajúcej verzii tohto efektu to nebolo možné urobiť v percentách. To spôsobilo určité problémy.
V tomto prípade je tento problém vyriešený. Prvý posun je zodpovedný za spustenie animácie. A druhý je za miznutie blokov. To znamená, keď sa 50 pixelov animovaného obsahu stane neviditeľným. Skús to! Príklad vám pomôže pochopiť všetko.
dimadv7
V súčasnosti nájdete takúto animáciu na mnohých stránkach a nižšie uvediem aj príklad. Osobne používam tento druh animácií pri vytváraní vstupných stránok. Mnoho webmasterov ju aktívne používa na svojich webových stránkach a táto animácia vyzerá celkom krásne pri rolovaní.
Ak to chcete urobiť na svojej webovej stránke, musíte trochu popracovať. Ak tomu aspoň trochu rozumiete, tak nie je nič zložité. Rozložme si všetky naše činy do krokov, aby sme sa nemýlili.
Krok 1Ako vždy, aby knižnica jQuery fungovala, musíte knižnicu zahrnúť do hlavičky pred záverečnou hlavičkou alebo do päty pred záverečným telom.
Krok 2
//Kód tu
Alebo vytvorte súbor, napríklad - scriptviewport.js a pripojte ho.
Do značiek alebo súboru pridajte nasledujúci kód:
Function(a)(a.fn.viewportChecker=function(b)(var c=(classToAdd:"visible",classToRemove:"neviditeľné",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";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().vľavo)+f.offset:Math.round(d.offset(). hore) +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,"odstrániť"))))),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())),this .checkElements (),this))(jQuery);
Kód je skomprimovaný do jedného riadku pre rýchle načítanie prehliadačom a je dlhý, preto buďte opatrní pri kopírovaní a uistite sa, že ste ho skopírovali celý.
Krok 3Po pripojení oneskoreného skriptu pripojíme ďalší malý skript, ktorý nastaví nastavenia:
jQuery(document).ready(function() ( jQuery(".elementanm").addClass("hidden").viewportChecker(( classToAdd: "viditeľná animovaná snímkaVpravo", posun: 100 )); ));
Tretí riadok obsahuje triedu - elementanm - v zátvorkách. Táto trieda bude musieť byť priradená všetkým blokom a prvkom, ktorým chcete priradiť animáciu. Štvrtý riadok obsahuje triedu - slideRight. Toto je kurz animácie. Na nastavenie želanej animácie a želanej triedy vám pomôže predchádzajúci článok, ktorý som spomenul hneď na začiatku. V našom prípade to bude východ vpravo.
Ak chcete implementovať niekoľko rôznych typov animácií pre prvky stránky, potom musíte kód duplikovať iba zmenou triedy v treťom riadku a triedy animácie. Napríklad:
jQuery(document).ready(function() ( jQuery(".blockanm").addClass("hidden").viewportChecker(( classToAdd: "viditeľná animovaná snímkaLeft", offset: 100 )); ));
Krok 4Ako som spomenul v predchádzajúcom kroku, je potrebné nastaviť triedu elementanm na elementy. Značenie HTML bude vyzerať asi takto:
Ak ste už prvku priradili triedu, jednoducho ju pridajte oddelenú medzerou, napríklad:
Krok 5
A posledná vec, ktorú musíte urobiť, je nastaviť štýly CSS. Najprv si napíšme štýly animácií. Preberáme ich z predchádzajúceho článku, ktorý som už spomínal v tomto článku. Beriem animáciu - výstup doprava.
/*Animácia napravo*/ .slideRight( názov-animácie: slideRight; -názov-webovej-animácie: slideRight; animation-duration: 4s; -webkit-animation-duration: 4s; funkcia-časovania animácie: easy-in -out ; -funkcia-webkit-animation-timing: easy-in-out; viditeľnosť: viditeľné !dôležité; ) @keyframes slideRight ( 0% ( transform: translateX(-150%); ) 100% ( transform: translateX(0) %) ; ) ) @-webkit-keyframes slideRight ( 0 % ( -webkit-transform: translateX(-150%); ) 100 % ( -webkit-transform: translateX(0%); ) )
Ako vidíte, štýly animácií majú triedu slideRight, preto je táto trieda napísaná v skripte v kroku č. 3. Je tu aj hodnota 4s – to je čas animácie a rovná sa 4 sekundám. Teraz pridajme štýly, aby bol prvok spočiatku neviditeľný.
Hidden( opacity:0; ) .visible( opacity:1; )
Náročná cesta v piatich krokoch bola prekonaná, takže sa môžete pozrieť na výsledok svojej práce. Môžete sa zmiasť, ale ak budete robiť všetko opatrne, všetko bude fungovať. Kód v článku je príklad, takže všetko funguje. Skúste použiť rôzne typy animácií, aby ste dosiahli požadovaný výsledok.
To je všetko, ďakujem za pozornosť. 🙂
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // zobraziť veľkosť mojej miniatúry?>
pozdravujem. Dnes sa naučíme animovať prvky na stránke a zobraziť animáciu pri posúvaní stránky. V tomto návode budeme pracovať s knižnicami animate.css a wow.js. Táto lekcia je zaznamenaná aj vo videu a blog má teraz kanál na YouTube. Preto budú nové lekcie sprevádzané video materiálmi. Choď!
Na začiatok som pripravil html stránku s jednoduchými prvkami (nadpisy a obrázky), ktoré budeme animovať. Tu je HTML kód stránky:
Hlava jedna 
Nadpis dva 
Nadpis tri 
Okruh štyri 
Nadpis päť 
A jednoduché označenie CSS:
Sekcia ( šírka: 80 %; zarovnanie textu: stred; poloha: relatívna; okraj: 0 auto; vrchná časť: 50 pixlov; dolná časť: 50 pixlov; ) časť h1 ( veľkosť písma: 32 pixlov; hrúbka písma: tučné; margin: 20px 0 50px; text-transform: veľké písmená; ) section .col (šírka: 30%; margin: 0 1% 50px; display: inline-block; )
Ako vidíte, všetko je naozaj veľmi jednoduché.
Spájame animate.css. Animačné prvkyStiahnite si knižnicu animate.css. Súbor animate.min.css som vložil do priečinka /libs vedľa html stránky. Animate.min.css spájame ako bežný css súbor medzi témami.
Teraz k prvkom, ktoré potrebujú použiť animáciu, musíte pridať potrebné triedy štýlov CSS, musíte pridať animovanú triedu a triedu s názvom animácie, napríklad swing. Takto skončíte pre nadpis h1:
Hlava jedna
Teraz táto hlavička prehrá zadanú animáciu pri načítaní stránky. Rovnakým spôsobom nastavíme animáciu pre ďalšie prvky:
Hlava jedna
Pridali sme animované triedy pre hlavičku a pre každý stĺpec teraz prehrajú animáciu pri načítaní stránky. Podobne môžete animáciu pridať do iných prvkov stránky. Je tu však malý problém, pri načítaní stránky sa prehrajú všetky animácie. A pri rolovaní na prvky, ktoré sú mimo prvej obrazovky, už animáciu neuvidíme, keďže sa to stalo už pri načítaní stránky. Ak chcete animáciu zobraziť iba vtedy, keď je prvok zobrazený, musíte zahrnúť knižnicu wow.js
Pripojenie knižnice wow.js pre animáciu pri posúvaní stránkyKnižnica wow.js bola špeciálne vytvorená tak, aby fungovala v tandeme s knižnicou animate.css. Funguje to tak, že animácia prvkov nefunguje pri načítaní stránky, ale pri zobrazení týchto prvkov, teda pri rolovaní stránky.
Na pripojenie knižnice som umiestnil súbor wow.min.js do pgre/libs vedľa stránky a pripojil som ho ako bežný skript js. Po pripojení musí byť táto knižnica inicializovaná. Po pripojení jquery by ste mali pripojiť wow.js. Toto je nevyhnutné.
nové WOW().init();
Teraz, keď je knižnica pripojená, prejdime k úprave kódu. Ak chcete použiť prácu wow.js na prvky, musíte pridať triedu wow. Mimochodom, môžete ním nahradiť animovanú triedu. Dopadá to takto.
Hlava jedna
Hlava jedna
Po zmene animácie na wow na všetkých prvkoch s animáciou uvidíme, že teraz sa animácia prvkov spustí pri rolovaní stránky, a nie pri načítaní.
Knižnica wow.js obsahuje aj ďalšie nastavenia. Môžete si ich pozrieť v dokumentácii na webovej stránke knižnice. Môžete napríklad pridať oneskorenie animácie. Nastavuje sa html5 parametrom data-wow-delay="1s". Namiesto 1s môžete zadať vlastnú hodnotu oneskorenia. Nastavil som oneskorenie pre prvky prvej sekcie tak, aby animácia každého prvku začala po predchádzajúcej, a stalo sa toto:
Hlava jedna
To je všetko. Nižšie si môžete pozrieť video z tejto lekcie, nájsť odkazy na použité knižnice, pozrieť si hotový výsledok toho, čo sa stalo a stiahnuť si súbory - archív s hotovým rozložením a šablónu na dokončenie tejto lekcie.
Referencie na lekciu
Knižnica Animate.css:
Web sa mení každý deň. Nové techniky sa objavujú a miznú. Z tohto dôvodu by webdizajnéri a front-end vývojári mali poznať najnovšie trendy vo webdizajne. Paralaxné posúvanie, pevné hlavičky, jednostránkové weby a animácie sú niektoré z horúcich trendov vo webdizajne.
V tomto článku sa pozrieme na animácie a efekty posúvania stránky pomocou CSS a jQuery.
Než začneme implementovať efekty, prejdeme si malý úvod.
Kód použitý v tomto príklade by sa dal vylepšiť použitím ukladania objektov do vyrovnávacej pamäte a použitím animácií CSS namiesto metódy animate() jQuery, ale aby veci zostali jednoduché, deklarácie objektov sa opakujú a všetko je napísané v jQuery, aby sa zachovalo zameranie na koncept.
Čo sú to rolovacie efekty a animácie?Posúvacie animácie sú novou, rastúcou technikou, ktorá umožňuje vývojárom front-endu vytvárať bohaté a interaktívne prostredia. Spúšťajú sa, keď používateľ posúva stránku.
Na zistenie, či používateľ posúva stránku, používame udalosť jQuery scroll().
Keď vieme, že používateľ posúva stránku, môžeme pomocou metódy scrollTop() jQuery určiť vertikálnu polohu posúvača a použiť požadovaný efekt:
$(okno).scroll(function() ( if ($(this).scrollTop() > 0) ( // aplikovanie efektov a animácií ) ));
Sú adaptívne?Ak potrebujeme implementovať efekty responzívneho rolovania, musíme definovať nasledujúce vlastnosti:
Bez týchto vlastností budú naše rolovacie efekty „statické“ a nebudú správne fungovať, keď používateľ zmení veľkosť okna vertikálne alebo horizontálne.
Tieto hodnoty možno ľahko získať pomocou metód width() a height() jQuery.
Nasledujúci útržok kódu demonštruje potrebné kontroly na implementáciu efektu posúvania.
$(window).scroll(function() ( if ($(this).width()< 992) { if ($(this).height() 1000) { // apply effects } } } });
Teraz, keď sme dostali základy rolovacích efektov, pozrime sa na ne v akcii prostredníctvom štyroch príkladov.
Aby sme veci zjednodušili, zameriavame sa iba na testovanie toho, ako sa budú efekty meniť v závislosti od rôznych hodnôt vlastností šírky a výšky okna.
Príklad č.1Tento efekt sa spustí, keď horná pozícia posúvača presiahne 60 pixelov. V tomto prípade útržok kódu, ktorý sa spustí, vyzerá takto:
If ($(window).scrollTop() > 60) ( $(".banner h2").css("display", "none"); $(.banner .info").css("display", "blok"); ) else ( $(".banner h2").css("zobrazit", "blok"); $(".banner .info").css("zobrazit", "none"); )
Vyššie uvedený kód skryje prvok h2 z prvku s triedou .banner a zobrazí podradený prvok .info, ktorý je spočiatku skrytý.
Tento kód môže byť napísaný aj takto:
If ($(window).scrollTop() > 60) ( $(".banner h2").hide(); $(".banner .info").show(); ) else ( $(.banner h2 ").show(); $(".banner .info").hide(); )
Príklad č.2Nasledujúci príklad závisí nielen od polohy posúvača, ale aj od šírky okna. Ide najmä o tieto podmienky:
- Šírka okna je 549 pixelov alebo menej. V tomto prípade sa animácia spustí až vtedy, keď pozícia posúvača presiahne 600 pixelov.
- Šírka okna je od 550 do 991 pixelov. V tomto prípade sa animácia spustí až vtedy, keď pozícia posúvača presiahne 480 pixelov.
- Šírka okna je väčšia ako 991 pixelov. V tomto prípade sa animácia spustí až vtedy, keď pozícia posúvača presiahne 450 pixelov.
If ($(window).width() 600) ( // spustila animáciu firstAnimation(); ) ) else if ($(window).width() > 549 && $(window).width() 480)( // spustená animácia prváAnimácia(); ) ) else ( if ($(window).scrollTop() > 450) ( // spustená animácia prváAnimácia(); ) )
Spustený animačný kód vyzerá takto:
Var firstAnimation = function () ( $(".clients .clients-info").each(function () ( $(this).delay(500).animate(( nepriehľadnosť: 1, výška: "180", šírka: "250"), 2000); )););
Vyššie uvedený kód animuje vlastnosti nepriehľadnosti, výšky a šírky prvkov .clients-info.
Príklad č.3Tretí efekt závisí nielen od polohy posúvača, ale aj od šírky okna. Ide najmä o tieto podmienky:
- Šírka okna je 549 pixelov alebo menej. V tomto prípade sa animácia spustí len vtedy, keď pozícia posúvača prekročí 1750 pixelov;
- Šírka okna je od 550 do 991 pixelov. V tomto prípade sa animácia spustí len vtedy, keď pozícia rolovacej lišty presiahne 1150px;
- Šírka okna je väčšia ako 991 pixelov. V tomto prípade sa animácia spustí až vtedy, keď pozícia posúvača prekročí 850 pixelov.
Kód pre vyššie uvedené prípady je uvedený nižšie:
If ($(window).width() 1750)( secondAnimation(); ) ) else if ($(window).width() > 549 && $(window).width() 1150) ( secondAnimation(); ) ) else ( if ($(window).scrollTop() > 850) ( secondAnimation(); ) )
Spustený animačný kód vyzerá takto:
Var secondAnimation = function() ( $(".method:eq(0)").delay(1000).animate(( opacity: 1 ), "slow", function() ( $(this).find("h4) ").css("farba-pozadia", "#b5c3d5"); )); $(".method:eq(1)").delay(2000).animate(( nepriehľadnosť: 1), "pomaly", function() ( $(this).find("h4").css("farba-pozadia", "#b5c3d5"); )); $(".method:eq(2)").delay(3000) .animate(( opacity: 1 ), "slow", function() ( $(this).find("h4").css("background-color", "#b5c3d5"); )); $(". method:eq(3)").delay(4000).animate(( opacity: 1 ), "slow", function() ( $(this).find("h4").css("background-color", "#b5c3d5"); )););
Vyššie uvedený kód postupne mení vlastnosť nepriehľadnosti elementov.method a potom mení vlastnosť farba pozadia detských elementov h4.
Príklad č.4Tento efekt závisí nielen od polohy posúvača, ale aj od šírky okna. Ide najmä o tieto podmienky:
- Šírka okna je 549 pixelov alebo menej. V tomto prípade sa animácia spustí len vtedy, keď pozícia rolovacej lišty presiahne 3500px;
- Šírka okna je od 550 do 991 pixelov. V tomto prípade sa animácia spustí len vtedy, keď pozícia rolovacej lišty presiahne 2200px;
- Šírka okna je väčšia ako 991 pixelov. V tomto prípade sa animácia spustí až vtedy, keď pozícia posúvača prekročí 1600 pixelov.
Výsledky sú v nasledujúcom kóde:
If ($(window).width() 3500) ( thirdAnimation(); ) else if ($(window).width() > 549 && $(window).width() 2200) ( thirdAnimation(); ) ) else ( if ($(window).scrollTop() > 1600) ( thirdAnimation(); ) )
Animačný kód je nasledujúci:
Var thirdAnimation = function() ( $(".blogs").find("p").delay(1400).animate(( opacity: 1, left: 0 ), "slow"); $(".blogs" ).find("img").delay(2000).animate(( nepriehľadnosť: 1, vpravo: 0), "pomaly"); $(".blogs").find("tlačidlo").delay(2500) .animate((nepriehľadnosť: 1, dole: 0), "pomaly"); );
Vyššie uvedený kód postupne animuje nepriehľadnosť, ľavé, pravé a spodné vlastnosti prvkov tlačidiel p, img,.
ZáverDúfam, že tu uvedené príklady odvedú dobrú prácu pri demonštrácii toho, ako možno použiť jQuery na implementáciu animácií a efektov posúvania.
