Diskuze: Pozadí

HTML a CSS HTML a CSS Pozadí American English version English version

Avatar
Daniel Zábojník:

Dobrý den, chtěl by jsem si udělat stránku na které bude dole text a měnící se pozadí. Jak by se to dalo vyřešit? Chtěl bych aby se pozadí měnilo přibližně každých 15 sekund. Předem Díky

Odpovědět 5.11.2014 14:23
Nesnáším psaní { } ale bohužel jsou potřeba a vyhnout se jim nejde!
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Daniel Zábojník
Samuel Illo :

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.

Nahoru Odpovědět 5.11.2014 14:39
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Samuel Illo
tomasmanhal:

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
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Daniel Zábojník
Fredep:

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
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Odpovídá na Fredep
Daniel Zábojník:

No chtěl bych aby se měnili obrázky.. Co si já zvolím..

Nahoru Odpovědět 5.11.2014 18:55
Nesnáším psaní { } ale bohužel jsou potřeba a vyhnout se jim nejde!
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Daniel Zábojník
Fredep:

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
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Daniel Zábojník
Fredep:
<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í
+1 bodů
Řešení problému
Nahoru Odpovědět  +2 5.11.2014 19:40
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
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 7 zpráv z 7.