Baterka v CSS a JavaScriptu

Řešení je možná jednodušší, než se zdá.

  1. Základem je velký černý obrázek s průhlednou dírou uprostřed (asi by mohl mít větší rozměr než 5000 × 5000 px),
  2. ten se nastaví elementu roztaženému přes celou stránku jako background-image,
  3. pomocí opacity (popřípadě pro starší Explorery filter:alpha(opacity=XX)) se nastaví úroveň tmy,
  4. JavaScript bude tento obrázek posouvat dle pohybu myši a tím vytvářet výsledný efekt.

Funkce pro zjištění posice kursoru

To je nějaká hotová funkce sjednocující chování napříč prohlížeči.

function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};

    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

CSS

.baterka {
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url("baterka.png") center center no-repeat; 
    width: 100%; 
    height: 100%; 
    opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=70); /* průhlednost na 70 % */
}

JavaScript

document.onmousemove = function(e) {
    var cursorPos = getPosition(e); // zjištění posice kursoru
    /* Nastavení posice obrázku, 2500 je polovina šířky „obrázku s dírou“ */
    b.style.backgroundPosition = (cursorPos.x - 2500) + "px " + (cursorPos.y - 2500) + "px";
};

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Skrývání a odkrývání

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

Animace

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Komentáře