Fundal video website

In primul rand videoclipul trebuie sa fie setat pe mut si autoplay. Ideal ar fi fara sunet.

Lungimea este importanta. Un video prea scurt devine repetitiv si este enervant. Un video prea lung devine direct o povestire si atunci nu mai esti atent la continutul site-ului ci la ce se intampla in fundal. Te sfatuiesc sa folosesti o lungime de aproximativ 12-30 secunde.

Accesibilitatea este importanta. Orice text plasat deasupra videoclipului ar trebuie sa aiba contrastul mai mare. Dupa cum vezi pe site-ul precizat de tine este adaugat un efect de blur care avantajeaza distingerea continutului primar de efectul cool din background.

Latimea de banda este cel mai important lucru. Videoclipul trebuie sa fie mic si compresat cat mai mult si eficient posbil. In acelasi timp, trebuie setata o scara a dimensiunii (responsive) pentru fiecare device posibil (desktop, tableta, telefon)

Dupa ce ai inteles acesti factori, acum trebuie sa gasesti tehnica prin care poti inlocui imaginea de fundal plictisitoare intr-una ‘’cool’’
Ai doua modalitati: instalezi un script sau scrii tu codul si ti-l customizezi cum vrei.

1. Uite un exemplu de cod. Daca ai cunostinte medii sau chiar de incepator in HTML, CSS si chiar JavaScript poti edita fara probleme. Daca doresti mai multe explicatii aici, te pot ajuta.
Cod:
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('http://dev2.slicejack.com/fullscreen-video-demo/img/videoframe.jpg') center center / cover no-repeat;
    }

    .fullscreen-bg__video {
        display: none;
    }
}


2. Aici ai 10 pluginuri bune pe care le poti instala fara probleme. Trebuie doar sa apesi pe cateva butoane :))
 
Ultima editare:
Am gasit pana la urma. E un plugin de wordpress, dar tot nu pot sa imi dau seama cum sa fac fundalul temei mai transparent cum e acolo. Tema e aceeasi, Grifus..
 
Ultima editare:
Loading...
Back
Sus