Diskuze: Měnící se obrázky na pozadí
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 9 zpráv z 9.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Nejjednodušší řešení by byl prostě gif. Nebo můžeš uložit do nějaké adresáře obrázky
background1.png
background2.png
...
background30.pnga v JS po nějaké době měnit pozadí.
Buďto udělej gif s více obrázky, nebo se nauč JS.
https://www.itnetwork.cz/…ript/zaklady
Myslím, že když si to dočteš do 9. dílu a najdeš si na internetu funkci
setInterval tak bys to měl dát sám.
Dalo by se to asi řešit i pomocí CSS něčím takovýmto:
@keyframes pozadi
{
0% {background-image: url(obrazek1.png);}
25% {background-image: url(obrazek2.png);}
50% {background-image: url(obrazek3.png);}
75% {background-image: url(obrazek4.png);}
100% {background-image: url(obrazek5.png);}
}
@-webkit-keyframes pozadi
{
0% {background-image: url(obrazek1.png);}
25% {background-image: url(obrazek2.png);}
50% {background-image: url(obrazek3.png);}
75% {background-image: url(obrazek4.png);}
100% {background-image: url(obrazek5.png);}
}
body{
animation: pozadi 10s repeat;
-webkit-animation: pozadi 10s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}Ale JS bude určitě lepší, protože animace pomocí CSS mají špatnou podporu například u Edge a IE a navíc se to v různých prohlížečích může chovat různě.
Nemyslím si, že by Edge měl špatnou podporu animací, případně to nějak dolož.
Tak třeba tuto animaci jsem zkoušel otevřít v prohlížeči Edge a nefungovala mi. Ve firefoxu a chromu funguje.
Skúšal som to rozbehať, ale v EDGE mi to fakt nejde a čo som hľadal na
nete, tak som našiel zmienky na fórach, že IE nepodporuje animation na
background-image. Každopádne skúšal som aj rôzne transition, a tie fungujú
ok aj v EDGE.
Ak použijem background, kde nastavím farbu, tak to funguje všade ok.
Toto nefunguje v prehliadači Edge:
@keyframes pozadi
{
0% {background-image: url("bg1.jpeg");}
25% {background-image: url("bg2.jpeg");}
50% {background-image: url("bg3.jpeg");}
75% {background-image: url("bg4.jpeg");}
100% {background-image: url("bg5.jpeg");}
}
@keyframes pozadi
{
0% {background: url("bg1.jpeg");}
25% {background: url("bg2.jpeg");}
50% {background: url("bg3.jpeg");}
75% {background: url("bg4.jpeg");}
100% {background: url("bg5.jpeg");}
}Toto funguje OK:
@keyframes pozadi
{
0% {background: red;}
25% {background: blue;}
50% {background: yellow;}
75% {background: green;}
100% {background: magenta;}
}K těm mínusům, co jsem dostal: proč je špatný nápad použít JS? GIF jsem navrhl jako takové to primitivní řešení, protože z povahy otázky jsem myslel, že se ještě s JS nesetkal, a nejjednodušší by bylo někdo online spatlat několik obrázků do gifu (teď mě napadlo, můžu vlastně gif jako animovaný obrázek použít pro background image?) s tím, že to časem nahradí JavaScriptem. CSS by bylo trochu riskantní, s tím, že to někde nemusí fungovat (jak už byl zmíněný EDGE), kdežto javascriptová manipulace s DOM a časovač exisuje snad všude.
Nechci nikoho přesvědčovat o výhodách gifu (navrhl jsem jako prozatímní řešení), jenom bych se rád zeptal, jestli se ty mínusy týkali i JavaScriptu. Díky.
Zobrazeno 9 zpráv z 9.