| 16.04.2015
U posljednjih godinu dana web dizajneri su sve više prihvaćali genijalan način oživljavanja web stranice - postavljajući video kao pozadinu stranice. Zanimljiva priča ili samo "živa" slika u pozadini ukrasit će čak i običnu stranicu s posjetnicama, zainteresirat će korisnika i potaknuti vas da duže ostanete na web mjestu. Danas ćemo s vama podijeliti jedan od načina postavljanja video pozadine na cijelom ekranu za web stranicu koristeći HTML5 i CSS.
Ako ste čvrsto uvjereni da želite postaviti videozapis za pozadinu na svojoj web stranici, postoji nekoliko stvari koje trebate znati:
- Prvo, ne zaboravite da videozapis ima veliku težinu. To može negativno utjecati na brzinu učitavanja stranice, posebno ako korisnik ima sporu internetsku vezu. Stoga birajte kratke videozapise. U slučaju da trebate koristiti prilično dugačak video zapis, budite spremni ili poraditi na smanjenju njegove težine, ili na činjenicu da ćete morati žrtvovati dio publike.
- Drugo, izbjegavajte automatsko reproduciranje zvuka iz videa. Koristite ili video zapise bez zvuka ili dodajte mogućnost da korisnik sam uključi zvuk ako mu zatreba. Smatra se vrlo lošim oblikom automatskog reproduciranja zvuka pri otvaranju web stranice.
- Treće, morate se pobrinuti za kompatibilnost među preglednicima i ispravan prikaz i reprodukciju videozapisa na svim uređajima, kao i pružiti alternativu videozapisu (za one slučajeve ako se neće reproducirati). U nastavku u našem primjeru pokazat ćemo kako to učiniti.
- I četvrto, vrijedi dobro razmisliti o tome je li videofon prikladan na mjestu na kojem ga želite instalirati, jer je vrlo lako prijeći granicu između originalnosti i beskorisnosti ovog poduhvata. Video ne smije ni na koji način odvratiti korisnika od njegovog glavnog cilja, zbog čega je došao na web mjesto. Prilikom postavljanja video pozadine ispod tekstualnog sadržaja, provjerite koliko je tekst postao čitljiv. Na primjer, može se stopiti s pozadinom u određenom trenutku reprodukcije videozapisa (bijeli tekst na bijeloj podlozi, crni na crnoj itd.).
1. HTML
Za naš primjer uzeli smo video zapis rezolucije 1920 × 1080, dužine 15 sekundi i težine nešto više od 3 MB. Unutar bloka
Za oznaku
- width - širina područja za reprodukciju videa;
- height - visina područja;
- autoplay - automatska reprodukcija video zapisa;
- petlja - petlja video;
- poster - slika koja se prikazuje umjesto videozapisa dok se učitava ili je nedostupna.
Zatim smo napisali dvije oznake
2. CSS
Naša tablica stilova pozadine izgleda ovako:
# video-bg (položaj: fiksno; gore: 0; desno: 0; odozdo: 0; lijevo: 0; preljev: skriveno; z-indeks: 1; pozadina: url (bg / daisy-stock-poster.jpg) ne -ponovi # 94a233; background-size: cover;) # video-bg> video (pozicija apsolutna; vrh: 0; lijevo: 0; min-širina: 100%; min-visina: 100%; širina: auto; visina : auto;) @supports (object-fit: cover) (# video-bg> video (gore: 0; lijevo: 0; širina: 100%; visina: 100%; prilagođavanje objekta: naslovnica;))
Kao što možete vidjeti iz koda, pozadina je postavljena na cijelu stranicu, a slika (okvir iz istog videozapisa) postavljena je kao rezervna pozadina. Kao posljednje sredstvo, upotrijebit će se boja pozadine # 94a233.
Kod takođe sadrži @supports direktivu koja proverava podržava li pregledač svojstvo object-fit. Ako je tako, pozadina je postavljena na pokrivanje i proporcionalno se prikazuje na različitim veličinama ekrana.
Prema caniuse.com, objekt-fit svojstvo trenutno podržavaju svi preglednici osim Internet Explorera, Firefoxa 31-35, safari 7, iOS Safari 7.1 i Android preglednika 4.1-4.4.
Veliki videozapisi u pozadini web stranica prilično su popularan trend u web dizajnu. Pametno primijenjeni videozapisi mogu web stranicu učiniti dramatičnijom i privlačnijom za korisnike.
Osim toga, video pozadine se mogu reproducirati glatko i bez "kočnica", za razliku od pozadina stvorenih pomoću JavaScript -a, koje zahtijevaju učitavanje određenog koda i slika prije nego što korisnik vidi rezultat animacije.
Postoje kompanije poput Powerhouse -a ili Adidasa koje koriste video kao pozadinu web stranice za prenošenje određene poruke ili priče o proizvodu ili usluzi korisnicima.
Iako je najpopularniji način stvaranja video pozadine korištenje HTML5 video tag, uz neke CSS parametre, trebali biste obratiti pažnju i na alternativne video izvore, na primjer, YouTube. U ovom slučaju ne morate brinuti o sporom odzivu servera, jer će zahtjev biti poslan direktno na YouTube.
U ovom članku ću vam pokazati kako možete izgraditi sjajnu web stranicu koja koristi YouTube videozapise kao pozadinu. Koristit ćemo jQuery.mb.YTPlayer.js za uređivanje i kontrolu izgleda našeg videozapisa. Pa krenimo!
Preuzmite izvore
Demo
Trebat će vam:
// Veliki pozadinski sadržaj ovdje
Sada morate popuniti svaki odjeljak sadržajem. U odjeljak velike pozadine i male pozadine postavite razred uzorak, kako bismo stvorili laganu teksturu u našem videu. Takođe morate dodati h1, h2, odlomak i dugme.
YOUTUBE
POZADINA VIDEO
Želim ovo naučitiStavite bilo koji YouTube video u pozadinu web stranice
Pitate se kako dodati video u pozadinu vaše web stranice?
Lako je kao ljuštenje krušaka! Pomoću jQuery MB.YTPlayer -a, dodatka za jQuery, možete ugraditi bilo koji YouTube video u pozadinu svoje web lokacije.
Bilo koji video zapis možete lako pretvoriti u HTML pozadinu. Nema odlaganja učitavanja stranice i učitavanja servera!
Mi smo sa društvenih mreža
Koristio sam font Font Awesome za društvene ikone koje se nalaze u odjeljku odjeljak male pozadine... Zatim ćemo dodati predložak za naš video pomoću dodatka jQuery.mb.YTPlayer. Odmah nakon toga postavite sljedeći kôd .
Evo što smo koristili za prilagodbu videozapisa:
- razred player- ovu klasu koristi dodatak mb.YTPlayer
- videoURL- veza do video zapisa
- zadržavanje- CSS birač za reprodukciju video zapisa
- autoPlay- video zapis za automatsku reprodukciju
- nijem- prisutnost zvuka
- startAt- vrijeme od početka reprodukcije videozapisa
- neprozirnost- transparentnost videa
CSS
Dodajmo stilove našoj web stranici. Prije svega, definirajmo izgled html -a, body -a, paragrafa i liste s grafičkim oznakama.HTML (visina: 100%) body (font: 15px / 23px "Raleway", bez serifa; margina: 0; padding: 0; height: 100%; width: 100%; -webkit-font-smoothing: antialiased;- webkit-text-size-Adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (display: inline-block; style-list: none; padding-right : 10px;)
Omotač (z-indeks: 600; položaj: relativan). Obrazac (pozadinska slika: url (../ images / pattern.png); pozadinsko ponavljanje: ponavljanje; pozadinsko prilaganje: pomicanje; širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0). Razdjelnik (slika u pozadini: url (../ slike / razdjelnik.png); prikaz: blok; širina: 300px; visina: 35px; margina: 10px auto ) #colorize (boja: # f1c40f; font-porodica: "Lato", sans-serif; font-veličina: 40px)
Vrijeme je za stiliziranje odjeljka velike pozadine. Instaliraj z-indeks uključeno 550 i parametar overflow do skrivenih. Ovo služi kako bi se spriječilo prikazivanje YouTube sadržaja (titlovi, napomene) na našoj web stranici. Ostali stilovi potrebni su za zaglavlja, gumbe i zadanu sliku (o tome kasnije).
Velika pozadina (z-indeks: 550; poravnanje teksta: centar; visina: 100%; min-visina: 100%; položaj: relativan; preljev: skriven) .big-pozadina .big-background-kontejner (širina: 830px ; max-width: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate (-50%,-50%); -moz-transform: translate (-50%,-50%); -ms-transformacija: prevođenje (-50%,-50%); -o-transformacija: prevođenje (-50%,-50%); transformacija: prevođenje (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: uppercase; text-align : centar; margin-bottom: 22px; padding-top: 20px; display: inline-block; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: uppercase; text-decoration: none; color: #fff; background: transparent; border: 2px solid #fff; padding: 10px 14px ; kursor: pokazivač; razmak između slova: 2px; poravnavanje teksta: centar; prikaz: inline-block; -webkit-tranzicija: .4s pozadinska lakoća; -moz-tranzicija: .4s pozadinska lakoća; -o-prelazak: .4s pozadinska lakoća; prijelaz: .4s pozadinska lakoća; ) .big-background-btn: hover (color: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-repeat : bez ponavljanja; pozicija pozadine: centar u sredini; veličina pozadine: naslovnica; širina: 100%; visina: 100%; z-indeks: 0; vidljivost pozadine: skrivena)
Pređimo sada na odjeljak about-section... Konfiguriramo parametar boja pozadine na belo i padding 60px odozgo i odozdo i 20px lijevo i desno.
About-section (font-family: "Lato", sans-serif; color: # 7f8c8d; background: #fff; padding: 60px 20px) .about-section-container (text-align: center; padding-bottom: 50px) .about-section-title (font-family: "Raleway", sans-serif; font-size: 40px; background: #fff; color: # 3d566e; padding: 0 35px; margin-bottom: 22px; background-attachment: scroll; background-repeat: repeat-x; background-position: center center; text-transform: uppercase) a.about-section-btn (font-family: "Lato", sans-serif; font-size: 13px; text -transforma: velika slova; dekoracija teksta: nema; boja: # 34495e; pozadina: prozirna; granica: 2px čvrsta # 34495e; padding: 10px 14px; kursor: pokazivač; razmak između slova: 2px; poravnavanje teksta: centar; prikaz: inline-block; -webkit-tranzicija: .4s pozadinska lakoća; -moz-tranzicija: .4s pozadinska lakoća; -o-tranzicija: .4s pozadinska lakoća; prelaz: .4s pozadinska lakoća;) .about-section-btn: hover (boja: #fff; pozadina: # 34495e;)
Za odjeljak male pozadine, koji služi i kao podnožje, dodijelit ćemo širinu od 100% i parametar overflow do skrivenih. Dodaćemo i neke padding odozgo i odozdo kako bi se naš video mogao vidjeti. Na kraju, dodajmo stilove za dugmad na društvenim mrežama.
Odjeljak male pozadine (porodica fontova: "Raleway", bez serifa; padding: 100px 0; position: relative; width: 100%; overflow: hidden) .small-background-container (position: relative; text-align : centar) .small-background-title (font-size: 40px; color: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: uppercase; margin-bottom: 20px ; margin-top: 20px; position: relative; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) .socials a (color: #fff) .socials a: hover (color: # bdc3c7)
Medijski upiti
Da bi naša web stranica bila responzivna, dodajmo neke medijske upite.@medijski ekran i (max-width: 768px) (.about-section-title (height-line: 1)) @media screen and (max-width: 480px) (.big-background-title (font-size: 58px ) .small-background-title (height-line: 1) / *. player (display: none;)-> Ako želite ukloniti video bg na određenom okviru za prikaz bez dodatka * /) @medijski ekran i ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen and (max-width: 320px) (.small-background-title (font-size: 30px))
jQuery
Ajmo sad uključiti naš YouTube video. Nazovimo razred player unutar jQuery koda. Postavite sljedeći kôd prije zaključne oznake tijela i unutar oznaka .$ (function () ($ (". player"). mb_YTPlayer ();));
Rezervna opcija
Pozadinski videozapisi s YouTubea neće se reproducirati na mobilnim uređajima ili tabletima jer YouTubeova pravila to ne dopuštaju.Međutim, možemo koristiti jQuery za dodavanje zadane pozadinske slike u slučaju da preglednik otkrije da je korisnik ušao na web mjesto s mobilnog uređaja.
Ručno rješenje
Da bismo utvrdili da je korisnik prijavljen s mobilnog uređaja ili tableta, možemo sakriti element na određenoj veličini ekrana. Na primjer, želimo ukloniti video pozadinu na širokim ekranima od 480 piksela. Samo trebate dodati display: none u element playera:
@medijski ekran i (max-width: 480px) (.player (display: none;))
Što se tiče jQuery -ja, ovdje ćemo postaviti varijablu is_mobile sa parametrom false. Zatim se pobrinite da klasa player ima display: none parametre. Ako je tako, dodajte razred big-background-default-image do odjeljaka velika pozadina i odjeljak male pozadine da biste koristili zadanu pozadinsku sliku. U suprotnom se ništa neće promijeniti.
(function ($) ($ (document) .ready (function () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Ovde je uslovna skripta $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". player "). mb_YTPlayer ();)));)) (jQuery);
Rešenje sa jQuery dodatkom
Drugi način postavljanja zadane slike je pomoću dodatka jQuery device.js(http://matthewhudson.me/projects/device.js/). Ovo će pojednostaviti proces opisa uslova za različite veličine ekrana mobilnih uređaja. Pomoću ovog dodatka možemo jednostavno napisati sljedeći kod:(function ($) ($ (document) .ready (function () (//Device.js će provjeriti radi li se o tabletu ili mobilnom uređaju - http://matthewhudson.me/projects/device.js/ if (! device. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery će dodati zadanu pozadinu u željenu klasu $ (". big-background, .small- background-section "). addClass (" big-background-default-image ");)));)) (jQuery);
Ovdje sam upotrijebio metode device.mobile () i device.tablet () da biste provjerili uređaj s kojeg je korisnik prijavljen. Ako je ispunjen uvjet da se klasa dodaje big-background-default-image do odjeljka velika pozadina i odjeljak male pozadine... Inače klasa playerće ostati nepromijenjen i videozapis će se reproducirati.
Uveli smo red
Video zapisi su odličan način da svoju poruku prenesete do svoje publike. Ako se pravilno koristi, može biti moćan alat za vašu web lokaciju.Siguran sam da će s razvojem i poboljšanjem web dizajna biti sve više kreativnih ideja za korištenje videa u dizajnu web stranica. Nadam se da ste naučili koju stvar u ovom vodiču. Napišite svoja razmišljanja i komentare u komentarima.
Od prevodioca. Sa svim željama i komentarima u vezi prevoda, kontaktirajte me lično. Hvala!
Kako instalirati web lokaciju na desktop monitor?
Vjerovatno prva stvar od koje se svakom korisniku dojadi gleda pozadinu koja je instalirana na radnoj površini. Mnogi ljudi godinama gledaju zadanu sliku, čak i ako je sistem ponovo instaliran više puta. Svim korisnicima to brzo dosadi i traže odgovarajuće slike za radnu površinu. Neki korisnici preferiraju animirane pozadine. Predlažem da početnu stranicu omiljene web stranice postavite kao pozadinu (međutim, bilo koju stranicu, naravno). Sada, u danima neograničenog interneta, to je nekima ponekad vrlo, vrlo zgodno, pogotovo kad su računalo ili prijenosno računalo stalno povezani na mrežu. U svakom slučaju, to nije loša opcija. Ovaj trik se pojavio u Windows XP -u. Avaj, tu se završilo. Interaktivnih tablica više nema. Meni lično je bilo jako zanimljivo gledati ažuriranja web stranica s vijestima na mreži. Takva postavka radne površine bila bi korisna mnogim korisnicima. Ali, opet, kreatori novih verzija Windowsa odlučili su napustiti radnu površinu bez mogućnosti odražavanja interaktivne stranice. Iskreno, jako, jako žao. Lično, ponekad zaista propustim takvu priliku.
No prijeđimo s riječi na djela. Instaliranje web stranice na radnoj površini
- Desnom tipkom miša kliknite bilo koji slobodni prostor na radnoj površini
- Na dodatnom meniju koji se pojavi na radnoj površini odaberite stavku Nekretnine.
- Odaberite karticu Desktop i kliknite Prilagođavanje radne površine ...
- U izborniku Elementi radne površine sada odaberite karticu Web a zatim kliknite na dugme Stvoriti... Pa, ili odaberite stavku Moja trenutna početna stranica. U pozadini će se prikazati stranica web stranice koja je postavljena kao početna stranica u zadanom pregledniku.
U prozoru koji se pojavi samo unesite prethodno kopiranu adresu svoje omiljene web lokacije s adresne trake vašeg preglednika.
Zatvorite uzastopno otvorene dijaloške okvire, prihvatite promjene i kliknite U redu. Sada, umjesto dosadne slike, imate stranicu web stranice koja vam se sviđa i, gledajući web lokaciju na radnoj površini, možete gledati promjene na mreži u interaktivnom načinu.
