| 16.04.2015
În ultimul an, designerii de web au adoptat din ce în ce mai mult un mod ingenios de a amenaja un site web - stabilind un videoclip ca fundal al paginii. Un complot interesant sau doar o imagine „live” în fundal va decora chiar și un site obișnuit de cărți de vizită, va interesa utilizatorul și vă va încuraja să rămâneți pe site mai mult timp. Astăzi vom împărtăși cu dvs. una dintre modalitățile de a seta un fundal video pe ecran complet pentru site-ul dvs. web utilizând HTML5 și CSS.
Dacă sunteți ferm convins că doriți să setați un videoclip pentru fundal pe site-ul dvs., trebuie să știți câteva lucruri:
- Mai întâi, nu uitați că videoclipul are o greutate mare. Acest lucru poate afecta negativ viteza de încărcare a paginii, mai ales dacă utilizatorul are o conexiune lentă la Internet. Prin urmare, alege videoclipuri scurte. În cazul în care trebuie să folosiți un videoclip destul de lung, fiți pregătiți fie să lucrați la reducerea greutății acestuia, fie la faptul că va trebui să sacrificați o parte din public.
- În al doilea rând, evitați redarea automată a audio din videoclip. Folosiți fie videoclipuri fără sunet, fie adăugați posibilitatea utilizatorului de a activa sunetul singur, dacă are nevoie de el. Se consideră o formă foarte proastă să redați automat un sunet atunci când deschideți un site.
- În al treilea rând, trebuie să aveți grijă de compatibilitatea cross-browser-ului și de afișarea și redarea corectă a videoclipurilor pe toate dispozitivele, precum și să oferiți o alternativă la videoclip (pentru acele cazuri dacă nu va fi redat). Mai jos, în exemplul nostru, vă vom arăta cum să faceți acest lucru.
- Și în al patrulea rând, merită să ne gândim cu atenție dacă un videofon este adecvat pe site-ul pe care doriți să îl instalați, deoarece este foarte ușor să treceți linia dintre originalitatea și inutilitatea acestei întreprinderi. Videoclipul nu trebuie să distragă în niciun caz utilizatorul de obiectivul său principal, motiv pentru care a venit pe site. Când setați un fundal video sub conținutul textului, asigurați-vă că verificați cât de ușor de citit a devenit textul. De exemplu, se poate îmbina cu fundalul la un anumit moment al redării videoclipului (text alb pe fundal alb, negru pe negru etc.).
1. HTML
Pentru exemplul nostru, am realizat un videoclip cu o rezoluție de 1920 × 1080, cu o lungime de 15 secunde și cântărind puțin peste 3 MB. În interiorul blocului
Pentru etichetă
- width - lățimea zonei pentru redarea videoclipului;
- înălțime - înălțimea zonei;
- redare automată - redare video automată;
- buclă - video în buclă;
- poster - o imagine care este afișată în locul unui videoclip în timp ce se încarcă sau nu este disponibilă.
În continuare, am scris două etichete
2. CSS
Foaia noastră de stil de fundal arată astfel:
# video-bg (poziție: fixă; sus: 0; dreapta: 0; jos: 0; stânga: 0; depășire: ascuns; z-index: 1; fundal: url (bg / daisy-stock-poster.jpg) nu -repeat # 94a233; background-size: cover;) # video-bg> video (poziție: absolut; sus: 0; stânga: 0; min-lățime: 100%; min-înălțime: 100%; lățime: automată; înălțime : auto;) @supports (object-fit: cover) (# video-bg> video (sus: 0; stânga: 0; lățime: 100%; înălțime: 100%; fit-obiect: cover;))
După cum puteți vedea din cod, fundalul este setat pe întreaga pagină și o imagine (un cadru din același videoclip) este setată ca fundal alternativ. În ultimă instanță, va fi utilizată culoarea de fundal # 94a233.
Codul conține, de asemenea, directiva @supports, care verifică dacă browserul acceptă proprietatea de potrivire a obiectului. Dacă da, fundalul este setat să acopere și este afișat proporțional la diferite dimensiuni ale ecranului.
Conform caniuse.com, proprietatea de potrivire a obiectului este acceptată în prezent de toate browserele, cu excepția Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 și Android Browser 4.1-4.4.
Videoclipurile mari în fundalul site-urilor web sunt o tendință destul de populară în designul web. Videoclipurile aplicate inteligent pot face un site web mai dramatic și mai atrăgător pentru utilizatori.
În plus, fundalurile video pot fi redate fără probleme și fără „frâne”, spre deosebire de fundalurile create cu JavaScript, care necesită încărcarea anumitor coduri și imagini înainte ca utilizatorul să vadă rezultatul animației.
Există companii precum Powerhouse sau Adidas care folosesc video ca fundal al unui site web pentru a transmite utilizatorului un mesaj sau o poveste specifică despre un produs sau serviciu.
Deși cel mai popular mod de a crea un fundal video este utilizarea HTML5 video etichetă împreună cu câțiva parametri CSS, ar trebui să acordați atenție și surselor video alternative, de exemplu, YouTube. În acest caz, nu trebuie să vă faceți griji cu privire la răspunsul lent al serverului, deoarece solicitarea va fi trimisă direct la YouTube.
În acest articol, vă voi arăta cum puteți crea un site web interesant, care utilizează videoclipuri YouTube ca fundal. Vom folosi jQuery.mb.YTPlayer.js pentru a edita și controla aspectul videoclipului nostru. Deci sa începem!
Descărcați sursele
Demo
Vei avea nevoie:
// Conținut mare de fundal aici
Acum trebuie să completați fiecare secțiune cu conținut. În secțiunea fundal mare și fundal mic, plasați clasa model, pentru a crea o textură ușoară în videoclipul nostru. De asemenea, trebuie să adăugați h1, h2, paragraf și buton.
YOUTUBE
VIDEO DE FOND
Vreau să învăț astaPuneți orice videoclip YouTube pe fundalul site-ului
Vă întrebați cum să adăugați videoclipuri pe fundalul site-ului dvs. web?
Este la fel de ușor ca decojirea pere! Cu jQuery MB.YTPlayer, un plugin jQuery, puteți încorpora orice videoclip YouTube în fundalul site-ului dvs.
Puteți transforma cu ușurință orice videoclip într-un fundal HTML. Nu există întârzieri în încărcarea paginii și încărcarea serverului!
Suntem din rețelele de socializare
Am folosit fontul Font Awesome pentru pictogramele sociale, care se află în secțiune mic-fundal-secțiune... Apoi vom adăuga un șablon pentru videoclipul nostru folosind pluginul jQuery.mb.YTPlayer. Plasați următorul cod imediat după .
Iată ce am folosit pentru a personaliza videoclipul:
- clasă jucător- această clasă este utilizată de plugin mb.YTPlayer
- videoURL- link către video
- izolare- Selector CSS în care să redați videoclipul
- Redare automata- redare automată a videoclipului
- mut- prezența sunetului
- incepe la- timpul de la care începeți redarea videoclipului
- opacitate- transparență video
CSS
Să adăugăm stiluri pe site-ul nostru. În primul rând, să definim aspectul html, corp, etichete de paragraf și listă cu marcatori.Html (înălțime: 100%) corp (font: 15px / 23px "Raleway", sans-serif; margine: 0; umplutură: 0; înălțime: 100%; lățime: 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; list-style: none; padding-right : 10 px;)
Wrapper (z-index: 600; poziție: relativă) .pattern (background-image: url (../ images / pattern.png); background-repeat: repetare; background-attachment: scroll; lățime: 100%; înălțime: 100%; poziție: absolută; sus: 0; stânga: 0) .divider (background-image: url (../ images / divider.png); afișaj: bloc; lățime: 300px; înălțime: 35px; marjă: 10px auto ) #colorize (color: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)
Este timpul să stilizați secțiunea cu fundal mare. Instalare indexul z pe 550 și parametru revărsare la ascuns. Aceasta pentru a preveni afișarea conținutului YouTube (subtitrări, adnotări) pe site-ul nostru web. Restul stilurilor sunt necesare pentru anteturi, butoane și imaginea implicită (mai multe despre asta mai târziu).
Fundal mare (index-z: 550; aliniere text: centru; înălțime: 100%; înălțime min .: 100%; poziție: relativă; depășire: ascuns) .big-background .big-background-container (lățime: 830px ; lățime maximă: 100%; afișaj: bloc în linie; poziție: absolut; sus: 50%; stânga: 50%; -webkit-transform: traducere (-50%, - 50%); -moz-transform: traducere (-50%, - 50%); -ms-transform: translate (-50%, - 50%); -o-transform: translate (-50%, - 50%); transform: translate (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: majuscul; text-align : centru; margine-jos: 22px; padding-top: 20px; afișare: bloc în linie; atașare de fundal: derulare; fundal-repetare: repetare-x; fundal-poziție: centru sus) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: majuscule; text-decoration: none; culoare: #fff; fundal: transparent; border: 2px solid #fff; padding: 10px 14px ; cursor: pointer; spațierea literelor: 2 px; text-align: centru; afișaj: bloc în linie; -webkit-tranziție: ușurință în fundal .4s; -moz-tranziție: ușurință în fundal .4s; -o-tranziție: .4s ușurință în fundal; tranziție: ușurință în fundal .4s; ) .big-background-btn: hover (culoare: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-repeat : fără repetare; poziția fundalului: centrul centrului; dimensiunea fundalului: capac; lățimea: 100%; înălțimea: 100%; indexul z: 0; vizibilitatea față: ascuns)
Acum să trecem la secțiune despre secțiune... Să configurăm parametrul culoare de fundal la alb și căptușeală 60 px sus și jos și 20 px stânga și dreapta.
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 -transform: majuscule; decorare text: niciunul; culoare: # 34495e; fundal: transparent; margine: 2px solid # 34495e; umplutură: 10px 14px; cursor: pointer; spațierea literelor: 2px; inline-block; -webkit-transition: .4s ușor de fundal; -moz-transition: .4s ușor de fundal; -o-transition: .4s ușor de fundal; transition: .4s ușor de fundal;) .about-section-btn: hover (culoare: #fff; fundal: # 34495e;)
Pentru secțiunea de fundal mic, care servește și ca subsol, vom atribui o lățime de 100% și un parametru revărsare la ascuns. Vom adăuga și câteva căptușeală sus și jos, astfel încât videoclipul nostru să poată fi văzut. În cele din urmă, să adăugăm stiluri pentru butoanele de socializare.
Small-background-section (font-family: "Raleway", sans-serif; padding: 100px 0; position: relative; width: 100%; overflow: hidden) .small-background-container (poziție: relativă; text-align : centru) .small-background-title (font-size: 40px; culoare: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: uppercase; margin-bottom: 20px ; margin-top: 20px; poziție: relativă; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) .sociale a (culoare: #fff). bdc3c7)
Interogări media
Pentru a face site-ul nostru receptiv, să adăugăm câteva interogări media.@media screen and (max-width: 768px) (.about-section-title (line-height: 1)) @media screen and (max-width: 480px) (.big-background-title (font-size: 58px) ) .small-background-title (line-height: 1) / *. player (display: none;) -> Dacă doriți să eliminați videoclipul bg dintr-o anumită fereastră video fără plugin * /) @media ecran și ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen și (max-width: 320px) (.small-background-title (font-size: 30px))
jQuery
Acum să pornim videoclipul nostru de pe YouTube. Să chemăm clasa jucătorîn interiorul codului jQuery. Plasați următorul cod înainte de eticheta de închidere a corpului și în interiorul etichetelor .$ (function () ($ (". player"). mb_YTPlayer ();));
Opțiune de rezervă
Videoclipurile de fundal de pe YouTube nu vor fi redate pe dispozitive mobile sau tablete, deoarece politicile YouTube nu le permit acest lucru.Cu toate acestea, putem folosi jQuery pentru a adăuga o imagine de fundal implicită în cazul în care browserul detectează că utilizatorul a intrat pe site de pe un dispozitiv mobil.
Soluție manuală
Pentru a determina dacă utilizatorul este conectat de pe un dispozitiv mobil sau tabletă, putem ascunde elementul pe o anumită dimensiune a ecranului. De exemplu, dorim să eliminăm fundalul video pe ecrane late de 480 px. Trebuie doar să adăugați display: none la elementul player:
@media ecran și (lățime maximă: 480px) (.player (afișaj: nici unul;))
În ceea ce privește jQuery, aici vom seta o variabilă este_mobil cu parametrul false. Apoi, asigurați-vă că clasa jucător are afișaj: niciun parametru. Dacă da, adăugați clasa fundal mare-imagine-implicită la secțiuni fundal mareși mic-fundal-secțiune pentru a utiliza imaginea de fundal implicită. În caz contrar, nimic nu se va schimba.
(function ($) ($ (document). ready (function () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Script condițional aici $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". player "). mb_YTPlayer ();)));)) (jQuery);
Soluție cu plugin jQuery
O altă modalitate de a seta imaginea implicită este folosirea pluginului jQuery device.js(http://matthewhudson.me/projects/device.js/). Acest lucru va simplifica procesul de descriere a condițiilor pentru diferite dimensiuni de ecran ale dispozitivelor mobile. Folosind acest plugin, putem scrie pur și simplu următorul cod:(function ($) ($ (document) .ready (function () (//Device.js va verifica dacă este Tablet sau Mobile - http://matthewhudson.me/projects/device.js/ if (! device. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery va adăuga fundalul implicit la clasa preferată $ (". big-background, .small- background-section "). addClass (" big-background-default-image ");)));)) (jQuery);
Aici am folosit metodele device.mobile ()și device.tablet () pentru a verifica dispozitivul de pe care este conectat utilizatorul. Dacă se îndeplinește condiția, se adaugă clasa fundal mare-imagine-implicită la secțiune fundal mareși mic-fundal-secțiune... Altfel clasa jucător va rămâne neschimbată și videoclipul va fi redat.
Am pus în ordine
Videoclipurile sunt o modalitate excelentă de a transmite mesajul dvs. către publicul dvs. Poate fi un instrument puternic pentru site-ul dvs. dacă este utilizat corect.Sunt sigur că pe măsură ce designul web se dezvoltă și se îmbunătățește, vor exista idei din ce în ce mai creative pentru utilizarea videoclipurilor în proiectarea site-urilor web. Sper că ați învățat ceva sau două în acest tutorial. Scrieți-vă gândurile și comentariile în comentarii.
De la un traducător. Cu toate dorințele și comentariile referitoare la traducere, vă rugăm să mă contactați personal. Mulțumiri!
Cum se instalează un site pe un monitor desktop?
Probabil că primul lucru de care se satură orice utilizator este să se uite la tapetul instalat pe desktop. Mulți oameni privesc în mod constant imaginea implicită de ani de zile, chiar dacă sistemul a fost reinstalat de mai multe ori. Toți utilizatorii se plictisesc rapid de el și caută imagini adecvate pentru desktop. Unii utilizatori preferă imagini de fundal animate. Vă sugerez să setați pagina de pornire a site-ului dvs. preferat ca tapet (totuși, orice pagină, desigur). Acum, în zilele internetului nelimitat, acest lucru este uneori foarte, foarte convenabil pentru unii, mai ales atunci când un computer sau laptop este conectat constant la rețea. În orice caz, nu este o opțiune proastă. Acest truc a apărut în Windows XP. Vai, s-a terminat acolo. Tabelele interactive au dispărut. Personal, a fost foarte interesant pentru mine să urmăresc actualizările site-urilor de știri on-line. O astfel de configurare desktop ar fi utilă pentru mulți utilizatori. Dar, din nou, creatorii de noi versiuni de Windows au decis să părăsească desktopul fără posibilitatea de a reflecta o pagină interactivă. Sincer, foarte, foarte rău. Personal, uneori îmi lipsește cu adevărat o astfel de oportunitate.
Dar să trecem de la cuvinte la fapte. Instalarea paginii web pe desktop
- Faceți clic dreapta pe oricare dintre spațiul liber de pe desktop
- În meniul suplimentar care apare pe desktop, selectați elementul Proprietăți.
- Să selectăm fila Desktop și să facem clic Personalizare desktop ...
- În meniul Elemente desktop, selectați acum fila Webși apoi faceți clic pe buton Crea... Ei bine, sau alegeți un articol Pagina mea de pornire actuală. Fundalul va afișa pagina site-ului, care este setată ca pagina de pornire în browserul implicit.
În fereastra care apare, introduceți adresa copiată anterior a site-ului dvs. preferat din bara de adrese a browserului.
Închideți casetele de dialog deschise succesiv, acceptând modificările și făcând clic pe OK. Acum, în loc de o imagine plictisitoare, aveți o pagină a site-ului web care vă place și, uitându-vă la site-ul de pe desktop, puteți urmări modificările din rețea într-un mod interactiv.
