Kas ir iegults tīmekļa fons. Atsaucīgs viss fona attēls ar CSS

Populārā Zadarma pakalpojuma savienošana ar 1C tagad ir dažu minūšu jautājums. Pietiek, lai pievienotu gatavu paplašinājumu, lai integrētu 1C un Zadarma. Uzstādīšanu var viegli veikt jebkurš darbinieks, pat apkopēja, tīrīšanas speciāliste Maša tante.

Pirmkārt, mēs koncentrējāmies uz mazajiem uzņēmumiem, kas aktīvi izmanto Zadarma PBX un 1C konfigurāciju: Maza uzņēmuma vadība 1.6.

Kā tas bija agrāk

Lai integrētos ar Zadarma, jums bija jāizmanto īpašs 1C iebūvēts zvanītājs - tā sauktais SIP fons. Šī opcija bija piemērota vairākiem “ja”:

  • ja 1C ir instalēts lokālajā datorā, nevis kaut kur termināļa serverī
  • ja lietotājs piekrīt galda tālruņa vietā izmantot 1C zvanītāju

Kopumā, ja visi “ja” piekrita, integrācija bija iespējama.

Kā tas kļuva tagad

Tagad, lai integrētu 1C un Zadarma, vispār nav svarīgi, kura gala ierīce tiek izmantota zvaniem. Tas var būt jebkas:

  • galda tālrunis
  • softphone, kas instalēts OS
  • tīmekļa fons, kas darbojas pārlūkprogrammā

Zadarmas 1C paplašinājums mijiedarbojas ar API, nevis zvanītāju. Tāpēc nav svarīgi, kā tieši lietotājs zvanīs.

Viegli uzstādīt

Uzstādīšana sastāv no 1 soļa. Parādīsim tikai 2 ekrānuzņēmumus.

Izvietošana mājas lapā

Zadarmas telefonijas panelis automātiski parādās mājas lapā. Ja pēkšņi lietotājam tas nav vajadzīgs, viņš var vienkārši noņemt atzīmi no izvēles rūtiņas izvēlnē "Skats" - "Pielāgot sākuma lapu".

Viegli uzstādīt

Mēs ņemam API atslēgas no Zadarmas personīgā konta

un ievietojiet tos 1C

Un, protams, vietnē Simpleit.io mēs ievadām konta pieteikumvārdu / paroli.

Tieši tā, tagad jūsu 1C ir savienots ar Zadarmu.

Zvani uz klikšķi 1C

Visur, kur mēs redzam “tālruņa” ikonu, mēs varam uz tās noklikšķināt, un Zadarma sāks sastādīt numuru.

Rekvizīti "Kontaktinformācija" ir daudzos dokumentu sarakstos, uzziņu grāmatās - jums vairs nav jāskrien uz klienta karti, lai piezvanītu. Piemēram, jūs varat zvanīt tieši no pasūtījumu, rēķinu, palīgmateriālu saraksta

Klienta karte ienākošajam zvanam

Funkcija, kas faktiski ir kļuvusi par standarta un obligātu, integrējot 1C un PBX. Lai gan jāatzīmē, ka tas ne vienmēr ir pieprasīts, tāpēc to var izslēgt telefonijas paneļa iestatījumos.

Zvanu reģistrācija ar notikuma dokumentu

Tāpat jūs varat kontrolēt nepieciešamību automātiski izveidot dokumentu "Notikums-tālruņa zvans". Izmantojot šo dokumentu, ir ērti atstāt komentārus par zvanu.

Un pats galvenais, pamatojoties uz šo dokumentu, jūs varat ievadīt pasūtījumu, rēķinu un tādējādi būs skaidri redzamas attiecības starp zvanu un pārdošanu.

Tālruņa zvana dokumentam varat pievienot atgādinājumu, kas ir ļoti ērti, ja darbinieks apsolīja vēlāk piezvanīt klientam.

PBX zvanu vēsture

Zvanu vēsture, protams, ir ļoti svarīga lieta. Paplašinājums 1C un Zadarma integrācijai nodrošina vairākas iespējas darbam ar vēsturi.

Piemēram, lietotājs vēlas pats apskatīt stāstu. Līdzīgi kā pēdējos zvanos mūsu mobilajā telefonā. Šo vēsturi var apskatīt, mājaslapā atverot cilni Vēsture.

Ļoti bieži es vēlos redzēt konkrēta klienta vēsturi, kontaktpersona vai privātpersona. Klienta gadījumā mums ir jāredz gan zvani uz paša darījuma partnera numuriem, gan visu viņa kontaktpersonu numuri.

Zvanu vēsturi ar klienta izvēli var apskatīt tieši viņa kartē. Vēsture ietver zvanus no klienta un visiem viņa kontaktiem. Ja numurs pieder pašam darījuma partnerim, lauks "Kontaktpersona" netiek aizpildīts.

No autora:Šajā apmācībā mēs iepazīstināsim jūs ar vienkāršu fona attēla izveides paņēmienu, kas pilnībā izstiepsies visā pārlūkprogrammas skata platumā. Šim nolūkam mums ir nepieciešams fona lieluma CSS rekvizīts; JavaScript nav nepieciešams.

Atsaucīgu visu fona attēlu piemēri

Mūsdienās ir kļuvis diezgan populārs izmantot milzīgu fotoattēlu kā fonu, kas aizņem visu tīmekļa lapu. Šeit ir piemēri vairākām vietnēm, kurās ir iestatīti veseli fona attēli:

Ja vēlaties nākamajā tīmekļa projektā sasniegt līdzīgu rezultātu, tad šis raksts ir tas, kas jums nepieciešams.

Pamatprincipi

Šeit ir mūsu rīcības plāns.

Izmantojiet fona lieluma rekvizītu, lai pilnībā aizpildītu skatvietu

Fona lieluma CSS rekvizīts ir iestatīts, lai segtu. Vāka vērtība liek pārlūkam automātiski un proporcionāli mērogot fona attēla platumu un augstumu tā, lai tas vienmēr būtu vienāds vai lielāks par skata punkta platumu / augstumu.

Izmantojiet multivides vaicājumu, lai apstrādātu mazus fona attēlus mobilajām ierīcēm

Lai uzlabotu lapu ielādes ātrumu mazos ekrānos, mēs izmantosim multivides vaicājumu, lai apstrādātu mūsu fona attēla mazāku versiju. Tas nav obligāti. Šī tehnika darbosies bez tā. Bet kāpēc ir laba ideja mobilajām ierīcēm izmantot nelielu fona attēlu?

Demonstrācijā izmantotais attēls ir 5500x3600 pikseļi. Šī izšķirtspēja ir pietiekama lielākajai daļai pašlaik tirgū esošo platekrāna datoru monitoru. Bet šim nolūkam jums ir jāapstrādā 1,7 MB fails.

Tik milzīga papildu slodze tikai fona fotoattēla ievietošanas labad tik un tā neko nedos. Un, protams, tas būs ārkārtīgi slikti savienojumiem, izmantojot mobilo internetu. Un arī šāda izšķirtspēja nav nepieciešama ierīcēm ar nelielu ekrānu (vairāk par to vēlāk). Apskatīsim visu procesu.

Html

Atzīmēšanai jums ir nepieciešams tikai šis:

Mēs piešķirsim fona attēlu ķermeņa elementam, lai attēls vienmēr aizpildītu visu pārlūkprogrammas skatu.

Tomēr šī metode derēs arī jebkuram bloka līmeņa elementam (piemēram, divam vai veidlapai). Ja kastes platums un augstums ir mainīgs, fona attēls vienmēr tiks mērogots, lai aizpildītu visu konteineru.

CSS

Korpusa elementam mēs iestatījām šādus stilus:

pamatteksts / * / fona atkārtojums: neatkārtot; / * Fona attēls ir fiksēts skata logā, tāpēc tas nemainās, ja satura augstums ir lielāks par attēla augstumu * / fona pielikums: fiksēts; / * Tas ir tas, kas ļauj fona attēls, lai pielāgotos konteinera izmēram * / fona izmērs: vāks; / * Iestata fona krāsu, kas jāparāda, kamēr tiek ielādēts fona attēls * / fona krāsa: # 464646;)

ķermenis (

/ * Ceļš uz attēlu * /

fons - attēls: url (attēli / fons - foto.jpg);

/ * Fona attēls vienmēr ir centrēts vertikāli un horizontāli * /

/ * Fona attēls neatkārtojas * /

fons - atkārtot: nē - atkārtot;

/ * Fona attēls ir fiksēts skata logā, tāpēc tas nemainās, ja satura augstums ir lielāks par attēla augstumu * /

/ * Tas ļauj fona attēlam pielāgoties konteinera izmēram * /

fons - izmērs: vāks;

/ * Iestata fona krāsu, kas jāparāda, kamēr tiek ielādēts fona attēls * /

fons - krāsa: # 464646;

Vissvarīgākais īpašuma / vērtības pāris, kam jāpievērš uzmanība:

fona izmērs: vāks;

fons - izmērs: vāks;

Šeit sākas maģija. Šis rekvizītu / vērtību pāris liek pārlūkprogrammai proporcionāli mērogot fona attēlu, t.i. tā, lai tā platums un augstums būtu vienāds vai lielāks par elementa platumu / augstumu (mūsu gadījumā tas ir ķermeņa elements).

Tomēr šim rekvizītu / vērtību pārim ir viena problēma: ja fona attēls ir mazāks par pamattekstu - tas notiks augstas izšķirtspējas ekrānos un / vai ja lapā ir milzīgs satura daudzums - pārlūks neizbēgami tuvinās iekšā attēlā. Un, kā mēs zinām, palielinot bitkartes izmēru, samazinās attēla kvalitāte (citiem vārdiem sakot, notiek pikselēšana).

Attēla izmēra palielināšana no sākotnējā izmēra ietekmē attēla kvalitāti. Paturiet to prātā, izvēloties piemērotu attēlu. Demonstrācijā tiek izmantots milzīgs 5500x3600 pikseļu fotoattēls platekrāna monitoriem, tāpēc, lai radītu kvalitātes izkropļojumus, būs nepieciešams ļoti liels ekrāns. Ejam tālāk. Lai saglabātu fona attēlu skata centra centrā, mēs pievienojam:

fona stāvoklis: centra centrs;

fons - stāvoklis: centra centrs;

Šis ieraksts novieto fonu uz koordinātu ass skata punkta centrā. Tālāk mums ir jādefinē, kas notiek, ja satura augstums pārsniedz redzamo skata laukuma augstumu. Kad tas notiek, parādās ritjosla.

Šajā gadījumā mums ir jāpārliecinās, ka fona attēls paliek sākotnējā stāvoklī pat tad, kad lietotājs ritina lapu uz leju. Šādā situācijā attēls vai nu beigsies, ritinot, vai arī pārvietosies, ritinot (kas lietotājam var būt ļoti traucējošs). Lai labotu fonu, mēs iestatījām fona pielikuma rekvizītu uz fiksētu.

fona stiprinājums: fiksēts;

fons - pielikums: fiksēts;

Demonstrācijā es pievienoju funkciju "ielādēt saturu", lai jūs varētu redzēt, kas notiek, kad pārlūkprogrammā tiek parādīta ritjosla, kad fona pielikuma rekvizīts ir iestatīts kā fiksēts. Varat arī lejupielādēt demonstrāciju un spēlēt ar pozicionēšanas rekvizītu vērtībām (piemēram, fona pielikumu un fona pozīciju), lai redzētu, kā tas ietekmē lapas ritināšanu un fona attēlu. Pārējās īpašuma vērtības ir diezgan pašsaprotamas.

Īsā CSS

Man ir sīki izklāstīti fona rekvizīti, lai tos būtu vieglāk izskaidrot. Saīsinātais apzīmējums būs arī līdzvērtīgs:

pamatteksts (fons: url (background-photo.jpg) centra centra vāks bez atkārtošanas fiksēts;)

ķermenis (

fons: url (fons - foto.jpg) centra centra vāks nē - atkārtots fiksēts;

Viss, kas jums jādara, ir mainīt url vērtību, lai norādītu uz fona attēla ceļu.

Pēc izvēles: multivides vaicājums maziem ekrāniem

Maziem ekrāniem es izmantoju Photoshop, lai proporcionāli samazinātu sākotnējo fona attēlu līdz 768 x 505 pikseļiem, un es arī izmantoju Smush.it, lai nedaudz samazinātu izmēru. Tas samazināja faila lielumu no 1741 KB līdz 114 KB. Tie. attēla izmērs samazināts par 93%.

Lūdzu, nepārprotiet mani, 114 KB joprojām ir diezgan daudz tīri estētiska dizaina elementam. Ņemot vērā papildu 114 KB pieskaitāmās izmaksas, es izmantotu šādu failu tikai tad, ja redzētu iespēju ievērojami uzlabot lietotāja pieredzi (UX). šobrīd ievērojama daļa interneta trafika nāk no mobilajām ierīcēm fons - attēls: url (attēli / fons - foto - mobilās ierīces. jpg);

Multivides vaicājumam ir maksimālais platuma ierobežojums: 767 pikseļi, kas nozīmē, ka, ja pārlūkprogrammas skata logs ir lielāks par 767 pikseļiem, tiks ielādēts liels fona attēls.

Šī multivides vaicājuma izmantošanas trūkums ir tāds, ka, mainot pārlūkprogrammas loga platumu, piemēram, no 1200 pikseļiem uz 640 pikseļiem (vai otrādi), jūs uzreiz redzēsiet brīdi, kad tiek ielādēts mazs vai liels fona attēls.

Turklāt, ņemot vērā to, ka dažas ierīces ar mazu ekrānu var parādīt vairāk pikseļu - piemēram, iPhone 5 ar tīklenes displeju spēj parādīt 1136x640 pikseļu izšķirtspēju - mazais fona attēls tiks pikselēts.

Apkopojot

Jūs varat apskatīt jaunāku avota koda versiju no šīs apmācības vietnē GitHub. Es varu brīdināt tikai par vienu lietu: lūdzu, izmantojiet šo tehniku ​​piesardzīgi, jo lieli faili var nopietni sabojāt UX, it īpaši, ja galalietotājs izmanto lēnu un neuzticamu interneta savienojumu. Tas ir vēl viens iemesls, kāpēc jums jāizvēlas piemērota fona krāsa, lai lietotājs varētu lasīt saturu, kamēr tiek ielādēts fona attēls.

Lieli videoklipi vietņu fonā ir diezgan populāra tīmekļa dizaina tendence. Gudri piemēroti videoklipi var padarīt vietni dramatiskāku un pievilcīgāku lietotājiem.

Turklāt video fonus var atskaņot vienmērīgi un bez "bremzēm", atšķirībā no fona, kas izveidots, izmantojot JavaScript, un ir nepieciešams ielādēt noteiktu kodu un attēlus, pirms lietotājs redz animācijas rezultātu.

Ir tādi uzņēmumi kā Powerhouse vai Adidas, kas izmanto video kā vietnes fonu, lai lietotājam nodotu konkrētu ziņojumu vai stāstu par produktu vai pakalpojumu.

Lai gan vispopulārākais video fona izveides veids ir HTML5 izmantošana video kopā ar dažiem CSS parametriem, jums jāpievērš uzmanība arī alternatīviem video avotiem, piemēram, YouTube. Šajā gadījumā jums nav jāuztraucas par lēnu servera reakciju, jo pieprasījums tiks nosūtīts tieši pakalpojumam YouTube.

Šajā rakstā es jums parādīšu, kā jūs varat izveidot foršu vietni, kurā kā fons tiek izmantoti YouTube videoklipi. Mēs izmantosim jQuery.mb.YTPlayer.js, lai rediģētu un kontrolētu mūsu videoklipa izskatu. Tātad, sāksim!

Lejupielādēt avotus
Demo

Jums būs nepieciešams:

// Lielais fona saturs šeit

// Par sadaļas saturu šeit // Neliela fona sadaļas saturs šeit

Tagad jums ir jāaizpilda katra sadaļa ar saturu. Lielā un mazā fona sadaļā ievietojiet klasi modelis, lai mūsu videoklipā izveidotu vieglu tekstūru. Jums arī jāpievieno h1, h2, rindkopa un poga.

YOUTUBE

PAMATVIDEO

Es gribu to iemācīties

Ievietojiet jebkuru YouTube videoklipu vietnes fonā

Domājat, kā pievienot video savas vietnes fonam?
Tas ir tikpat vienkārši kā bumbieru lobīšana! Izmantojot jQuery MB.YTPlayer, spraudni jQuery, jūs varat iegult jebkuru YouTube videoklipu savas vietnes fonā.
Jūs varat viegli pārvērst jebkuru video par HTML fonu. Nav kavēšanās ar lapas ielādi un servera ielādi!

Lejupielādējiet spraudni tūlīt

Mēs esam no sociālajiem tīkliem


Es izmantoju fontu Font Awesome sociālajām ikonām, kas atrodas sadaļā neliela fona sadaļa... Pēc tam mēs pievienosim sava videoklipa veidni, izmantojot spraudni jQuery.mb.YTPlayer. Tūlīt pēc tam ievietojiet šādu kodu .

Lūk, ko mēs izmantojām, lai pielāgotu videoklipu:

  • klase spēlētājs- šo klasi izmanto spraudnis mb. YTPlayer
  • videoURL- saite uz video
  • ierobežošana- CSS atlasītājs, kurā atskaņot videoklipu
  • automātiskā atskaņošana- automātiski atskaņot video
  • izslēgt skaņu- skaņas klātbūtne
  • startAt- laiks, no kura jāsāk video atskaņošana
  • necaurredzamība- video caurspīdīgums

CSS

Pievienosim savai vietnei stilus. Vispirms definēsim html, pamatteksta, rindkopu tagu un aizzīmju saraksta izskatu.

Html (augstums: 100%) pamatteksts (fonts: 15 pikseļi / 23 pikseļi "Raleway", bez sērijas; malu: 0; polsterējums: 0; augstums: 100%; platums: 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 pikseļi;)

Iesaiņotājs (z indekss: 600; pozīcija: relatīvs). Raksts (fona attēls: url (../ attēli / raksts.png); fona atkārtojums: atkārtot; fona pielikums: ritiniet; platums: 100%; augstums: 100%; pozīcija: absolūta; augšējā: 0; pa kreisi: 0). Dalītājs (fona attēls: url (../ images / divider.png); displejs: bloks; platums: 300 pikseļi; augstums: 35 pikseļi; mala: 10 pikseļi automātiski ) #colorize (color: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)

Ir pienācis laiks veidot liela fona sadaļu. Uzstādīt z-indekss uz 550 un parametrs pārplūdes uz slēptu. Tas ir paredzēts, lai novērstu YouTube satura (subtitru, anotāciju) parādīšanu mūsu vietnē. Pārējie stili ir nepieciešami galvenēm, pogām un noklusējuma attēlam (vairāk par to vēlāk).

Liels fons (z indekss: 550; text-align: center; augstums: 100%; min-augstums: 100%; pozīcija: relatīvs; pārplūde: slēpta). Liels fons .big-background-container (platums: 830 pikseļi ; maksimālais platums: 100%; displejs: rindas bloks; pozīcija: absolūta; augšējā: 50%; pa kreisi: 50%; -webkit-transform: tulkot (-50%,-50%); -moz-transform: tulkot (-50%,-50%); -ms-transform: tulkot (-50%,-50%); -o-transform: tulkot (-50%,-50%); transformēt: tulkot (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: lielie burti; text-align : centrs; mala-apakšā: 22 pikseļi; polsterējums-augšā: 20 pikseļi; displejs: rindas bloks; fona pielikums: ritiniet; fona atkārtojums: atkārtojiet x; fona pozīcija: augšējais centrs) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: lielie burti; text-decoration: none; color: #fff; background: caurspīdīgs; border: 2px solid #fff; polsterējums: 10px 14px ; kursors: rādītājs; burtu atstarpes: 2 pikseļi; text-align: center; displejs: inline-block; -Webkit-pāreja: .4s fona vieglumu; -moz-pāreja: .4s fona vieglums; -o-pāreja: .4s fona vieglums; pāreja: .4s fona vieglums; ) .big-background-btn: virziet kursoru (krāsa: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (fons: url (../ images / sunset.jpg); background-pakartot : neatkārtot; fona stāvoklis: centra centrs; fona izmērs: vāks; platums: 100%; augstums: 100%; z indekss: 0; aizmugures redzamība: slēpta)

Tagad pāriesim pie sadaļas par sadaļu... Konfigurēsim parametru fona krāsa uz baltu un polsterējums 60 pikseļi augšpusē un apakšā un 20 pikseļi pa kreisi un pa labi.

Par sadaļu (font-family: "Lato", sans-serif; color: # 7f8c8d; background: #fff; polsterējums: 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; polsterējums: 0 35px; margin-bottom: 22px; background-attachment: ritiniet; fona atkārtošana: atkārtojiet x; fona pozīcija: centra centrs; teksta pārveidošana: lielie burti) a.about-section-btn (font-family: "Lato", sans-serif; font-size: 13px; text -pārveidot: lielie burti; teksta dekorēšana: nav; krāsa: # 34495e; fons: caurspīdīgs; apmale: 2 pikseļi cieta # 34495e; polsterējums: 10 pikseļi 14 pikseļi; kursors: rādītājs; burtu atstarpes: 2 pikseļi; teksta līdzināšana: centrs; displejs: inline-block; -webkit-pāreja: .4s fona vieglums; -moz-pāreja: .4s fona vieglums; -o-pāreja: .4s fona vieglums; pāreja: .4s fona vieglums;) .about-section-btn: kursors (krāsa: #fff; fons: # 34495e;)

Mazās fona sadaļai, kas arī kalpo kā kājene, mēs piešķirsim 100% platumu un parametru pārplūdes uz slēptu. Mēs arī pievienosim dažus polsterējums augšā un apakšā, lai varētu redzēt mūsu video. Visbeidzot, pievienosim sociālo mediju pogu stilus.

Maza fona sadaļa (fontu saime: "Raleway", bez serifa; polsterējums: 100 pikseļi 0; pozīcija: relatīva; platums: 100%; pārpilde: slēpta) .small-background-container (pozīcija: relatīvā; text-align : centrs) .small-background-title (fonta lielums: 40 pikseļi; krāsa: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: lielie burti; margin-bottom: 20px ; piemales augšdaļa: 20 pikseļi; pozīcija: relatīvs; fona pielikums: ritiniet; fona atkārtojums: atkārtojiet x; fona pozīcija: augšējais centrs). sociālie a (krāsa: #fff). sociālie a: virziet kursoru (krāsa: # bdc3c7)

Mediju vaicājumi

Lai mūsu vietne būtu atsaucīga, pievienosim dažus multivides vaicājumus.

@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 (līnijas augstums: 1) / *. atskaņotājs (displejs: nav;)-> Ja vēlaties noņemt video bg no konkrēta skata punkta bez spraudņa * /) @media ekrānā un ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen un (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

Tagad ieslēgsim mūsu YouTube videoklipu. Sauksim klasi spēlētājs jQuery koda iekšpusē. Ievietojiet šo kodu pirms aizverošā ķermeņa birkas un tagu iekšpusē .
$ (funkcija () ($ (". atskaņotājs"). mb_YTPlayer ();));

Rezerves iespēja

Fona videoklipus no YouTube nevar atskaņot mobilajās ierīcēs vai planšetdatoros, jo YouTube politikas to neatļauj.

Tomēr mēs varam izmantot jQuery, lai pievienotu noklusējuma fona attēlu gadījumam, ja pārlūkprogramma konstatē, ka lietotājs vietnē ir ienācis no mobilās ierīces.

Manuāls risinājums

Lai noteiktu, vai lietotājs ir pieteicies no mobilās ierīces vai planšetdatora, mēs varam paslēpt elementu noteiktā ekrāna izmērā. Piemēram, mēs vēlamies noņemt video fonu no 480 pikseļu platiem ekrāniem. Jums vienkārši jāpievieno atskaņotāja elementam displejs: none:

@media ekrāns un (maksimālais platums: 480 pikseļi) (.spēlētājs (displejs: nav;))

Kas attiecas uz jQuery, šeit mēs iestatīsim mainīgo is_mobile ar parametru false. Pēc tam pārliecinieties, ka klase spēlētājs ir displejs: nav parametru. Ja tā, pievienojiet klasi liels fons-noklusējuma attēls uz sadaļām liels fons un neliela fona sadaļa lai izmantotu noklusējuma fona attēlu. Pretējā gadījumā nekas nemainīsies.

(funkcija ($) ($ (dokuments) .ready (funkcija () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// nosacīts skripts šeit $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". atskaņotājs "). mb_YTPlayer ();)));)) (jQuery);

Risinājums ar spraudni jQuery

Vēl viens veids, kā iestatīt noklusējuma attēlu, ir spraudnis jQuery device.js(http://matthewhudson.me/projects/device.js/). Tas vienkāršos dažādu mobilo ierīču ekrānu izmēru nosacījumu aprakstīšanas procesu. Izmantojot šo spraudni, mēs varam vienkārši uzrakstīt šādu kodu:

(funkcija ($) ($ (dokuments) .ready (funkcija () (//Device.js pārbaudīs, vai tā ir planšetdators vai mobilā ierīce) - http://matthewhudson.me/projects/device.js/ if (! device. planšetdators () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery pievienos noklusējuma fonu vēlamajai klasei $ (". big-background, .small- fona sadaļa "). addClass (" liels fona noklusējuma attēls ");)));)) (jQuery);

Šeit es izmantoju metodes device.mobile () un device.tablet () lai pārbaudītu ierīci, no kuras lietotājs ir pieteicies. Ja ir izpildīts nosacījums, ka klase tiek pievienota liels fons-noklusējuma attēls uz sadaļu liels fons un neliela fona sadaļa... Pretējā gadījumā klase spēlētājs paliks nemainīgs un tiks atskaņots videoklips.

Mēs sakārtojam

Videoklipi ir lielisks veids, kā nodot savu ziņojumu auditorijai. Pareizi lietojot, tas var būt spēcīgs jūsu vietnes rīks.

Esmu pārliecināts, ka, attīstoties un uzlabojoties tīmekļa dizainam, radīsies arvien vairāk radošu ideju video izmantošanai mājaslapu dizainā. Es ceru, ka šajā apmācībā esat iemācījušies vienu vai divas lietas. Rakstiet savas domas un komentārus komentāros.

No tulka. Ar visām vēlmēm un komentāriem saistībā ar tulkojumu, lūdzu, sazinieties ar mani personīgi. Paldies!