Gagnvirk hönnun

Hvernig á að nota bakgrunnsmyndir fyrir ótrúleg sjónræn áhrif, 2. hluti

Í fyrri hluti af þessari einkatími, með blöndu af HTML5, jQuery og CSS, byggðum við aðeins virkni okkar á HTML5-ekið fullur-skjár vídeó bakgrunnur. Í þetta sinn ætlum við að stilla það, undirbúa fallbacks fyrir það og skilja hvernig hægt er að nota það sem hluti af eigin vinnandi hönnun. Í leiðsögn dagsins munum við bæta við fullscreen vídeóinu okkar á ýmsa vegu, þar á meðal:

  • búa til eigin mynstur yfirborð okkar til að sitja yfir the toppur af vídeó okkar; svo sem eins og gamall sjónvarpsþættir, stíll myndbandið til að henta eigin hönnun;
  • umbreyta vídeóinu okkar til margra sniða til að virkja alhliða vafra stuðning fyrir vídeó bakgrunn þinn.

Samhliða þessu mun ég einnig sýna dæmi um hvernig myndbandið er hægt að nota á skapandi hátt með því að leggja aðra þætti ofan á það og sýna þér hvernig þessi öfluga tækni getur eldsneyti eigin nýja hönnun; eða jafnvel bjóða upp á nýja spennandi bakgrunn fyrir þá hönnun sem þú ert að vinna núna!

Hefurðu notað fullscreen vídeó sem bakgrunn í einum af hönnununum þínum? Hefur þú valið aðferð við framkvæmd? Láttu okkur vita í athugasemdunum.

html5 html vídeó html5 vídeó vídeó bakgrunn vídeó snið