BLACK FRIDAY - Největší IT akce roku. Získej až 80 % kreditů navíc nebo využij slevy až 80 % na e-learning. Ale pozor, akce platí pouze do 30. 11. 2025.
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.11.2014 14:39

Pozadie stránky môžeš vyrešiť tak, že do stránky vložíš obaľovací element alebo element s pevnou pozíciou (s veľkosťou 100% v oboch smeroch), ktorý bude súčasťou nejakého pluginu slidera alebo si môžeš v JavaScripte vytvoriť vlastný slider.

Odpovědět
5.11.2014 14:39
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:5.11.2014 16:44

Nač to řešit nějakým dalším divem nebo sliderem (už tak je všude nadivováno jako v Kocourkově :-) ), když nám HTML5 a CSS3 nabízí krásné animace, přechody :-)

Editováno 5.11.2014 16:46
 
Nahoru Odpovědět
5.11.2014 16:44
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.11.2014 17:09

Pozadí lze snadno měnit, záleží na tom, co tam chceš mít a jakým způsobem ho hodláš měnit. Zde je například nádherný příklad na změnu barvy pozadí. http://www.itnetwork.cz/…zmena-pozadi Přes CSS3 se dají udělat animace, se kterými můžeš načasovat jednotlivé změny, ale ne ve všech prohlížečích toto funguje (staré počítače na školách, důchodci a jejich internety)... :)

Nahoru Odpovědět
5.11.2014 17:09
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.11.2014 19:29

Teď jsem si vlastně uvědomil, že vlastnost background-image nemůže být animována, takže bys musel použít i trochu JS. Bych to asi vyřešil tak, že vložíš do pozadí nějaký div (jak říkal lamka02sk) a u něj budeš přes JS měnit pozadí...

EDIT: beru to zpět, ono to funguje, vydrž... :D

Editováno 5.11.2014 19:32
Nahoru Odpovědět
5.11.2014 19:29
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:5.11.2014 19:40 
<style>
@-webkit-keyframes animace {
  0%, 15% { // Od nuly do 15 procent bude tento obrázek
    background-image: url('frame-01.png');
  }
  // Od 15 do 20 procent bude přechod
  20%, 35% {
    background-image: url('frame-02.png');
  }
  40%, 55% {
    background-image: url('frame-03.png');
  }
  60%, 75% {
    background-image: url('frame-04.png');
  }
  80%, 95% {
    background-image: url('frame-05.png');
  }
}

body {
  -webkit-animation-name: animace;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infineite; // nekonecno
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}
</style>
Editováno 5.11.2014 19:41
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
5.11.2014 19:40
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.