Lightboxová vstupní stránka

V dávných dobách měl každý správný web vstupní stránku s odkazem na hlavní web. Dnes jde k tomu využít JavaScript.

Jak jednoduše vytvořit lightboxové vyskakovací okno ihned po načtení stránky.

Taková věc nemusí být jen bezúčelným otravným prvkem, ale může dávat i smysl v případech jako:

  • upozornění na nějakou významnou událost na stránce,
  • upozornění na speciální obsah,
  • reklama.

Jak na to?

První možnost je použít nějaký lightbox skript — třeba Magnific Popup ihned po načtení stránky (ukázka).

$.magnificPopup.open({
    items: [
      {
        src: $('<div class="popup">Vstupní vyskakovací okno</div>'),
      }
    ]
});

Jako obsah (tj. do src) je možné umístit obrázek, HTML kód (jako na ukázce) nebo odkaz na jinou HTML stránku.

Vlastní řešení

Druhá možnost je si potřebný efekt z lightbox skriptu vytvořit ručně. V podstatě stačí jen obrázek/element vycentrovat a po kliknutí ho zavřít změnou třídy + vytvořit částečně průhledný element, co překryje původní obsah.

Vstupní stránka

Vlastní vyskakovací obsah ihned po načtení.

(Okno se automaticky otevírá při načtení stránky.)

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ářů ↓

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

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.

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