| 16.04.2015
Az elmúlt évben a webdizájnerek egyre inkább egy ötletes módszert alkalmaztak a weboldal élénkítésére – videót állítanak be az oldal hátterének. Egy érdekes történet vagy csak egy "élő" kép a háttérben még egy közönséges névjegykártya-oldalt is díszít, felkelti a felhasználó érdeklődését, és arra ösztönzi, hogy hosszabb ideig maradjon az oldalon. Ma megosztjuk Önnel az egyik módszert, amellyel webhelye teljes képernyős videóhátterét állíthatja be HTML5 és CSS használatával.
Ha határozottan meg van győződve arról, hogy videót szeretne beállítani a webhely hátterének, néhány dolgot tudnod kell:
- Először is ne feledje, hogy a videónak nagy súlya van. Ez negatívan befolyásolhatja az oldal betöltési sebességét, különösen, ha a felhasználónak lassú az internetkapcsolata. Ezért válasszon rövid videókat. Abban az esetben, ha meglehetősen hosszú videót kell használnia, készüljön fel a súlycsökkentésre, vagy arra, hogy fel kell áldoznia a közönség egy részét.
- Másodszor, kerülje a hang automatikus lejátszását a videóból. Használjon hang nélküli videókat, vagy adja hozzá azt a lehetőséget, hogy a felhasználó maga kapcsolja be a hangot, ha szüksége van rá. Nagyon rossz formának számít, ha egy webhely megnyitásakor automatikusan lejátszanak egy hangot.
- Harmadszor, gondoskodnia kell a böngészők közötti kompatibilitásról, valamint a videó megfelelő megjelenítéséről és lejátszásáról minden eszközön, valamint alternatívát kell biztosítania a videóhoz (azokban az esetekben, amikor nem fog lejátszani). Az alábbiakban példánkban bemutatjuk, hogyan kell ezt megtenni.
- Negyedszer pedig alaposan át kell gondolni, hogy megfelelő-e a videotelefon azon a helyen, ahová telepíteni szeretné, hiszen nagyon könnyű átlépni a határvonalat az eredetiség és a haszontalanság között. A videó semmilyen módon nem vonhatja el a felhasználó figyelmét a fő céljától, ezért jött az oldalra. Ha videó hátteret állít be a szöveges tartalom alá, ügyeljen arra, hogy ellenőrizze, mennyire vált olvashatóvá a szöveg. Például a videó lejátszásának egy bizonyos pontján összeolvadhat a háttérrel (fehér háttéren fehér szöveg, feketén fekete stb.).
1. HTML
Példánkban egy 1920 × 1080 felbontású, 15 másodperces videót vettünk fel, súlya valamivel több, mint 3 MB. A blokk belsejében
Címkéhez
- szélesség - a videó lejátszási területének szélessége;
- magasság - a terület magassága;
- automatikus lejátszás - automatikus videó lejátszás;
- hurok - hurok videó;
- poszter – egy kép, amely a videó helyett megjelenik a betöltés közben, vagy nem érhető el.
Ezután két címkét írtunk
2. CSS
Háttérstíluslapunk így néz ki:
# video-bg (pozíció: rögzített; felül: 0; jobb: 0; lent: 0; bal: 0; túlcsordulás: rejtett; z-index: 1; háttér: url (bg / daisy-stock-poster.jpg) nem -ismétlés # 94a233; háttér mérete: borító : auto;) @támogatja (object-fit: cover) (# video-bg> videó (felső: 0; balra: 0; szélesség: 100%; magasság: 100%; objektum-illesztés: borító;))
Amint a kódból látható, a háttér az egész oldalra van beállítva, és egy kép (ugyanabból a videóból származó képkocka) tartalék háttérként. Végső megoldásként a # 94a233 háttérszín kerül felhasználásra.
A kód tartalmazza a @supports direktívát is, amely ellenőrzi, hogy a böngésző támogatja-e az objektum-fit tulajdonságot. Ha igen, akkor a háttér fedőre van állítva, és arányosan jelenik meg különböző képernyőméreteken.
A caniuse.com szerint az objektum-illesztés tulajdonságot jelenleg minden böngésző támogatja, kivéve az Internet Explorert, a Firefox 31-35-öt, a safari 7-et, az iOS Safari 7.1-et és az Android Browser 4.1-4.4-et.
A nagyméretű videók a webhelyek hátterében a webdizájn igen népszerű trendje. Az okosan alkalmazott videók drámaibbá és vonzóbbá tehetik a webhelyet a felhasználók számára.
Ráadásul a videó hátterek zökkenőmentesen és "fékek" nélkül játszhatók le, ellentétben a JavaScript-el készített hátterekkel, amelyekhez bizonyos kódok és képek betöltése szükséges, mielőtt a felhasználó látná az animáció eredményét.
Vannak olyan cégek, mint a Powerhouse vagy az Adidas, amelyek videót használnak a webhely háttereként, hogy egy termékkel vagy szolgáltatással kapcsolatos konkrét üzenetet vagy történetet közvetítsenek a felhasználó felé.
Bár a videóháttér létrehozásának legnépszerűbb módja a HTML5 videó- címkét néhány CSS-paraméterrel együtt, érdemes figyelni az alternatív videóforrásokra is, például a YouTube-ra. Ebben az esetben nem kell aggódnia a szerver lassú válaszadása miatt, mert a kérés közvetlenül a YouTube-ra kerül.
Ebben a cikkben megmutatom, hogyan készíthetsz egy nagyszerű webhelyet, amely YouTube-videókat használ háttérként. A jQuery.mb.YTPlayer.js fájlt fogjuk használni videónk megjelenésének szerkesztéséhez és szabályozásához. Tehát kezdjük!
Források letöltése
Demó
Szükséged lesz:
// Nagy háttértartalom itt
Most minden szakaszt meg kell töltenie tartalommal. A nagy háttér és a kis háttér szakaszba helyezze az osztályt minta, hogy könnyű textúrát hozzunk létre a videónkban. Ezenkívül hozzá kell adnia a h1-et, a h2-t, a bekezdést és a gombot.
YOUTUBE
HÁTTÉR VIDEÓ
Ezt szeretném megtanulniHelyezzen bármilyen YouTube-videót a webhely hátterébe
Kíváncsi vagy, hogyan adj hozzá videót webhelyed hátteréhez?
Ez olyan egyszerű, mint a körte pucolása! A jQuery MB.YTPlayer, a jQuery beépülő modul segítségével bármilyen YouTube-videót beágyazhat webhelye hátterébe.
Bármely videót könnyedén HTML-háttérré alakíthatja. Nincs késés az oldalbetöltésben vagy a szerver betöltésében!
A közösségi hálózatokról származunk
A Font Awesome betűtípust használtam a közösségi ikonokhoz, amelyek a részben találhatók kis-háttér-szakasz... Ezután a plugin segítségével sablont adunk a videónkhoz jQuery.mb.YTPlayer. Helyezze el a következő kódot közvetlenül utána .
A videó testreszabásához a következőket használtuk:
- osztály játékos- ezt az osztályt használja a bővítmény mb.YTPlayer
- videoURL- link a videóhoz
- visszatartás- CSS-választó a videó lejátszásához
- automatikus lejátszás- automatikus lejátszású videó
- néma- a hang jelenléte
- kezdd- a videó lejátszásának megkezdésének időpontja
- átlátszatlanság- videó átlátszósága
CSS
Adjunk stílusokat oldalunkhoz. Először is határozzuk meg a html, a body, a bekezdéscímkék és a felsorolásjelek megjelenését.Html (magasság: 100%) törzs (betűtípus: 15px / 23px "Raleway", sans-serif; margó: 0; kitöltés: 0; magasság: 100%; szélesség: 100%; -webkit-font-simítás: élsimítás; - webkit-text-size-adjust: 100%) p (betűméret: 20 képpont; sormagasság: 140%; szöveg igazítása: középre) ul li (megjelenítés: inline-block; listastílus: nincs; kitöltés jobbra : 10px ;)
Burkolat (z-index: 600; pozíció: relatív) .pattern (háttér-kép: url (../ images / pattern.png); háttér-ismétlés: ismétlés; háttér-csatolás: görgetés; szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0) .divider (háttér-kép: url (../ images / divider.png); kijelző: blokk; szélesség: 300 képpont; magasság: 35 képpont; margó: 10px automatikus ) #színezés (szín: # f1c40f; betűcsalád: "Lato", sans-serif; betűméret: 40 képpont)
Ideje stílusossá tenni a nagy hátterű részt. Telepítés z-index tovább 550 és paraméter túlcsordulás elrejteni. Ezzel megakadályozzuk, hogy YouTube-tartalmak (feliratok, kommentárok) jelenjenek meg webhelyünkön. A többi stílus a fejlécekre, gombokra és az alapértelmezett képre vonatkozik (erről később).
Nagy háttér (z-index: 550; szövegigazítás: középre; magasság: 100%; minimális magasság: 100%; pozíció: relatív; túlcsordulás: rejtett) .big-background .big-background-container (szélesség: 830 képpont) ; maximális szélesség: 100%; kijelző: soron belüli blokk; pozíció: abszolút; felül: 50%; bal: 50%; -webkit-transzformáció: fordítás (-50%, - 50%); -moz-transform: fordítás (-50%, - 50%); -ms-transzformáció: lefordítás (-50%, - 50%); -o-transzformáció: fordítás (-50%, -50%); transzformáció: fordítás (-50%) -50%)) .big-background-title (betűcsalád: "Raleway", sans-serif; betűméret: 78px; szín: #fff; betűsúly: 300; szövegátalakítás: nagybetűs; szövegigazítás : középen; margó-alul: 22px; kitöltés felső: 20px; kijelző: soron belüli blokk; háttér-csatolás: görgetés; háttér-ismétlés: ismétlés-x; háttér-pozíció: felül középen) a.big-background-btn ( font-család: "Lato", sans-serif; betűméret: 13 képpont; szövegátalakítás: nagybetűk; szövegdekoráció: nincs; szín: #fff; háttér: átlátszó; szegély: 2px tömör #fff; kitöltés: 10px 14px ; kurzor: mutató; betűköz: 2px; szöveg igazítása: középre; kijelző: inline-block; -webkit-transition: .4s háttér könnyű; -moz-transition: .4s háttér könnyű; -o-transition: .4s háttér könnyű; átmenet: .4s háttér könnyű; ) .big-background-btn: hover (szín: #fff; háttér: rgba (255,255,255,0,20)) .big-background-default-image (háttér: url (../ images / sunset.jpg); háttér-ismétlés : nincs ismétlés; háttér helyzete: középen középen; háttér mérete: borító; szélesség: 100%; magasság: 100%; z-index: 0; hátlap láthatósága: rejtett)
Most menjünk tovább a szakaszra kb-szakasz... Állítsuk be a paramétert háttérszín fehérre és párnázás 60 képpont felül és alul, valamint 20 képpont bal és jobb.
About-section (betűcsalád: "Lato", sans-serif; szín: # 7f8c8d; háttér: #fff; kitöltés: 60px 20px) .about-section-container (text-align: center; padding-bottom: 50px) .about-section-title (betűcsalád: "Raleway", sans-serif; betűméret: 40px; háttér: #fff; szín: # 3d566e; kitöltés: 0 35px; margó-alsó: 22px; háttér-melléklet: görgetés; háttér-ismétlés: ismétlés-x; háttérpozíció: középen középen; szövegátalakítás: nagybetűk) a.about-section-btn (betűcsalád: "Lato", sans-serif; betűméret: 13px; szöveg -transzformáció: nagybetűk; szövegdekoráció: nincs; szín: #34495e; háttér: átlátszó; szegély: 2px tömör # 34495e; kitöltés: 10px 14px; kurzor: mutató; betűköz: 2px; szövegigazítás: középen; kijelző: inline-block; -webkit-transition: .4s háttérkönnyű; -moz-transition: .4s háttérkönnyű; -o-transition: .4s háttér könnyű; átmenet: .4s háttér könnyű (szín: #fff; háttér: # 34495e;)
A láblécként is szolgáló kis hátterű részhez 100%-os szélességet rendelünk, és a paramétert túlcsordulás elrejteni. Hozzáadunk néhányat párnázás felül és alul, hogy a videónk is látható legyen. Végül adjunk hozzá stílusokat a közösségi média gombokhoz.
Kis háttér-szakasz (betűcsalád: "Raleway", sans-serif; kitöltés: 100 képpont 0; pozíció: relatív; szélesség: 100%; túlcsordulás: rejtett) .small-background-container (pozíció: relatív; szövegigazítás : center) .small-background-title (betűméret: 40 képpont; szín: # f1c40f; betűsúly: 300; z-index: 10; kijelző: inline-block; szövegátalakítás: nagybetűk; margó-alsó: 20 képpont ; margin-top: 20px; pozíció: relatív; háttér-csatolás: görgetés; háttér-ismétlés: ismétlés-x; háttér-pozíció: felső középső) .socials a (szín: #fff) .socials a: hover (szín: # bdc3c7)
Médialekérdezések
Ahhoz, hogy webhelyünk reszponzív legyen, adjunk hozzá néhány médialekérdezést.@média képernyő és (max. szélesség: 768 képpont) (.about-section-title (sor-height: 1)) @media képernyő és (max-szélesség: 480px) (.big-background-title (betűméret: 58px) ). max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media képernyő és (max-width: 320px) (.small-background-title (betűméret: 30px))
jQuery
Most pedig kapcsoljuk be a YouTube videónkat. Hívjuk fel az osztályt játékos a jQuery kódon belül. Helyezze el a következő kódot a záró body címke elé és a címkék belsejébe .$ (függvény () ($ (. player"). mb_YTPlayer ();));
Tartalék opció
A YouTube háttérvideói nem játszhatók le mobileszközökön vagy táblagépeken, mivel a YouTube irányelvei ezt nem teszik lehetővé.A jQuery segítségével azonban hozzáadhatunk alapértelmezett háttérképet arra az esetre, ha a böngésző észleli, hogy a felhasználó mobileszközről lépett be az oldalra.
Manuális megoldás
Annak megállapításához, hogy a felhasználó mobileszközről vagy táblagépről van-e bejelentkezve, elrejthetjük az elemet egy adott képernyőméreten. Például el akarjuk távolítani a videó hátterét a 480 képpontos széles képernyőkön. Csak hozzá kell adnia a display: none-t a lejátszó elemhez:
@média képernyő és (max. szélesség: 480 képpont) (.player (megjelenítés: nincs;))
Ami a jQuery-t illeti, itt egy változót fogunk beállítani is_mobile false paraméterrel. Ezután győződjön meg arról, hogy az osztály játékos kijelzője van: nincs paraméter. Ha igen, adja hozzá az osztályt nagy-háttér-alapértelmezett kép szakaszokhoz nagy hátterűés kis-háttér-szakasz az alapértelmezett háttérkép használatához. Ellenkező esetben semmi sem fog változni.
(függvény ($) ($ (dokumentum) .ready (függvény () (var is_mobile = false; if ($ (. player").) css ("display") == "nincs") (is_mobile = igaz;) if (is_mobile == true) (// Feltételes szkript itt $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (). lejátszó "). mb_YTPlayer ();)));)) (jQuery);
Megoldás jQuery bővítménnyel
Az alapértelmezett kép beállításának másik módja a jQuery beépülő modul device.js(http://matthewhudson.me/projects/device.js/). Ez leegyszerűsíti a feltételek leírását a mobileszközök különböző képernyőméreteihez. Ezzel a bővítménnyel egyszerűen megírhatjuk a következő kódot:(függvény ($) ($ (dokumentum) .ready (funkció ()) (//A Device.js ellenőrzi, hogy táblagépről vagy mobilról van-e szó - http://matthewhudson.me/projects/device.js/ if (! eszköz. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// A jQuery hozzáadja az alapértelmezett hátteret a preferált $ osztályhoz (". big-background, .small- background-section "). addClass (" nagy háttér - alapértelmezett kép ");)));)) (jQuery);
Itt használtam a módszereket device.mobile ()és device.tablet () ellenőrizni, hogy melyik eszközről van bejelentkezve a felhasználó. Ha a feltétel teljesül, akkor az osztály hozzáadódik nagy-háttér-alapértelmezett kép szakaszhoz nagy hátterűés kis-háttér-szakasz... Különben az osztály játékos változatlan marad, és a videó lejátszásra kerül.
Rendet raktunk
A videók nagyszerű módja annak, hogy üzenetét eljuttassa a közönségéhez. Helyes használat esetén hatékony eszköz lehet webhelye számára.Biztos vagyok benne, hogy ahogy a webdizájn fejlődik és javul, egyre több kreatív ötlet lesz a videó weboldaltervezésben való felhasználására. Remélem, tanultál egy-két dolgot ebből az oktatóanyagból. Írja meg gondolatait és megjegyzéseit a megjegyzésekben.
Egy fordítótól. A fordítással kapcsolatos minden kívánságával és észrevételével forduljon hozzám személyesen. Kösz!
Hogyan állíthatok be webhelyet asztali monitoron?
Valószínűleg az első dolog, amibe minden felhasználó belefárad, az az Asztalra telepített háttérkép megtekintése. Sokan évekig folyamatosan az alapértelmezett képet nézik, még akkor is, ha többször újratelepítették a rendszert. Minden felhasználó hamar megunja, és az Asztalihoz megfelelő képeket keres. Egyes felhasználók az animált háttérképeket részesítik előnyben. Azt javaslom, hogy kedvenc webhelyének kezdőlapját állítsa be háttérképnek (de természetesen bármelyik oldalt). Most, a korlátlan internet napjaiban ez néha nagyon-nagyon kényelmes egyesek számára, különösen akkor, ha egy számítógép vagy laptop folyamatosan csatlakozik a hálózathoz. Mindenesetre nem rossz lehetőség. Ez a trükk a Windows XP rendszerben jelent meg. Jaj, itt véget ért. Az interaktív asztalok eltűntek. Én személy szerint nagyon érdekesnek találtam a híroldalak online frissítéseit. Egy ilyen asztali beállítás sok felhasználó számára hasznos lenne. De ismét a Windows új verzióinak készítői úgy döntöttek, hogy az Asztalról nem képesek interaktív oldalt megjeleníteni. Őszintén, nagyon-nagyon sajnálom. Én személy szerint néha nagyon kihagyok egy ilyen lehetőséget.
De térjünk át a szavakról a tettekre. A weboldal telepítése az asztalra
- Kattintson a jobb gombbal az Asztal bármelyik szabad területére
- Az Asztalon megjelenő további menüben válassza ki az elemet Tulajdonságok.
- Válasszuk ki az Asztal lapot, és kattintsunk Asztali testreszabás...
- Az Asztalelemek menüben válassza ki a lapot Web majd kattintson a gombra Teremt... Nos, vagy válassz egy elemet Jelenlegi kezdőlapom. A háttérben megjelenik a webhely oldala, amely az alapértelmezett böngészőben kezdőlapként van beállítva.
A megjelenő ablakban csak írja be kedvenc webhelyének korábban kimásolt címét a böngésző címsorából.
Zárja be az egymás után megnyíló párbeszédpaneleket, fogadja el a változtatásokat, és kattintson az OK gombra. Most egy unalmas kép helyett van egy oldala a weboldalnak, amely tetszik Önnek, és az Asztalon nézegetve interaktív módban figyelheti a hálózat változásait.
