// Par sadaļas saturu šeit // Mazā fona sadaļas saturs šeit

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

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

• klasē 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ātiska video atskaņošana
• izslēgt skaņu- skaņas klātbūtne
• startAt- laiks, no kura jāsāk atskaņot videoklipu
• necaurredzamība- video caurspīdīgums

CSS

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

Html (augstums: 100%) pamatteksts (fonts: 15px / 23px "Raleway", bez serifa; piemale: 0; polsterējums: 0; augstums: 100%; platums: 100%; -webkit-font-smoothing: antialiased; - webkit-text-size-adjust: 100%) p (fonta lielums: 20 pikseļi; līnijas augstums: 140%; teksta līdzinājums: centrā) ul li (displejs: iekļauts bloks; saraksta stils: nav; polsterējums pa labi : 10 pikseļi ;)

Iesaiņotājs (z-indekss: 600; pozīcija: relatīvs) .pattern (fona attēls: url (../ images / pattern.png); fona atkārtojums: atkārtojums; fona pielikums: ritināšana; platums: 100%; augstums: 100%; pozīcija: absolūtā; augšā: 0; pa kreisi: 0) .divider (fona attēls: url (../ images / divider.png); displejs: bloks; platums: 300 pikseļi; augstums: 35 pikseļi; mala: 10 pikseļi, automātiski ) #colorize (krāsa: # f1c40f; fontu saime: "Lato", sans-serif; fonta izmērs: 40 pikseļi)

Ir pienācis laiks veidot sadaļu ar lielu fonu. Uzstādīt z-indekss uz 550 un parametrs pārplūde uz paslēptu. Tas ir paredzēts, lai mūsu vietnē netiktu rādīts YouTube saturs (subtitri, anotācijas). Pārējie stili ir paredzēti galvenēm, pogām un noklusējuma attēlam (vairāk par to vēlāk).

Liels fons (z-indekss: 550; teksta līdzinājums: centrā; augstums: 100%; minimālais augstums: 100%; pozīcija: relatīvs; pārplūde: slēpts) .liels fons .liels fons-konteiners (platums: 830 pikseļi) ; maksimālais platums: 100%; displejs: iekļauts bloks; pozīcija: absolūts; augšā: 50%; pa kreisi: 50%; -webkit-transform: tulkot (-50%, - 50%); -moz-transform: tulkot (-50%, - 50%); -ms-transform: tulkot (-50%, - 50%); -o-transform: tulkot (-50%, - 50%); pārveidot: tulkot (-50%) -50%)) .big-background-title (fontu saime: "Raleway", sans-serif; fonta izmērs: 78 pikseļi; krāsa: #fff; fonta svars: 300; teksta pārveidošana: lielie burti; teksta līdzināšana : centrs; mala apakšā: 22 pikseļi; polsterējums augšpusē: 20 pikseļi; displejs: iekļauts bloks; fona pielikums: ritināšana; fona atkārtojums: atkārtojums-x; fona pozīcija: augšā centrā) a.big-background-btn ( fontu saime: "Lato", sans-serif; fonta izmērs: 13 pikseļi; teksta pārveidošana: lielie burti; teksta noformējums: nav; krāsa: #fff; fons: caurspīdīgs; apmale: 2px ciets #fff; polsterējums: 10px 14px ; kursors: rādītājs; atstarpes starp burtiem: 2 pikseļi; teksta līdzināšana: centrs; displejs: inline-block; -Webkit-transition: .4s fona vieglums; -moz-transition: .4s fona vieglums; -o-transition: .4s fona vieglums; pāreja: .4s fona vieglums; ) .big-background-btn: kursors (krāsa: #fff; fons: rgba (255,255,255,0,20)) .big-background-default-image (fons: url (../ images / sunset.jpg); fona atkārtošana : neatkārtojas; fona pozīcija: centrā centrā; fona izmērs: vāks; platums: 100%; augstums: 100%; z indekss: 0; aizmugures redzamība: slēpta)

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

Par sadaļa (fontu saime: "Lato", bez serifa; krāsa: # 7f8c8d; fons: #fff; polsterējums: 60 pikseļi 20 pikseļi) .about-section-container (teksta līdzinājums: centrā; polsterējums apakšā: 50 pikseļi) .about-section-title (fontu saime: "Raleway", sans-serif; fonta izmērs: 40 pikseļi; fons: #fff; krāsa: # 3d566e; polsterējums: 0 35 pikseļi; piemale-apakša: 22 pikseļi; fona pielikums: ritināt; fona atkārtošana: atkārtošana-x; fona pozīcija: centrā centrā; teksta pārveidošana: lielie burti) a.about-section-btn (fontu saime: "Lato", sans-serif; fonta izmērs: 13 pikseļi; teksts -transformācija: lielie burti; teksta noformējums: nav; krāsa: # 34495e; fons: caurspīdīgs; apmale: 2 pikseļi viengabalains # 34495e; polsterējums: 10 pikseļi 14 pikseļi; kursors: rādītājs; atstarpes starp burtiem: 2 pikseļi; teksta līdzināšana: centrā; displejs: inline-block; -webkit-transition: .4s fona vieglums; -moz-transition: .4s fona vieglums; -o-transition: .4s fona vieglums; pāreja: .4s fona vieglums;) .about-section-btn: kursora novietošana (krāsa: #fff; fons: # 34495e;)

Mazā fona sadaļai, kas kalpo arī kā kājene, mēs piešķirsim 100% platumu un parametru pārplūde uz paslē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īvs; platums: 100%; pārpilde: slēpts) .small-background-container (pozīcija: relatīvs; teksta līdzinājums : centrs) .small-background-title (fonta izmērs: 40 pikseļi; krāsa: # f1c40f; fonta svars: 300; z-indekss: 10; displejs: iekļauts bloks; teksta pārveidošana: lielie burti; piemale-apakšā: 20 pikseļi ; malas augšdaļa: 20 pikseļi; pozīcija: relatīvā; fona pielikums: ritināšana; fona atkārtojums: atkārtojums-x; fona pozīcija: augšā centrā) .socials a (krāsa: #fff) .socials a: virzīt kursoru (krāsa: # bdc3c7)

Mediju vaicājumi

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

@multivides ekrāns un (maksimālais platums: 768 pikseļi) (.about-section-title (rindas augstums: 1)) @multivides ekrāns un (maksimālais platums: 480 pikseļi) (.big-background-title (fonta lielums: 58 pikseļi) ) .small-background-title (rindas augstums: 1) / *. atskaņotājs (displejs: nav;) -> Ja vēlaties noņemt video bg noteiktā skata logā bez spraudņa * /) @media screen un ( maksimālais platums: 360 pikseļi) (.liela fona nosaukums, # izkrāsot (līnijas augstums: 1)) @multivides ekrāns un (maksimālais platums: 320 pikseļi) (.maza fona nosaukums (fonta izmērs: 30 pikseļi))

jQuery

Tagad ieslēdzam mūsu YouTube video. Sazvanīsimies ar klasi spēlētājs jQuery koda iekšpusē. Ievietojiet šo kodu pirms beigu pamatteksta taga un tagu iekšpusē .
$ (funkcija () ($ (. player"). mb_YTPlayer ();));

Atkāpšanās iespēja

YouTube fona videoklipi netiks atskaņoti 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ījumā, ja pārlūkprogramma konstatē, ka lietotājs ir ienācis vietnē 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 480 pikseļu platajos ekrānos. Atskaņotāja elementam vienkārši jāpievieno displejs: nav:

@media ekrāns un (maksimālais platums: 480 pikseļi) (.player (displejs: nav;))

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

(funkcija ($) ($ (dokuments) .ready (funkcija () (var is_mobile = false; if ($ (. player)). css ("displejs") == "nav") (is_mobile = patiess;) if (is_mobile == true) (// Nosacījuma skripts šeit $ (". big-background, .small-background-section"). addClass ("liels-fons-noklusējuma attēls");) else ($ (). atskaņotājs "). mb_YTPlayer ();)));)) (jQuery);

Risinājums ar jQuery spraudni

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

(funkcija ($) ($ (dokuments) .ready (funkcija ()) (//Device.js pārbaudīs, vai tas ir planšetdators vai mobilais — http://matthewhudson.me/projects/device.js/ ja (! ierīce. planšetdators () &&! device.mobile ()) ($ (. player"). mb_YTPlayer ();) else (// jQuery pievienos noklusējuma fonu vēlamajai klasei $ (". liels fons, .small- background-section "). addClass (" liela fona - noklusējuma attēls ");)));)) (jQuery);

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

Sakārtojām

Videoklipi ir lielisks veids, kā nodot savu vēstījumu auditorijai. Pareizi lietojot, tas var būt spēcīgs rīks jūsu vietnei.

Esmu pārliecināts, ka, attīstoties un pilnveidojoties web dizainam, radīsies arvien vairāk radošu ideju video izmantošanai vietņu dizainā. Es ceru, ka šajā apmācībā uzzinājāt kaut ko vai divas. 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!

Kā darbvirsmas monitorā iestatīt vietni?

Iespējams, pirmā lieta, kas ikvienam lietotājam apnīk, ir uz darbvirsmas instalētās tapetes skatīšanās. Daudzi cilvēki gadiem ilgi skatās noklusējuma attēlu, pat ja sistēma ir atkārtoti instalēta vairāk nekā vienu reizi. Visiem lietotājiem tas ātri kļūst garlaicīgi, un viņi meklē darbvirsmai piemērotus attēlus. Daži lietotāji dod priekšroku animētiem fona attēliem. Iesaku iestatīt savas iecienītākās vietnes sākumlapu kā fonu (tomēr, protams, jebkuru lapu). Tagad, neierobežotā interneta laikos, dažiem tas dažkārt ir ļoti, ļoti ērti, it īpaši, ja dators vai klēpjdators pastāvīgi ir savienots ar tīklu. Jebkurā gadījumā tas nav slikts variants. Šis triks parādījās operētājsistēmā Windows XP. Diemžēl ar to viss beidzās. Interaktīvās tabulas vairs nav. Man personīgi bija ļoti interesanti skatīties ziņu vietņu atjauninājumus tiešsaistē. Šāda darbvirsmas iestatīšana būtu noderīga daudziem lietotājiem. Bet atkal jaunu Windows versiju veidotāji nolēma atstāt darbvirsmu bez iespējas atspoguļot interaktīvu lapu. Godīgi sakot, ļoti, ļoti žēl. Personīgi es dažreiz ļoti palaidu garām šādu iespēju.

Bet pāriesim no vārdiem pie darbiem. Web lapas instalēšana uz darbvirsmas

• Ar peles labo pogu noklikšķiniet uz jebkuras brīvās vietas darbvirsmā

• Papildu izvēlnē, kas tiek parādīta darbvirsmā, atlasiet vienumu Īpašības.

• Atlasiet cilni Darbvirsma un noklikšķiniet uz Darbvirsmas pielāgošana...

• Izvēlnē Desktop Elements atlasiet cilni Web un pēc tam noklikšķiniet uz pogas Izveidot... Nu, vai izvēlieties preci Mana pašreizējā mājas lapa. Fonā tiks parādīta vietnes lapa, kas noklusējuma pārlūkprogrammā ir iestatīta kā sākumlapa.

Parādītajā logā vienkārši ievadiet pārlūkprogrammas adreses joslā iepriekš nokopēto iecienītās vietnes adresi.

Aizveriet secīgi atvērtos dialoglodziņus, piekrītot izmaiņām un noklikšķiniet uz Labi. Tagad garlaicīga attēla vietā jums ir vietnes lapa, kas jums patīk, un, apskatot vietni uz darbvirsmas, varat interaktīvā režīmā vērot izmaiņas tīklā.