// Բաժնի բովանդակության մասին այստեղ // Փոքր ֆոնի բաժնի բովանդակությունը այստեղ

Ես օգտագործել եմ Font Awesome տառատեսակը սոցիալական պատկերակների համար, որոնք տեղակայված են հատվածում փոքր ֆոնային հատված... Այնուհետև մենք կավելացնենք մեր տեսանյութի ձևանմուշը ՝ օգտագործելով plugin- ը jQuery.mb.YTP նվագարկիչ. Տեղադրեք հետևյալ ծածկագիրը անմիջապես հետո .

Ահա այն, ինչ մենք օգտագործում էինք տեսանյութը հարմարեցնելու համար.

• դասարան խաղացող- այս դասը օգտագործվում է plugin- ի կողմից mb.YTP նվագարկիչ
• videoURL- տեսանյութի հղում
• զսպում- CSS ընտրիչ, որի միջոցով կարելի է նվագարկել տեսանյութը
• Ավտոմատ միացում- տեսանյութերի ավտոմատ նվագարկում
• համր- ձայնի առկայություն
• startAt- ժամանակը, որից սկսվում է տեսանյութի նվագարկումը
• անթափանցիկություն- տեսանյութերի թափանցիկություն

CSS

Եկեք ոճեր ավելացնենք մեր կայքում: Առաջին հերթին, եկեք սահմանենք html- ի, տեքստի, պարբերությունների պիտակների և պարբերական ցուցակի տեսքը:

Html (բարձրությունը ՝ 100%) մարմին (տառատեսակ ՝ 15px / 23px «Raleway», sans-serif; margin: 0; padding: 0; height: 100%; width: 100%; -webkit-font-smoothing: antialiased;- webkit-text-size-adjust: 100%) p (տառատեսակի չափը ՝ 20px; գծի բարձրությունը ՝ 140%; տեքստի հավասարեցում ՝ կենտրոն) ul li (ցուցադրում ՝ ներկառուցված բլոկ; ցուցակի ոճը ՝ ոչ; լիցք-աջ ՝ 10px;)

Wrapper (z-index: 600; position: relative). Pattern (background-image: url (../ images / pattern.png); background-repeat: կրկնել; background-attachment: ոլորել; width: 100%; height: 100%; դիրքը `բացարձակ; վերևը` 0; ձախը `0): բաժանարար (ֆոնային պատկերը` url (../ images / divider.png); ցուցադրում `բլոկ; լայնությունը` 300px; բարձրությունը `35px; լուսանցքը` 10px ավտոմատ ) # գունազարդել (գույնը ՝ # f1c40f; տառատեսակ-ընտանիք ՝ «Lato», sans-serif; տառաչափը ՝ 40px)

It'sամանակն է ոճավորել մեծ ֆոնային հատվածը: Տեղադրեք z- ինդեքսվրա 550 և պարամետր վարարումդեպի թաքնված: Սա կանխելու համար YouTube- ի բովանդակությունը (ենթագրեր, ծանոթագրություններ) մեր կայքում ցուցադրվելուց: Մնացած ոճերը անհրաժեշտ են վերնագրերի, կոճակների և կանխադրված պատկերի համար (դրա մասին ավելի ուշ):

Մեծ ֆոն (z-index: 550; text-align: center; height: 100%; min-height: 100%; position: relative: overflow: hidden) .big-background .big-background-container (width: 830px ; առավելագույն լայնությունը `100%; ցուցադրումը` ներկառուցված բլոկ; դիրքը `բացարձակ; վերևը` 50%; ձախը `50%; -webkit-transform: translate (-50%,-50%); -moz-transform: թարգմանել (-50%,-50%); -ms-transform: թարգմանել (-50%,-50%); -50%)) .big-background-title (տառատեսակ-ընտանիք ՝ «Raleway», sans-serif; տառատեսակի չափը ՝ 78px; գույնը ՝ #fff; տառատեսակը ՝ 300 : կենտրոն; լուսանցք-ներքև: 22px; լիցք-վերև `20px; ցուցադրում` ներկառուցված բլոկ; ֆոն-կցորդ `ոլորել; ֆոն-կրկնել` կրկնել-x; ֆոն-դիրքը `վերև կենտրոն) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: մեծատառ; տեքստի ձևավորում `ոչ; գույն: ; կուրսորը `ցուցիչ; տառերի միջակայքը` 2px; text-align: կենտրոն; ցուցադրում `ներկառուցված բլոկ; -webkit- անցում .4 ֆոնի հեշտություն; -moz- անցում. -o- անցում. անցում .4 ֆոնի հեշտություն; ) .big-background-btn: սավառնել (գույնը ՝ #fff; ֆոն ՝ rgba (255,255,255,0.20)) .big-background-default-image (ֆոն ՝ url (../ images / sunset.jpg); background-repeat ՝ չկրկնվել; ֆոնային դիրքը ՝ կենտրոն կենտրոն; ֆոնային չափը ՝ ծածկը; լայնությունը ՝ 100%; բարձրությունը ՝ 100%; z-index: 0; հետերես-տեսանելիությունը ՝ թաքնված)

Հիմա անցնենք հատվածին մոտ հատված... Եկեք կազմաձևենք պարամետրը Ֆոնի գույնըդեպի սպիտակ և լիցք 60px վերև և ներքև, 20px ձախ և աջ:

Մաս-բաժին (տառատեսակ-ընտանիք ՝ «Լատո», sans-serif; գույնը ՝ # 7f8c8d; ֆոն ՝ #fff; լիցքավորում ՝ 60px 20px) .բաժնի մասին կոնտեյներ (տեքստի հավասարեցում ՝ կենտրոն; լիցք-ներքև ՝ 50px) .about-section-title (font-family: "Raleway", sans-serif; font-size: 40px; background: #fff; color: # 3d566e; padding: 0 35px; margin-bottom: 22px; background-attachment: ոլորել; ֆոն-կրկնել ՝ կրկնել-x; ֆոն-դիրքը ՝ կենտրոնական կենտրոն; տեքստ-կերպարանափոխել ՝ մեծ) a.about-section-btn (font-family: "Lato", sans-serif; font-size: 13px; text -վերափոխել ՝ մեծատառ; տեքստ-զարդարանք ՝ ոչ; գույնը ՝ # 34495e; ֆոն ՝ թափանցիկ; եզրագիծ ՝ 2px պինդ # 34495e; ծածկոց ՝ 10px 14px; կուրսորը ՝ ցուցիչ; տառերի միջևը ՝ 2px; տեքստի հավասարեցում ՝ կենտրոն; ցուցադրում ՝ inline-block; -webkit- անցում. (գույնը ՝ #fff; ֆոն ՝ # 34495e;)

Փոքր ֆոնային հատվածի համար, որը նաև ծառայում է որպես ստորագիր, մենք կհանձնենք 100% լայնություն և պարամետր վարարումդեպի թաքնված: Մենք նաև կավելացնենք որոշները լիցքվերևից և ներքևից, որպեսզի մեր տեսանյութը տեսանելի լինի: Վերջապես, եկեք ոճեր ավելացնենք սոցիալական մեդիայի կոճակների համար:

Փոքր ֆոնային հատված (տառատեսակ-ընտանիք ՝ «Raleway», sans-serif; լիցքավորումը ՝ 100px 0; դիրքը ՝ հարաբերական; լայնությունը ՝ 100%; վարարումը ՝ թաքնված): : կենտրոն) .small-background-title (font-size: 40px; color: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: մեծատառ margin-top: 20px; դիրքը ՝ հարաբերական; background-attachment: ոլորել; background-repeat: կրկնել-x; background-position: վերևի կենտրոն). սոցիալական a (գույնը ՝ #fff). սոցիալական a: սավառնել (գույնը ՝ # bdc3c7)

Մեդիա հարցումներ

Մեր կայքը արձագանքելու համար եկեք ավելացնենք որոշ մեդիա հարցումներ:

@media էկրան և (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) / *. նվագարկիչ (ցուցադրում ՝ ոչ;)-> Եթե ցանկանում եք հանել տեսանյութը bg- ից ՝ հատուկ դիտման առանց հավելումով * /) @media էկրանով և ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen and (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

Այժմ միացնենք մեր YouTube տեսանյութը: Եկեք զանգահարենք դասարան խաղացող jQuery կոդի ներսում: Տեղադրեք հետևյալ ծածկագիրը ՝ փակման մարմնի պիտակից առաջ և պիտակների ներսում .
$ (գործառույթ () ($ (". նվագարկիչ"). mb_YTPlayer ();));

Հետադարձ տարբերակ

YouTube- ի ֆոնային տեսանյութերը չեն ցուցադրվի շարժական սարքերում կամ պլանշետներում, քանի որ դա թույլ չեն տալիս YouTube- ի կանոնները:

Այնուամենայնիվ, մենք կարող ենք օգտագործել jQuery- ն ՝ կանխադրված ֆոնային պատկեր ավելացնելու համար, եթե դիտարկիչը պարզի, որ օգտվողը մուտք է գործել բջջային սարքից:

Ձեռքով լուծում

Որոշելու համար, որ օգտագործողը մուտք է գործել բջջային սարքից կամ պլանշետից, մենք կարող ենք տարրը թաքցնել էկրանի որոշակի չափի վրա: Օրինակ, մենք ցանկանում ենք հեռացնել տեսանյութի ֆոնը 480px լայնությամբ էկրաններին: Պարզապես պետք է ցուցադրում ավելացնել ՝ ոչ մեկը նվագարկիչի տարրին.

@media էկրան և (առավելագույն լայնությունը ՝ 480px) (.player (ցուցադրում ՝ ոչ;))

Ինչ վերաբերում է jQuery- ին, այստեղ մենք փոփոխական ենք սահմանում շարժական է false պարամետրով: Այնուհետեւ, համոզվեք, որ դասը խաղացողունի ցուցադրում. պարամետրեր չկան: Եթե ​​այո, ապա ավելացրեք դասարանը big-background-default-imageբաժիններին մեծ ֆոնեւ փոքր ֆոնային հատվածֆոնային կանխադրված պատկերը օգտագործելու համար: Հակառակ դեպքում ոչինչ չի փոխվի:

(գործառույթ ($) ($ (փաստաթուղթ). արդեն (գործառույթ () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Պայմանական սցենար այստեղ $ (". նվագարկիչ "). mb_YTPlayer ();))));)) (jQuery);

Լուծում jQuery հավելումով

Կանխադրված պատկերը սահմանելու մեկ այլ եղանակ jQuery հավելումն է սարք. js(http://matthewhudson.me/projects/device.js/): Սա կհեշտացնի բջջային սարքերի էկրանի տարբեր չափերի պայմանների նկարագրման գործընթացը: Այս plugin- ի միջոցով մենք կարող ենք պարզապես գրել հետևյալ կոդը.

(գործառույթը ($) ($ (փաստաթուղթ). արդեն (գործառույթը () (//Device.js- ը կստուգի ՝ դա պլանշետ է, թե բջջային - http://matthewhudson.me/projects/device.js/ եթե (! սարք) դեղահատ () &&! device.mobile ()) ($ (". նվագարկիչ"). mb_YTPlayer ();) այլապես (// jQuery- ը կանխադրված ֆոն կավելացնի նախընտրած դասին $ (". ֆոնային հատված »). addClass (" big-background-default-image ");)));)) (jQuery);

Այստեղ ես օգտագործել եմ մեթոդները սարք. բջջային ()եւ device.tablet ()ստուգել այն սարքը, որից օգտվողը մուտք է գործել: Եթե ​​պայմանը բավարարված է, որ դասը ավելացվի big-background-default-imageհատվածին մեծ ֆոնեւ փոքր ֆոնային հատված... Հակառակ դեպքում դասարանը խաղացողկմնա անփոփոխ, և տեսանյութը կհնչի:

Մենք կարգի ենք բերում

Տեսանյութերը հիանալի միջոց են ձեր հաղորդագրությունը լսարանին հասցնելու համար: Այն կարող է հզոր գործիք լինել ձեր կայքի համար, եթե այն ճիշտ օգտագործվի:

Համոզված եմ, որ վեբ դիզայնի զարգացման և կատարելագործման հետ մեկտեղ ավելի ու ավելի շատ կլինեն ստեղծագործական գաղափարներ վիդեո դիզայնի մեջ օգտագործելու համար: Հուսով եմ, որ այս ձեռնարկում մեկ -երկու բան եք սովորել: Գրեք ձեր մտքերն ու մեկնաբանությունները մեկնաբանություններում:

Թարգմանիչից:Թարգմանության վերաբերյալ բոլոր ցանկությունների և մեկնաբանությունների դեպքում խնդրում եմ կապվել ինձ հետ անձնական կապով: Շնորհակալություն

Ինչպե՞ս տեղադրել կայք աշխատասեղանի մոնիտորի վրա:

Հավանաբար, առաջին բանը, որից ցանկացած օգտվող հոգնում է, նայում է աշխատասեղանին տեղադրված պաստառին: Շատերը տարիներ շարունակ անընդհատ նայում են կանխադրված պատկերին, նույնիսկ եթե համակարգը մեկ անգամ չէ, որ նորից տեղադրվել է: Բոլոր օգտվողները արագ ձանձրանում են դրանից, և նրանք փնտրում են համապատասխան նկարներ աշխատասեղանի համար: Որոշ օգտվողներ նախընտրում են անիմացիոն պաստառներ: Ես առաջարկում եմ ձեր նախընտրած կայքի գլխավոր էջը դնել որպես պաստառ (այնուամենայնիվ, իհարկե, ցանկացած էջ): Այժմ, անսահմանափակ ինտերնետի օրերին, դա երբեմն շատ -շատ հարմար է ոմանց համար, հատկապես, երբ համակարգիչ կամ նոութբուք անընդհատ միացված է ցանցին: Ամեն դեպքում, դա վատ տարբերակ չէ: Այս հնարքը հայտնվեց Windows XP- ում: Ավաղ, այն ավարտվեց այնտեղ: Ինտերակտիվ սեղանները չկան: Անձամբ ինձ համար շատ հետաքրքիր էր դիտել լրատվական կայքերի թարմացումները առցանց: Նման աշխատասեղանի կարգավորումը օգտակար կլինի շատ օգտվողների համար: Բայց, կրկին, Windows- ի նոր տարբերակների ստեղծողները որոշեցին հեռանալ Desktop- ից ՝ առանց ինտերակտիվ էջ արտացոլելու հնարավորության: Անկեղծ ասած, շատ, շատ կներեք: Անձամբ ես երբեմն իսկապես բաց եմ թողնում նման հնարավորությունը:

Բայց խոսքերից անցնենք գործի: Վեբ էջի տեղադրում աշխատասեղանին

• Աջ սեղմեք աշխատասեղանի ցանկացած ազատ տարածքի վրա

• Լրացուցիչ ընտրացանկում, որը հայտնվում է աշխատասեղանին, ընտրեք տարրը Հատկություններ.

• Եկեք ընտրենք Desktop ներդիրը և կտտացրեք Սեղանի անհատականացում ...

• Desktop Elements ընտրացանկում այժմ ընտրեք ներդիրը Վեբև այնուհետև կտտացրեք կոճակին Ստեղծել... Դե, կամ ընտրեք իրը Իմ ընթացիկ գլխավոր էջը:Հետին պլանում կցուցադրվի կայքի էջը, որը նախնական դիտարկիչում որպես գլխավոր էջ է դրված:

Պատուհանում, որը հայտնվում է, պարզապես մուտքագրեք ձեր նախընտրած կայքի նախկինում պատճենված հասցեն ձեր դիտարկիչի հասցեագոտուց:

Փակեք հաջորդաբար բացված երկխոսության տուփերը ՝ համաձայնելով փոփոխություններին և կտտացնելով OK: Այժմ, ձանձրալի նկարի փոխարեն, ունեք ձեզ դուր եկած վեբ կայքի էջը և, աշխատասեղանի վրա դիտելով կայքը, կարող եք դիտել ցանցի փոփոխությունները ինտերակտիվ ռեժիմով: