Responzivni reklamni baner koji koristi HTML5 i CSS3. HTML5 - baneri: za šta su potrebni i kako ih možete napraviti Primjer kreiranja dinamičkog banera u html-u
Zahvaljujući razvoju web tehnologija i modernih pretraživača, možemo kreirati mnoge efekte bez upotrebe Javascript-a. Ovo je znatno olakšalo život web programerima. Jer sada možemo kreirati efekte koristeći čisti CSS bez upotrebe Javascript-a. Stoga, u ovom članku želim da vam kažem o tome da li je moguće kreirati banere koristeći čisti CSS, šta to zahteva, kao i prednosti i nedostatke ovog pristupa.
CSS3 pruža širok spektar mogućnosti, samo ih trebate pravilno koristiti. Kao primjer, želio bih dati linkove do mojih prošlih radova “Likovi u čistom CSS-u”:
Prvo, želim dati primjere mojih CSS banera. Možda ste ih već vidjeli na stranici, ali niste ni znali šta i kako su nastali.
Što se tiče demo-a: svaki primjer (baner) ima trajanje u sekundama na dnu, kao i dugme “Osvježi” koje počinje prikazivati baner od početka.
Baner #1 - "Individualna obuka za izradu web stranica":
Kreirao sam ovaj baner otprilike 2 dana. Zašto tako dugo? Zato što je trebalo neko vrijeme da se baner prilagodi (da bude gumen) prilikom ponovnog izračunavanja koordinata. Trenutno, njegova veličina ovisi o širini roditeljskog bloka (koji sadrži sam CSS baner).
Napravio sam ovaj baner za bukvalno 2-2,5 sata. Jedina stvar koja je ovdje usporila proces stvaranja je izbor ikona. Zato što su morali biti odabrani bliski temi banera.
Ovaj baner se također proteže ovisno o širini blok kontejnera u kojem se nalazi. Kreiranje je trajalo otprilike 1,5 sat.
Ovi baneri izgledaju jako lijepo, ali da li je to zaista tako jednostavno? Pogledajmo prednosti i nedostatke ove metode kreiranja banera.
Prednosti i nedostaci CSS banera:
Kako napraviti CSS baner? 1 IdejaPrvo morate znati kakvu animaciju baner treba da ima (šta, gdje i odakle treba da se kreće i gdje treba da se pojavi). Možete uzeti A4 list i nacrtati gdje će se svaki element kretati i šta bi trebalo biti na baneru.
Uostalom, ne možete početi kreirati baner ako ne znate šta bi trebao biti i kako funkcionira.
2 HTML strukturaSljedeći korak je kreiranje HTML oznake tako da se elementi mogu pomicati (i animirati za njih). Odnosno, ne možete učiniti sve s jednom slikom koja će se pomaknuti udesno ili lijevo i tada je animacija gotova.
Obično postoji jedan zajednički blok u kojem se nalaze svi ostali. I u ovom opštem bloku možemo upravljati elementima kako nam je potrebno.
3 CSS animacijaPosljednji korak je kreiranje animacija za blokove, kao i pisanje stilova za njih, jer su neki dijelovi animacije skriveni po defaultu.
Da biste kreirali vlastiti baner, morate dobro razumjeti osnove CSS-a i HTML-a.
Naučite osnovnu CSS animaciju uz ovaj vodič - .
ZaključakSve moderni pretraživači podržavaju CSS3 svojstva, što znači da će baneri biti ispravno prikazani u takvim pretraživačima. Ali uz pomoć JS dodataka možete kreirati CSS banere za starije pretraživače. Naučivši osnove CSS animacije, razumjet ćete proces kreiranja banera i uskoro ćete kreirati svoj prvi čisti CSS baner! 😉
Oglašavanje je neophodna stvar za svaku web stranicu. Samo su troškovi alata za oglašavanje veći od prihoda od njih. Tada se mnogi ljudi počnu pametovati kako bi barem malo uštedjeli. Za takve "škakljive" mi ćemo vam reći kako da napravite baner.
Šta su baneriBaner na Internetu označava pravougaonu reklamnu sliku sa statičnim ili dinamičkim (animiranim) sadržajem. Baner može uključivati i tekst i grafiku. Baner je u pravilu opremljen vezom koja se aktivira nakon klika na nju tipkom miša.
Savremeni porast efikasnosti baner oglašavanja povezan je sa upotrebom kontekstualnog ciljanja. Istovremeno, baneri stranice oglašavaju samo one robe i usluge koje su "u skladu" s temom resursa:
Bilo bi lijepo znati kako napraviti baner za web stranicu. Ali prvo se morate pozabaviti postojeće vrste bannera. Razlikuju se sljedeće vrste:
- Statički baneri – sastoje se od statične slike. To su slike u JPEG ili PNG formatu. Odlikuje ih mala težina, što ne utiče na brzinu učitavanja stranice.
- Animirani baneri – animacija kreirana pomoću GIF-a. Sastoji se od nekoliko slika koje se međusobno zamjenjuju određenom frekvencijom. Težina banera zavisi od broja slika koje se koriste u njemu.
- Flash – u ovom baneru animacija je bazirana na Flashu. Može odgovoriti na radnje korisnika.
Interaktivni sadržaj se može predstaviti u obliku igre ili upitnika s dodatkom audio zapisa. Crteži za animaciju kreiraju se pomoću vektorske grafike.
Postoji mnogo različitih veličina banera za web stranice. Ali najpopularniji od njih su:
- 88 x 31 piksela;
- 120 x 60 piksela;
- 120 x 90 piksela;
- 120 x 240 piksela;
- 125 x 125 piksela;
- 120 x 600 piksela;
- 160 x 600 piksela;
- 180 x 150 piksela;
- 234 x 60 piksela;
- 240 x 400 piksela;
- 250 x 250 piksela;
- 300 x 600 piksela;
- 300 x 250 piksela;
- 336 x 280 piksela;
- 150 x 150 piksela;
- 468 x 60 piksela;
- 728 x 90 piksela.
Učinkovitost reklamnog banera postavljenog na web stranicu ne ovisi samo o popularnosti stranice. Njegova efikasnost u velikoj meri zavisi od nivoa izvršenja samog oglašavanja. Kvalitetan baner mora ispunjavati nekoliko osnovnih kriterija:
- Privucite pažnju korisnika - ali to ne znači da bi baner trebao biti previše svijetao i treperi. Takvo oglašavanje će kod posjetitelja izazvati iritaciju, a ne pažnju. Sadržaj banera treba nenametljivo da „nagovesti“ korisnika o njegovom prisustvu. Stoga, prilikom odabira slike i teksta za nju, uvijek treba uzeti u obzir psihološki faktor;
- Probuditi interesovanje - baneri za web sajt treba da izazovu interesovanje korisnika za predmet oglašavanja. Proizvod ili usluga moraju biti predstavljeni ne samo sa ukusom, već i na originalan način. Ohrabruje se upotreba lagane duhovitosti i humora:
- Ohrabrenje da kliknete na link banera - postignuto zbog efekta neke misterije i potcenjivanja,
ugrađen u sadržaj banera. - Podsticaj za naručivanje usluge ili kupovinu prvenstveno zavisi od sadržaja baner reklame. Trebalo bi da prikazuje najbolje aspekte reklamnog objekta ili koristi koje korisnik može dobiti kupovinom istog.
- Ako je baner namijenjen povećanju svijesti o brendu i poboljšanju njegovog imidža, onda bi reklamni sadržaj trebao uliti osjećaj povjerenja kod potrošača. Ali nemojte izazivati negativne asocijacije.
Pravila koja treba uzeti u obzir prije postavljanja banera na web stranicu:
- Što je baner veći, veća je vjerovatnoća da će korisnik kliknuti na njega. Najefikasnija veličina je 240 x 400 piksela;
- Baner reklama postavljena na vrhu (u zaglavlju) ima najveći efekat. Takođe se može postaviti sa strane ili na dno stranice, ali je efikasnost ovde nešto manja;
- Animirani baneri mogu brzo privući pažnju korisnika - ljudsko oko intuitivno reagira na pokret.
Prije nego što umetnete banner na svoju web stranicu, morate odlučiti o lokaciji njegovog postavljanja. U tom slučaju morate uzeti u obzir veličinu banera i raspoloživi slobodni prostor na stranicama. Odlukom o lokaciji reklamnog bloka, možete umetnuti kod banera u html stranicu.
Kôd za većinu banera slijedi obrazac:
- a href=”/link do web-stranice oglašivača” – adresa resursa do kojeg klik na baner vodi korisnika;
- title=”title” – tekst koji se prikazuje u tooltip-u kada se lebdi iznad područja banera;
- target=”_blank” – postavlja pravila za prikazivanje web stranice oglašivača nakon klika na link banera (“_blank” - otvara se u novom prozoru);
- rel=”nofollow” – sprečava pretraživače da obrađuju ovu vezu;
- img src=”https://www.site/wp-content/uploads/path to image” – postavlja putanju do slike koja se prikazuje na baneru;
- alt=”alternativni tekst” – tekst koji će biti prikazan u baneru ako njegova slika nije učitana.
Ali ne morate sami dizajnirati baner. Da biste to učinili, možete koristiti posebne online generatore. Da biste generirali banner kod na takvoj usluzi, morate popuniti nekoliko polja i kliknuti na dugme:
Ili možete naručiti izradu banera u profesionalnom studiju. Tada će koštati više... Evo okvirnih cijena:
- Izrada običnog GIF banera – od $25;
- Kreiranje banera bazirano na Flashu – 70-150 USD;
- Promjena veličine - približno 50% originalne cijene.
Ali ako malo budete pametni, možete sami kreirati jednostavan baner. Ovo je čudo koje se dešava nakon deset minuta manipulacije html kod i slika u Coreldrawu:
Šifra banera:
Ako se još malo poigrate s kodom i dodate nekoliko rukovatelja događaja, na kraju ćete dobiti baner sa promjenjivom slikom. Slika na baneru se mijenja kada pređete kursorom preko nje.
Evo šta se dogodilo:
Primjer koda:
Izrada animiranih i video baneraPogledajmo primjer kako napraviti animirani baner pomoću programa Ulead GIF Animator.
U meniju „Datoteka“ izaberite „Čarobnjak za animaciju“. U prozoru koji se pojavi postavite veličinu budućeg banera. Sljedeći korak je učitavanje pripremljenih slika:
Zatim se podešava brzina promjene slika u animaciji. U malom prozoru, ova brzina je prikazana korištenjem promjenjivih brojeva.
HTML5 baneri
od 2.299 RUB
RUB RedTrenutno su HTML5 baneri jedini trenutni format za potpuno animirano reklamiranje banera. Ovaj univerzalni multi-platformski format zamijenio je Flash banere, koji su imali brojna ograničenja i nedostatke.
Glavni razlozi za ovo odbijanje su sljedeći:
- tužbe protiv Flash tehnologije su se akumulirale u tom području kompjuterska sigurnost i povećana potrošnja procesorske snage mobilnih uređaja;
- neki pretraživači su po defaultu počeli blokirati Flash;
- on mobilnih uređaja iOS (iPhone, iPad) ekran Flasha nije obezbedio proizvođač;
- popularnost programa za blokiranje Flash banner oglasa;
- odbijanje dalje podrške i razvoja Flash tehnologije od strane njenog vlasnika Adobe.
Animirani HTML5 baneri mogu se prikazati bez ograničenja u bilo kojem pretraživaču, na ekranu bilo kojeg uređaja, uključujući pametne telefone, tablete i medijsku TV. To je njihova višeplatformska i svestranost.
Za kupca, korištenje HTML5 banera znači prije svega proširenje pokrivenosti publike bez gubitka.
Šta može HTML5 baner?Mnogo. Uostalom, ovo je najnapredniji format koji privlači pažnju korisnika, pa čak i komunicira s njim (interaktivni baner).
Što se tiče animacije, takav baner može prikazati vektorsku animaciju (bez gubitka skaliranja), animaciju likova, fotografija, logotipa, grafikona i dijagrama, tekst, pa čak i 3D animaciju. Iz interaktivne perspektive, HTML5 baner može odgovoriti na radnje korisnika i ponuditi dodatni sadržaj i funkcije. Sa medijske tačke gledišta, HTML5 baner može reproducirati video, slajdove i audio snimke. Što se tiče odziva, HTML5 baner se može protegnuti po cijeloj širini stranice, proširiti dodatne panele ili proširiti da popuni cijeli ekran.
Pogledajmo glavne vrste HTML5 banera.Animirani HTML5 baner fiksne veličine.
Najpopularniji format u većini reklamnih mreža. Širina i visina traženih banera se biraju sa liste onih koji su prihvaćeni za postavljanje. Uvijek ćemo predložiti najčešće veličine.
Razvlačenje HTML5 banera (responzivno, gumeno).
Ovo je baner koji se može rastegnuti da zauzme cijelu širinu (ponekad i visinu) ekrana. (Više detalja možete pronaći u ovom članku)
HTML5 baner preko cijelog ekrana.
Baner koji se otvara preko celog ekrana. U pravilu sadrži mjerač vremena prikaza i dugme „Zatvori“. Posebno popularan za prikaz na mobilnim uređajima.
Često takav baner mora biti prilagodljiv, uzimajući u obzir različite orijentacije i rezolucije mobilnog uređaja.
Proširivi HTML5 baner (proširivi).
U početku je na ekranu prisutan samo početni panel takvog banera (tizera). Kada se izvrši zadani algoritam (prelazak mišem ili klik, tajmer ili drugi događaji na stranici), otvara se drugi dio banera s dodatnim proširenim informacijama.
HTML5 video baner.
Ovisno o postavkama i zahtjevima platforme za oglašavanje, može prikazati video sa automatskim pokretanjem ili nakon pritiska na dugme „Pusti“. Može sadržavati dugmad za kontrolu i isključivanje zvuka. Video datoteka se obično nalazi na vanjskom hostingu i preuzima se kada se prikaže.
Interaktivni baneri za igre.
Baneri koji podstiču korisnika da se pridruži igri izvođenjem jednostavnih radnji.
Takvi baneri privlače pažnju ciljne publike, izazivaju veliko zanimanje, ali istovremeno imaju niz ograničenja (na primjer, nepostojanje događaja prelaska miša na mobilne uređaje ili ograničenja upotrebe dodatnih skripti). Uvijek ćemo vam govoriti o ovim funkcijama ako planirate kreirati HTML5 baner za igre.
“Pametni” HTML5 baneri (kalkulatori).
Koriste se za uključivanje i interakciju s korisnikom, nudeći mu trenutni proračun prema potrebnim parametrima i formuli specificiranoj internim algoritmom (na primjer, obračun kredita, hipoteke, potrošnja građevinskog materijala i druge jednostavne operacije).
HTML5 baneri koji se mogu uređivati – u nekim slučajevima, korisnik treba brzo da izvrši izmjene na banerima bez pribjegavanja pomoći programera (na primjer, često mijenja cijene, procente ili ponude). Možemo se nositi s ovim zadatkom i ispisati potrebne parametre direktno u HTML kod banera, gdje kupac može samostalno izvršiti izmjene. Možete ponuditi drugo rješenje koje vam je zgodno za izlaz podataka koje koristi baner u eksterne datoteke.
HTML5 baneri koji rade s učitavanjem vanjskih podataka i API-ja.
On trenutno Mnoge reklamne mreže zabranjuju banerima da dođu do vanjskih izvora. Međutim, ako se baner postavi na stranicu koja pruža takvu mogućnost, HTML5 baner može zatražiti potrebne informacije (tekst, brojeve, citate) preko API-ja stranice i, nakon što ih obradi prema datom algoritmu, pokazati ih korisnik.
3D HTML5 baneri.
Takvi baneri privlače pažnju korisnika stvaranjem trodimenzionalnih modela slika na stranici.
HTML5 3D baner se može implementirati kao rotirajući objekat čije ivice sadrže okvire banera, kao padajuća knjiga ili koristeći druge 3D efekte.
Imajte na umu da HTML5 baner može uključivati nekoliko opisanih funkcija odjednom. Na primjer, video baner se može protezati cijelom širinom stranice, a 3D animacija se može proširiti na stranicu ovisno o radnji korisnika.
Ako želite da naručite HTML5 baner na našoj web stranici, a vaša kreativna ideja zahtijeva kombiniranje različitih formata, naši stručnjaci to uvijek mogu učiniti.
HTML5 baner - šta je to tehnički?Najbolje je razmišljati o HTML5 baneru kao o mini web stranici. Bez pretjerivanja.
HTML5, koji ovom formatu banera daje ime, je jezik za označavanje web stranice ili, drugim riječima, jezik izgleda. I postavljen je prema istim zakonima kao i svaka moderna web stranica. Može sadržavati div kontejnere, plug-in fontove, css stilove i js skripte. Glavni element je kontejner za animaciju platna. Sama animacija se implementira pomoću java skripte, često koristeći js biblioteke posebno dizajnirane za animaciju.
Šta je unutra? Zašto u arhivu? Zašto ima toliko fajlova?Tako je, jer smo navikli da je baner jedan JPG slikovni fajl ili „gif“ ili „fleš disk“. Ali zapamtite, kao što smo gore napisali, HTML5 baner je u suštini mini-stranica. Sadrži mnogo datoteka i isporučuje se platformi za oglašavanje u zip arhivi. Unutar arhive nalazi se glavna HTML datoteka, java skript datoteke, biblioteke, stilovi i korištene slike.
Napomena. U nekim slučajevima, platforma za oglašavanje može zahtijevati da dostavite cijeli baner u jednoj datoteci, uključujući sve korištene skripte i slike u formatu base-64. Ovo nije problem za iskusnog programera. Međutim, takav zahtjev povećava vrijeme potrebno za izradu banera i izmjene na njemu. Na sreću, ovaj zahtjev je rijedak.
Kako mogu vidjeti poslani HTML5 baner na svom računaru?Vrlo jednostavno. Raspakujte zip arhivu i otvorite HTML datoteku u vašem pretraživaču.
Kako mogu provjeriti da li sam primio ispravan HTML5 baner?Ako je baner kreiran za Google usluge oglašavanja, onda vam je na usluzi odličan alat za provjeru kvaliteta rada dizajnera - Googleov on-line HTML5 validator. Jednostavan je za korištenje: učitajte svoju zip arhivu s banerom i pogledajte da li prolazi kontrolnu listu. Greške će biti označene crvenim ikonama. Ako ih nema, trud vašeg programera nije bio uzaludan i baner je spreman za postavljanje u Google adWords ili Double Click.
U reklamnim mrežama Yandex, Mail.ru, Rambler, adFox, adRiver i drugima, baner se također provjerava da li je usklađen sa tehničkim zahtjevima nakon što se postavi na web stranicu sistema. U slučaju problema, možete dobiti komentar od moderatora koji opisuje grešku. Neke web lokacije pružaju klijentima oglašavanja mogućnost da pregledaju baner na probnoj stranici.
Ipak, najbolja garancija ispravne izrade HTML5 banera je iskustvo programera, njegovo poznavanje tehničkih zahtjeva platformi za oglašavanje i njegova spremnost da promptno ispravi greške.
Da li je baner sa animacijom u Java Script drugačiji?Nemojte se zbuniti. “Java Script baner”, “Canvas baner” - govorimo upravo o onome što se obično naziva “HTML5 baner”. Ovisno o alatu za razvojne programere, js biblioteke ili pravila izgleda mogu se promijeniti, ali opća shema sklapanja ostaje ista.
Kako napraviti HTML5 baner?Najpopularniji editor među dizajnerima za kreiranje HTML5 animacija je Adobe Animate.
Google nudi vlastiti razvojni alat - Google Web Designer. Među njegovim prednostima su prisustvo mnogih ugrađenih šablona i mogućnost objavljivanja banera direktno za Google usluge oglašavanja: adWords i Double Click. Među nedostacima - ograničene mogućnosti animacije.
Neki dizajneri, često američki, koriste uređivač i biblioteke Green Sock Animation Platform. Međutim, kod nas nisu dobili značajniju rasprostranjenost.
S obzirom da su sve potrebne komponente otvorenog koda, dobar stručnjak može kreirati HTML5 baner čak iu najjednostavnijim uređivač teksta. Međutim, ova metoda nije učinkovita u usporedbi s korištenjem profesionalnih programa za animaciju.
Tehnički zahtjevi za HTML5 banere.Zahtjevi se odnose na:
- ukupna težina HTML5 banera u kb.;
- struktura zip arhive, broj fascikli i fajlova;
- lista dozvoljenih formata datoteka;
- način omogućavanja URL linkova klikom na baner (firmver banera);
- lista dozvoljenih js biblioteka na eksternom hostingu;
- postupak i ograničenja za povezivanje video i audio datoteka;
- zahtjevi za dizajn okvira, odricanja od odgovornosti, učestalost i broj ciklusa animacije, opterećenje na procesoru uređaja.
A ovo je daleko od toga puna lista zahtjeve koje naši programeri moraju uzeti u obzir kako bi kupcu pružili HTML5 baner spreman za postavljanje i lansiranje reklamna kampanja bez odlaganja.
Šta da radim sa svojim prethodno kreiranim Flash banerima?Uvjerite se sami - najveće reklamne mreže više ne prihvataju Flash banere za postavljanje, Flash komponente su blokirane u pretraživačima i na iOS uređajima, Swiffy (jedini adekvatan on-line konverter Flash banera u HTML5) je prestao da radi.
Automatska konverzija Flash formata u HTML5 je gotovo nemoguća – u stvari, zahtijeva potpunu ručnu rekonstrukciju u HTML5 uređivaču. U takvoj situaciji, prava odluka bi bila naručiti izradu novog seta animiranih banera u modernom i univerzalnom HTML5 formatu.
Šta je sa "gifovima"?Morate razumjeti da je svaka GIF animacija sekvencijalni skup slika okvira, baš kao u video datotekama. GIF datoteka može sadržavati informacije o brzini reprodukcije okvira i broju ponavljanja. To ograničava njegove mogućnosti.
GIF baner ne može raditi s vektorskom grafikom, programski kreirati animaciju, prilagoditi se željenoj veličini i još mnogo toga, što animirani HTML5 baner može lako podnijeti.
Šta to znači za oglašivača?problem višak kilograma. Da, čak su i baneri podložni tome. Sve glavne reklamne platforme postavljaju stroga ograničenja težine banera u kilobajtima.
GIF baner je dobar za prikazivanje nekoliko statičnih okvira, možda s malom animacijom teksta, dugmetom ili promjenom fotografija. U ovom slučaju, ukupna težina GIF banera ne prelazi zahtjeve reklamnih platformi.
Ako animacija uključuje promjenu nekoliko stotina kadrova, onda se težina GIF banera povećava, kako kažu na engleskom, "dramatično", odnosno dramatično. GIF od 20 sekundi težak nekoliko megabajta je uobičajen. A to se izrazito ne sviđa oglašivačkim mrežama, koje s pravom brinu koliki promet će korisnik morati preuzeti da bi vidio baner.
Dakle, ako vam je potreban baner sa mnogo efekata animacije, animacije likova, interaktivnog, adaptivnog ili video banera, izbor je napravljen u korist naručivanja HTML5 banera.
Plutajući blok (ili kako ga još nazivaju pokretni, fiksni, ljepljivi) potreban je na stranici kako bi korisnik prilikom pomicanja stranice vidio jedan stacionarni element, u koji se najčešće postavlja reklama (tizeri, baneri ili kontekst) .
Nažalost, Adsense pravila to nam zabranjuju. Međutim, mnogi vlasnici web stranica ignoriraju pravila na vlastitu odgovornost. Možda za ovo nisu ni kažnjeni, ali ne bih savjetovao da riskirate.
U takve YAN blokove postavljam svoje teasere/banere, a ponekad umjesto reklame prikazujem slične postove ili neke informacije korisne posjetitelju.
Dozvolite mi da vam kažem kako možete kreirati plutajući blok na vašoj web stranici.
Zadatak: učiniti posljednji blok u bočnoj koloni (bočna traka) plutajućim. Štaviše, tako da se zalepi samo u trenutku kada korisnik dođe do njega skrolovanjem, a ne odmah kada otvori stranicu. Takođe, blok treba da se „lepi“ kada dođe do podnožja (tj. ne da ga preklapa).
Najradniji načinPostoji mnogo opcija za implementaciju ljepljivog bloka, ali ne rade sve ispravno. Reći ću ti od lično iskustvo: isti način instaliranja bloka može raditi na jednom mjestu, ali će se dovratnici pojaviti na drugom.
Ispod je primjer plutajućeg bloka koji je radio na gotovo svim stranicama na kojima sam ga instalirao. Nije bilo dovratnika. Motor takođe nije bitan (DLE, WordPress, LiveStreet itd.).
Na željeno mjesto u bočnoj koloni zalijepite sljedeći HTML kod:
$(window).scroll(function() (
var sb_m = 20; /* padding iznad i ispod */
var mb = 300 ; / * visina podruma sa marginom */
var st = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner") ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();
If(sb_h + $(document).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop" : h) ) ;
}
drugo(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
}
)
;
U ovom kodu možete postaviti padding na vrhu, dnu, kao i visinu vašeg podnožja, tj. visina na kojoj se blok treba zaustaviti.
Sada povežimo JS. Da biste to učinili, napišite u odjeljku GLAVA:
Najlakši način (za WordPress)Također metoda bez greške, ali instalacijom dodatka. Radi bez dovratnika.
Prednosti:
- nema potrebe za razumijevanjem/razumijevanjem HTML-a;
- jednostavnost i brzina ugradnje.
Nedostaci:
Kako koristiti:
Činili su mi se manje zgodnim i ne tako jasnim kao dvije gore navedene metode. Ali svejedno ću vam reći o njima.
Opcija #1 (bez jQueryja)Umetnite u bočnu traku:
Pišemo stilove u HTML-u (bolje ih je dodati direktno u CSS):
.ljepljivo(
pozicija: fiksna;
z-indeks: 101 ;
}
.stop(
položaj: relativan;
z-indeks: 101 ;
}
Sada dodajemo samu skriptu na stranicu (bolje je staviti je u zasebnu datoteku, kao u "Najradnijoj metodi"):
(funkcija() (
var a = document.querySelector("#aside1") , b = null, P = 0; // ako je nula zamijenjena brojem, blok će se zalijepiti prije nego što gornja ivica prozora pretraživača dođe do gornje ivice elementa. Može biti negativan broj
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
funkcija Ascroll() (
ako (b == null) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
za (var i = 0; i< Sa.length; i++)
{
if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 ||. Sa[ i].indexOf("padding") == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("background" ) == 0 ) (.
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.djeca[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer") .getBoundingClientRect() .top + 0 ) ; // selektor blokova, kada dođete do gornje ivice koje morate otkačiti ljepljivi element; Math.round() je samo za IE; ako je nula zamijenjena brojem, tada će se blok zalijepiti prije nego što donja ivica elementa dođe do podnožja
ako ((Ra.top - P)
- Dinastije Evrope Ambiciozni planovi male zemlje
- Odobrenje lista štetnih i (ili) opasnih proizvodnih faktora i radova, tokom čijeg obavljanja se provode obavezni preliminarni i periodični medicinski pregledi (pregledi) - Rossiyskaya Gazeta
- Admiral Senyavin Dmitry Nikolaevich: biografija, pomorske bitke, nagrade, sjećanje Biografija admirala Senyavina
- Značenje Rybnikova Pavla Nikolajeviča u kratkoj biografskoj enciklopediji