Redați sunet când treceți peste un element

Dacă faceți o interogare a motoarelor de căutare pe tema redării sunetului folosind CSS, atunci veți găsi:

  1. Referiri la materiale despre Counter Strike: Source.
  2. Ceva despre momentele de joc și înainte și momentele promițătoare asemănătoare, dar nimic concret cu privire la cum să publicați un țipăt atunci când plasați cursorul peste elementul din meniu.

Sunetul face parte din design și abilitatea de a juca / rula clipuri audio ar trebui să fie prezentă în CSS, dar din păcate. acesta nu este încă disponibil. Pentru a reda sunetul când cursorul mouse-ului trece printr-o anumită zonă, trebuie să ne bazăm pe HTML5 sau Flash. Dar cine vrea în prezent să comunice cu Flash? Deci, haideți să ne întoarcem la HTML5, care poate reda sunet folosind elementul său







Dacă plasați codul de mai sus pe pagină, nu veți vedea nimic și nu veți auzi. Pentru a scoate un mic player, trebuie să utilizați atributul control (

Vom folosi jQuery, deoarece face mult mai ușor să selectați și să lucrați cu elemente.

Aici este codul care redă sunetul când cursorul mouse-ului trece peste un anumit element:

Exemplu din viața reală

Site-ul Goodfoot utilizează o tehnologie similară pentru a reda sunete diferite atunci când cursorul mouse-ului trece peste gura omului de zăpadă (funcționează în browserele Webkit). Acest efect este implementat prin încorporarea unui nou element audio în structura DOM de fiecare dată când cursorul mouse-ului trece peste gura omului de zăpadă:

Metoda poate fi ușor îmbunătățită prin adăugarea de suport pentru fișierul OGG:

O altă modalitate de a realiza acest efect este plasarea simultană a mai multor elemente audio pe pagină:

Alegeți aleatoriu una pentru a juca:

Probele și problemele: impunerea de sunete.

Pagina demo implementează ideea de a juca un clicter atunci când cursorul mouse-ului trece peste elementul din meniu. Imediat problema se deschide: următoarea redare a sunetului cu funcția .play () va fi efectuată înainte ca sunetul anterior să se încheie. Un element audio nu poate reproduce sunetul cu suprapunere. O nouă solicitare de redare de la funcția .play () este pur și simplu ignorată până când sunetul de rulare este terminat.

Primul gând este să utilizați mai întâi funcția .pause () pentru a opri redarea și a rula următoarea redare cu funcția .play (). Dar testarea a relevat o lipsă a acestei metode - o pauză este generată, dar un sunet nou nu începe în multe cazuri.







Cea mai bună metodă pentru rezolvarea problemei este duplicarea elementului audio pentru fiecare element de meniu. Astfel, elementele audio independente pot reda sunete suprapuse.

Redați sunet când treceți peste un element
Redați sunet când treceți peste un element

Astăzi, vrem să împărtășim câteva idei cu privire la efectul dezvăluirii blocurilor, pe care le puteți utiliza pentru proiectele dvs.

  • Dacă doriți să îmbunătățiți în mod semnificativ nivelul de securitate al site-ului dvs. pe WordPress, atunci nu puteți evita configurarea fișierului .htaccess. Acest lucru nu numai că vă va proteja de o serie de atacuri de hackeri, ci va organiza și redirecționări, precum și rezolvarea sarcinilor legate de memoria cache.

  • Designul materialelor este o tendință crescătoare de la Google. Această colecție conține teme gratuite pentru WordPress, realizate în acest stil popular.

  • Efecte asupra acestui lucru și există pentru a impresiona vizitatorii noștri. În această colecție, au fost colectate zeci de resurse, ale căror creatori au încercat foarte mult să-și impresioneze vizitatorii.

  • La sfârșitul lunii, oferim o selecție de materiale gratuite pentru web designeri pentru ultima lună.

    mulțumiri de clasă pentru post

    Redați sunet când treceți peste un element

    Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

    Redați sunet când treceți peste un element

    Redați sunet când treceți peste un element

    Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

    Redați sunet când treceți peste un element

    Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.

    Redați sunet când treceți peste un element

    Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!







    Trimiteți-le prietenilor: