Skup korisnih jQuery Ajax CSS3 funkcija za web programere. Interaktivna mapa s dodacima "Tiny Scrollbar" s opisima
Adaptivni, ili ako više volite, responzivni web dizajn sada nije samo još jedan trend dizajna, već je određeni standard za izradu web stranica, koji osigurava svestranost web stranica i skladnu vizualnu percepciju na ekranima različitih korisničkih uređaja. Nedavno, tokom razvoja adaptivni šablon, morao sam se suočiti s raznim poteškoćama u integraciji određenih klizača i galerija slika bez narušavanja cjelokupnog stila dizajna. Danas je sve mnogo jednostavnije, na internetu postoji ogroman broj gotovih rješenja, a ono što posebno raduje je da je većina njih slobodno dostupna, otvorenog koda.
Zbog raznovrsnosti ponuđenih alata, sastavio sam kratak pregled najznačajnijih razvoja responzivnih jQuery klizača slika koji su se nedavno pojavili i distribuiraju se bez ikakvih ograničenja, tj. potpuno besplatno.
WOW klizačResponzivni jQuery klizač slike sa sjajnim skupom vizuelnih efekata (rotacija, preletanje, zamućenje, spirale, zastori, itd...) i mnogim gotovi šabloni. Sa WOW Slider-ovim ugrađenim čarobnjakom za umetanje stranica, možete lako i bez napora kreirati zapanjujuće slajdove za nekoliko minuta. Web stranica programera sadrži svu potrebnu dokumentaciju za postavljanje i korištenje dodatka na ruskom jeziku, kao i odlične primjere uživo kako dodatak radi. Također dostupno za preuzimanje zasebno Wordpress dodatak i modul za Joomla. Siguran sam da će se mnogima svidjeti ovaj divni klizač, kako početnicima tako i iskusnim webmasterima.
HiSliderHiSlider - HTML5, Jquery klizač i galerija slika, apsolutno besplatni dodatak za ličnu upotrebu na sajtovima koji koriste popularne sisteme - WordPress, Joomla, Drupal. Uz pomoć ovog jednostavnog, ali prilično funkcionalnog alata, lako možete kreirati nevjerojatne i živahne slajdove, spektakularne prezentacije i najave novih poruka na stranicama vaših web stranica. Nekoliko gotovih šablona i skinova za klizač, nevjerovatni efekti prijelaza sadržaja, različiti rezultati multimedijalni sadržaj: , video snimci sa YouTube-a i Vimea, fleksibilne korisničke postavke, itd...
Nivo Slider je dobar stari, dobro poznat svima koji znaju, jedan od najljepših i najjednostavnijih klizača slika. Dodatak JQuery Nivo Slider je besplatan za preuzimanje i korištenje i licenciran je pod MIT licencom. Postoji i poseban dodatak za WordPress, ali je nažalost već plaćen i za jednu licencu ćete morati platiti 29 USD. Bolje je napraviti malo magije sa datotekama WP teme i priložiti besplatnu jQuery verziju dodatka Nivo Slider na svoj blog, budući da na Internetu postoji mnogo informacija o tome kako to učiniti.
Što se funkcionalnosti tiče, sve je u savršenom redu. Biblioteka jQuery v1.7+ se koristi za rad, prekrasni efekti prijelaza, jednostavni i vrlo fleksibilne postavke, prilagodljivi izgled, automatsko izrezivanje slike i još mnogo toga.
Ideju o klizaču inspirisali su programeri, koji su poznati po svom stilu prezentacije Apple proizvodi, gdje se nekoliko malih objekata (slika) mijenja klikom na odabranu kategoriju uz jednostavan efekat animacije. Codrops vam predstavlja detaljan vodič o tome kako kreirati ovaj klizač, kompletan izgled HTML oznake, skup CSS pravila i izvršni fajl jQuery dodatak, kao i divan živi primjer korištenja klizača.
Klizač za sliku preko celog ekrana koristeći JQuery i CSS3 + detaljan vodič o integraciji dodatka u stranice web stranice. Ideja je da otvorite trenutni slajd sa određenim sadržajem kada prelazite na sljedeći ili prethodni sadržaj. Koristeći JQuery i CSS animaciju možete kreirati jedinstvene prijelaze između slajdova. Odgovarajući raspored klizača osigurava da izgleda jednako dobro na svim ekranima razne vrste korisničkih uređaja.
Klizač sadržaja koji se automatski podešava po širini i visini u zavisnosti od veličine roditeljskog kontejnera u kojem se nalazi. Prilično jednostavan za implementaciju i fleksibilan u podešavanjima, klizač radi na JQueryju, sa navigacijom na dnu kada se veličina ekrana promeni na dole, navigacija se prikazuje u obliku ikona. Vrlo detaljna dokumentacija (tutorial za kreiranje) i živi primjeri korištenja.
Eksperimentalna verzija klizača koja prikazuje slike s prijelazima iz 3D ravni. Slike su podijeljene u dva horizontalna niza, koristeći strelice za navigaciju za promjenu i prebacivanje svake sljedeće slike u stanje gledanja. Generalno, ništa posebno, ali sama ideja i tehnika izvođenja su prilično zanimljivi.
Vrlo jednostavan jQuery klizač slika sa 100% brzim odzivom i preko cijelog ekrana. Rad klizača je baziran na CSS tranzicijama (osobina tranzicije) u sprezi sa magijom jQueryja. Vrijednost maksimalne širine je po defaultu postavljena na 100%, tako da će se veličina slika mijenjati ovisno o promjenama veličine ekrana. U dizajnu nema posebnih efekata animacije ili ukrasa, sve je jednostavno i dizajnirano za rad bez problema.
Ime govori samo za sebe, ovo je možda jedan od najlakših i najminimalističkijih jQuery klizača slika na koje sam naišao (1kb dodatak). ResponsiveSlides.js je mali JQuery dodatak koji kreira projekcije slajdova koristeći elemente unutar kontejnera. Radi sa širokim spektrom pretraživača, uključujući sve verzije IE-a - čuvena kočnica napretka, od IE6 i novijih. Rad koristi CSS3 tranzicije u sprezi sa javascriptom radi pouzdanosti. Jednostavan raspored pomoću neuređene liste, prilagođavanje prelaza i vremenskih intervala, automatska i ručna kontrola prebacivanja slajdova, kao i podrška za više slajd šoua odjednom. Ovo je tako razigrana "beba".
Kamera je besplatni JQuery dodatak za organiziranje slajdova na web stranicama, lagani klizač s mnogo prijelaznih efekata, 100% prilagodljiv izgled i vrlo jednostavna podešavanja. Savršeno se uklapa na ekrane svih korisničkih uređaja (PC monitori, tableti, pametni telefoni i Mobiteli). Mogućnost demonstriranja ugrađenog videa. Automatska promjena slajdova i ručna kontrola pomoću dugmadi i bloka sličica slike. Praktično puna galerija slike u kompaktnom dizajnu.
Još jedan prilično jednostavan responzivni klizač u jQueryju. Na slajdove možete postaviti bilo koji sadržaj, video, slike, tekst i druge elemente. Proširena podrška ekrani osetljivi na dodir. Korištenje CSS prijelaznih animacija. Veliki broj različitih opcija prezentacije za projekcije slajdova i kompaktne galerije slika. Automatsko i ručno upravljanje. Prebacivanje slajdova pomoću dugmadi i odabirom sličica. Mala veličina izvornog fajla, veoma laka za konfigurisanje i implementaciju.
FlexSlider 2 - Ažurirana verzija istoimenog klizača, sa poboljšanim odzivom, minimiziranjem skripte i minimiziranjem ponovnog crtanja/precrtavanja. Dodatak uključuje osnovni klizač, kontrolu slajdova sa sličicama, ugrađene strelice lijevo-desno i donju navigacijsku traku u obliku dugmadi. Mogućnost prikaza videa u slajdovima (vimeo), fleksibilne postavke (prijelazi, dizajn, vremenski interval), potpuno prilagodljiv izgled.
Dobro poznat i prilično popularan responzivni jQuery dodatak za kreiranje visokokvalitetnih galerija slika i klizača. Interfejs klizača, zahvaljujući svojoj kontrolnoj tabli, vizuelno podseća na poznati video plejer, dodatak uključuje nekoliko različitih tema dizajna. Podrška za ugrađene video zapise i slike sa popularnih servisa: Flickr, Vimeo, YouTube i drugi. Detaljna dokumentacija o postavljanju i korištenju.
Jednostavan, nenametljiv i besplatan jQuery klizač slika napisan posebno za responzivni web dizajn. Blueberry je eksperimentalni jQuery dodatak otvorenog koda. Minimalistički dizajn, bez efekata, samo glatko iskačuće slike koje se menjaju nakon određenog vremenskog perioda. Sve je vrlo jednostavno, instalirajte, povežite i kreni...
Veoma kompaktan jQuery klizač slika sa Lightbox elementima. Zahvaljujući svojim fleksibilnim dimenzijama, vrlo ga je lako integrirati u bilo koji kontejner, u jedan unos u vidu sličica, kada se lebdi kursorom miša ili klikne na njih, aktivira se lightbox sa uvećanom slikom i kontrolama. Pogodno je postaviti takav klizač u bočne panele za predstavljanje proizvoda ili najava vijesti. Odlično rješenje za web stranice sa velikom količinom informacija.
Besplatan klizač sa brzim odzivom s naprednim CSS3 prijelazima. Minimalistički stil, 3 teme dizajna, svaki okvir klizi horizontalno, pojavljuje se u sredini, slika ide lijevo, potpis desno, sličice se dupliraju u donjem desnom uglu. Paginacija prikaza proizvoda za pregled u svakom okviru. Kontrole takođe uključuju dugmad za nazad i napred. Podrška od svih moderni pretraživači.
Vrlo jednostavan klizač slike i u smislu funkcionalnosti i postavki među postavkama je promjena brzine promjene slajdova, aktivacija ručnog načina rada (aktivirana su kontrolna dugmad), kontinuirani slajd šou; Ovaj klizač ima pravo na postojanje i privukao me samo zato što postoji nisam našao ništa posebno zanimljivo u ovom razvoju, možda ga nisam dobro tražio)));
Tako lijep, prilagodljiv klizač slika od Vladimira Kudinova, drugovi. Čvrst, dobro dizajniran alat, sa jasnim primjerima i detaljna uputstva o kreiranju, instalaciji i upotrebi. Prilagodljiv dizajn, lijepe tipke i zelene strelice, sve je prilično lijepo i mirno, bez pritiska.
Besplatni JQuery dodatak za klizač sa efektom paralakse za slike i tekstualne slajdove. Animacije slajdova imaju višestruke vrijednosti prikaza s potpunom kontrolom u svakoj postavci vremena i animacije. Mogućnost animiranja nekoliko elemenata na slajdu odjednom. Možete postaviti različite metode animacije, blijediti slajdovi ili prijelaze iz određenog smjera. Automatski prikaz i ručna kontrola pomoću navigacijskih strelica koje se pojavljuju kada zadržite pokazivač iznad slike. 10 vrsta efekata animacije slajdova i još mnogo toga...
Pregled se pokazao prilično opsežnim, ali nedovoljno informativnim zbog velikog broja razmatranih proizvoda. Svi detalji i detaljni opisi funkcionalnost ovog ili onog dodatka, možete saznati direktno na stranicama programera. Mogu se samo nadati da sam nekome olakšao pronalazak tog vrlo potrebnog alata za kreiranje šarenih slajdera slika na stranicama njihovih web stranica.
Da li ste ikada pomislili da bi bilo lepo da možete da radite sa šablonima na ruskom jeziku? Razmislite o tome na trenutak. Bez gubljenja vremena na rad sa šablonima na engleskom jeziku. Požurimo da vas obradujemo da ga sada možete pronaći na TemplateMonster tržištu. Tekst za svaku od njih pisan je rukom. I, naravno, sva gotova rješenja su nevjerovatno laka za korištenje.
Uz svo poštovanje, Andrew
Preglednici automatski kreiraju opise alata kada webmasteri dodaju tekst atributu title (obično se atribut title primjenjuje na oznake I , tj. na linkove i slike). Kada korisnici pređu iznad oznaka koje sadrže atribut title, pretraživač prikazuje opis alata. Upravo ove iskačuće savjete (tooltip) ćemo uređivati.
Ovaj članak će pokriti:
- kako koristiti dodatak za zamjenu standardnih opisa alata - kako prilagoditi qTip savjete - kako prikazati Ajax sadržaj u opisu alata Jednostavni prilagođeni tekstualni opisiNadam se da nema potrebe objašnjavati da su atributi kao što su naslov i alt često izuzetno potrebni. Na kraju krajeva, oni pomažu korisnicima da se bolje snalaze u velikoj količini informacija i, osim toga, izuzetno su korisni za optimizaciju web stranice za tražilice. Jedini problem sa opisima alata je taj što se ne mogu menjati korišćenjem CSS stilova. Da bismo riješili ovaj problem, koristit ćemo mogućnosti.
1. Kreirajmo osnovni okvir HTML datoteke koji sadrži atribut title.
Spisak linkova:
- Dom
- O kompaniji
- Kontakti
- Portfolio
2. Sada morate preuzeti qTip dodatak iz spremišta.
3. Povežite preuzete fajlove:
// Standardna jQuery biblioteka // U ovu datoteku ćemo pisati jQuery skripte
4. Da bi opis funkcionisao, samo napišite u scripts.js:
$(document).ready(function())( $("a").qtip(); ));
Ova konstrukcija znači da će za sve veze koje imaju atribut title biti primijenjena metoda qtip().
Postavljanje jQueryja qTip1. Alati se mogu konfigurirati na različite načine. Prvo, promijenimo poziciju s koje će se prikazivati opisi alata.
$("a").qtip(( position: ( my: "bottom center", //Položaj kursora na: "top center", //Pozicija okvira za prikaz opisa alata: $(window) //Opis alata neće lizati ivice ekrana ) ));
2. Nakon postavljanja pozicije, možete početi raditi na shemi boja za prikaz opisa alata. Podrazumevano, datoteka jquery.qtip.min.css sadrži sljedeće stilove boja:
Qtip-default (žuti zadani stil)
Qtip-bootstrap
Možete dodati sjenu nekim od ovih stilova: qtip-shadow . Osim toga, nitko vam ne smeta da kreirate vlastiti stil, koji se savršeno uklapa u opći, iako standardnih ima više nego dovoljno.
$("a").qtip(( pozicija: ( moj: "donji centar", na: "gornji centar", okvir za prikaz: $(prozor) ), stil: ( klase: "qtip-green qtip-shadow" ) ) );
Kreiranje navigacijskog menija sa opisima alata1. Prvo, napravimo HTML okvir:
#navigacija (pozadina: rgb(132,136,206); /* Stari pretraživači */ background: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(13206,13201) ,1) 100%) /* FF3.6+ */ pozadina: -webkit-gradient(linearno, lijevo gore, lijevo dolje, color-stop(0%,rgba(132,136,206,1)), color-stop(50); %,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))) /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(132,136,206,); 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%) /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(132,136,206); ) ,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%) /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(132,136,206); , 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%) /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#84888"); = "#8488ce",GradientType=0 /* IE6-9 */ pozadina: linearni gradijent(vrh, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,); 1) 100%); /* W3C */ list-style-type: nema; margina: 100px 20px 20px 20px; padding: 0; overflow: skriveno; -webkit-border-radius: 5px; -moz-border-radius: 5px; radijus granice: 5px; ) #navigation li ( margina: 0; padding: 0; display: block; float: lijevo; border-right: 1px solid #4449a8; ) #navigation a ( boja: #fff; border-right: 1px solid #8488ce; display : blok padding: 10px ) #navigacija a:hover (pozadina: #859900; border-right-color: #a3bb00;)
Rezultat bi trebao biti sljedeća slika:
3. Dodajte u datoteku scripts.js:
$("#navigation a").qtip(( položaj: ( moj: "gornji centar", na: "donji centar", okvir za prikaz: $(prozor) ), prikaži: ( efekat: funkcija (offset) ( $(ovo ).slideDown(300 ) ), sakrij: ( efekat: funkcija (offset) ( $(this).slideUp(100); ) ), stil: ( klase: "qtip-green qtip-shadow", ) )) ;
Sada, kada zadržite pokazivač miša iznad navigacijskog menija, prikazat će se opis alata (atribut naslova).
Prikaži drugi sadržaj u opisu alataOsim prikaza standardnih oznaka, možete prikazati i drugi sadržaj u opisu alata, na primjer preuzet iz datoteke, iz skrivenog kontejnera ili baze podataka, bez ponovnog učitavanja stranice pomoću Ajax tehnologije.
Ova veza preuzima sadržaj iz datoteke koristeći Ajax
Vrijednost atributa href=”tooltip.txt” znači da se hiperveza odnosi na običnu txt datoteku.
$(".infobox").each(function())( $(this).qtip(( content: ( text: "Učitavanje...", //Dok se sadržaj učitava, ovaj ajax unos će biti prikazan: ( url: $ (this).attr("href") //Odakle preuzeti sadržaj), title: ( //Dodaje polje naslova tekstu opisa alata: $(this).attr("title"), button: true //Dodaje dugme za zatvaranje tooltip ) ), position: ( moj: "top center", at: "bottom center", efekat: false, //Uklanja skočni prozor efekta: $(window) ), show: ( event: "click", // Opis alata će se pojaviti kada kliknete na link, možete ga zamijeniti sa 'hover', zatim će se opis alata pojaviti kada lebdite solo: true //Omogućuje vam prikaz samo jedan opis na ekranu), sakrij: "unfocus", //Opis će se zatvoriti kada kliknete na drugi stil elementa stranice : ( klase: "qtip-green qtip-shadow" ) )).bind("click", funkcija(e)(e.preventDefault())); //Kada kliknete na link, pretraživač neće učitati url
Ova Ajax tehnika radi samo kada je server pokrenut. Tako da može zaraditi novac lokalni računar trebate instalirati, na primjer, .
Prije nego što zaboravim, koje su prednosti i mane aluminijskih radijatora i koje radijatore najčešće biraju potrošači.
(preuzimanja: 409)
1. jQuery dodatak “Hover Zoom”Originalno rešenje za implementaciju opisa slika kada lebdite kursorom pomoću efekta zumiranja.
2. Captify dodatak 3. jQuery opis slika u galerijiKada zadržite kursor, pojavljuje se opis slike, a sama slika je ispunjena prozirnim slojem određene boje.
4. jQuery implementacija natpisa slikaNekoliko opcija za implementaciju natpisa za slike koje se pojavljuju kada pređete kursorom miša preko slike.
5. jQuery efekat kliznih vrataKada zadržite pokazivač miša iznad sličice, na njenom mjestu se zapravo pojavljuje opis.
6. jQuery dodatak “Zoominfo”Kada zadržite pokazivač miša iznad slike, ona se smanjuje i pojavljuje se naslov i opis fotografije.
7. jQuery dodatak “Mozaik”Implementacija iskačućih opisa slika kada se lebdi kursorom miša. Postoji 8 različitih tipova iskačućih natpisa. Možete ih pogledati na demo stranici.
Kada pređete kursorom miša preko slike, ona se pojavljuje Kratki opis sa linkom do detaljnih informacija.
9. Dodatak za implementaciju potpisa slikaJoš jedna opcija za implementaciju iskačućih natpisa slika pri lebdenju. Moguće je izabrati između dva jQuery efekta za izgled natpisa.
10. Opis slika “Prozor za pregled”Dodatak za titlovanje slika. Kada zadržite pokazivač miša sa animiranim efektom, pojavljuje se opis slike. jQuery se koristi za kreiranje animacije.
Pripremljeno od materijala
1. Sjajan jQuery slideshow “Elastic Slideshow”
Slideshow sa sličicama i opisima slajdova. Različiti efekti promjene slike. Postoje dvije opcije: sa i bez automatskog mijenjanja klizača.
2. Čisti CSS3 klizač
Lijep klizač slika sa opisom i automatskim mijenjačem slajdova. Kada zadržite pokazivač iznad slike, rotacija se zaustavlja. Zaustavljanje je praćeno CSS3 efektom.
3. jQuery dodatak “Photorama”
Lijep klizač za galeriju.
4. Tekstualni efekti “Efekti tipografije”
Zanimljivi efekti za rad sa tipografijom koristeći CSS3 i jQuery. 7 različitih cool efekata.
5. Darkbox dodatak
Mali lagani dodatak za prikaz slika u iskačućem bloku.
6. Lebdeći efekat sa jQuery
Efekt kruga pri lebdenju.
7. Animirana jQuery CSS3 dugmad
Mnogo različitih animiranih CSS3 efekata za kreiranje sjajnih dugmadi za vašu web stranicu. Baš super efekti lebdenja.
8. HTML5 jQuery mijenja pozadinske slike
Kada kliknete na sličice, pozadinske slike zamjenjuju jedna drugu sa efektom zamućenja. Kada promenite veličinu prozora pretraživača, pozadinska slika se menja.
8. Interaktivni efekti tipografije
Zanimljivi tekstualni efekti koristeći HTML5 i jQuery (4 različita efekta). Zadržite pokazivač iznad teksta da vidite efekat.
9. Iskačući natpisi slika
Mnogo različitih animiranih efekata lebdenja za implementaciju iskačućih natpisa slika.
10. Dodatak “Portamento”
Plutajući blok u jQueryju. Uvijek ostaje vidljiv kada se pomičete niz stranicu.
11. Skroleri sadržaja
jQuery dodatak za prikaz pomicanja u blokovima fiksnih veličina. Nekoliko stilova.
12. Dodatak Scrollbars
jQuery implementacija horizontalnog i vertikalnog pomicanja sadržaja u bloku fiksnih veličina.
13. Tiny Scrollbar dodatak
jQuery dodatak za implementaciju vertikalnog i horizontalnog pomicanja sadržaja.
Demo
Skinuti
14. Dodatak “jScrollPane”
Pomeranje sadržaja u bloku preko pretraživača.
15. Plutajući blok “Scroll Follow”
Dodatak za kreiranje bloka koji će se pomicati kako se stranica pomiče. Blok je moguće popraviti klikom na link.
16. Iskačuće bočne trake
Paneli koji se mogu uvući na sve strane web stranice.
17. Efikasna CSS3 rješenja za dizajn stubova stranica
Tri opcije za implementaciju animiranih efekata za kreiranje „Site u razvoju“ stuba.
17. Efekat prilikom pomeranja stranice
Nevjerovatan efekat pri pomicanju stranice: elementi se pomiču iz područja iza ekrana ili se, obrnuto, sakrivaju iza područja ekrana. Ovo rješenje je savršeno za korištenje na portfolio web stranicama, za efektnu prezentaciju završenih projekata sa kratkim opisom.
19. Dodatak “fancyBox 2”
Nova, potpuno prepisana verzija dobro poznatog fancybox dodatka za prikaz slika i drugog sadržaja u modalnim prozorima.
20. Minimit Gallery
Funkcionalni dodatak sa širokim spektrom funkcija: galerija, vrtuljak, klizač, meni, ekspander, animirana dugmad.
21. jQuery News TickerRotator vijesti na web stranici. Poruke se slijede jedna za drugom i pojavljuju se pomoću zanimljivog efekta pisaće mašine. Možete prestati mijenjati vijesti klikom na dugme “Pauza”. Možete koristiti strelice za kretanje s jedne poruke na drugu.
22. Prilagodljive slike
Skalabilne slike za prikaz mobilnih uređaja. Veličine slike zavise od veličine prozora. Korišćene tehnologije: JavaScript i PHP5.
23. vScroller
Vertikalni jQuery, CSS3 scroller. Podesiva brzina skrolovanja i vreme kašnjenja.
24. Višeslojni padajući meni “jQSimpleMenu”
Svježi jQuery dodatak za kreiranje horizontalnih padajućih menija na više nivoa na web stranici.
25. "jsCarousel 2.0"
jQuery dodatak za implementaciju vertikalnih i horizontalnih karusela.
26. Rotator “Dynamic News”
jQuery dodatak za lijep prikaz najnovijih vijesti sa RSS feed-a.
27. Animirani meni
Animirani efekat kada pređete mišem preko stavke menija.
28. Efekt animiranog teksta
Tri spektakularna primjera rada sa CSS svojstvo"background-clip: text". CSS3 efekat ne radi u starijim pretraživačima.
29. CSS3 jQuery efekat zamućenja
Kada zadržite pokazivač iznad bloka, on se povećava, a preostali blokovi teksta zamagljuju se u pozadini.
30. CSS3 jQuery Tooltips
Implementacija blokova sličnih bilješkama s tekstom.
34. Rlightbox
Prikaz medijskog sadržaja u iskačućim blokovima: slike, video zapisi, Flash.
35. jQuery zujalica
Povećanje kvadratne površine.
36. CSS3 jQuery opis slike
Dodatak “Bazirana galerija sadržaja kliznih vrata” za implementaciju opisa iskačućih slika. Kada zadržite pokazivač iznad bilo koje od prikazanih slika, pojavljuje se kratak opis s vezom do cijelog članka. Hover: Efekat podizanja garažnih vrata.
37. jQuery dodatak “uCompare” efekta “prije i poslije”
Povlačenjem zavjese možete uporediti dvije preklopljene slike. Idealno za one slučajeve kada trebate prikazati dvije verzije nečega na stranici: prije i poslije.
38. Efekat rotacije slike
Nekoliko različitih animiranih efekata prijelaza između slajdova.
