NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Martin Hudec
Člen
Avatar
Martin Hudec:27.11.2017 19:09

Nevíte někdo nejaký šikovný kód pro to. Ale nechci tam dát jenom 2 obrázky, chtěl bych jich tam dát více.

 
Odpovědět
27.11.2017 19:09
Avatar
Petr Šťastný
Tvůrce
Avatar
Odpovídá na Martin Hudec
Petr Šťastný:27.11.2017 19:44

Nejjednodušší řešení by byl prostě gif. Nebo můžeš uložit do nějaké adresáře obrázky

background1.png
background2.png
...
background30.png

a 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.

Editováno
 
Nahoru Odpovědět
27.11.2017 19:44
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:27.11.2017 20:46

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ě.

Nahoru Odpovědět
27.11.2017 20:46
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:28.11.2017 2:47

Nemyslím si, že by Edge měl špatnou podporu animací, případně to nějak dolož.

https://caniuse.com/#…

Nahoru Odpovědět
28.11.2017 2:47
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:28.11.2017 8:53

Tak třeba tuto animaci jsem zkoušel otevřít v prohlížeči Edge a nefungovala mi. Ve firefoxu a chromu funguje.

Nahoru Odpovědět
28.11.2017 8:53
Neaktivní uživatelský účet
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Peter Sciranka:28.11.2017 10:30

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;}
}
Nahoru Odpovědět
28.11.2017 10:30
Act as if it was Impossible to Fail
Avatar
Petr Šťastný
Tvůrce
Avatar
Petr Šťastný:28.11.2017 14:48

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.

 
Nahoru Odpovědět
28.11.2017 14:48
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petr Šťastný
Neaktivní uživatel:28.11.2017 15:02

Ne, týkaly se jenom gifu na pozadí :)

Nahoru Odpovědět
28.11.2017 15:02
Neaktivní uživatelský účet
Avatar
Petr Šťastný
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Petr Šťastný:28.11.2017 15:09

Dobře, díky :)

 
Nahoru Odpovědět
28.11.2017 15:09
Avatar
Tano7
Člen
Avatar
Odpovídá na Martin Hudec
Tano7:15. února 5:17

Nejjednodussi a funcni reseni na zmenu libovolneho poctu obrazků na pozadi stranky pri F5 /znovunacteni stranky/:
Fotky nahrat v nize uvedenem pripade do slozky "images"

index.php

<?php
// Získání pole všech obrázků ze složky
$images = glob('images/*.{webp,jpg,jpeg,png,gif}', GLOB_BRACE);
// Výběr náhodného obrázku
$randomImage = $images[array_rand($images)];
?>

<!DOCTYPE html>
<html lang="cs" dir="ltr">
        <meta charset="UTF-8">
    <title>ViT ✌ REFERENCE - java, php, JS, html, css, weby, grafika</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual, shrink-to-fit=no, viewport-fit=cover, minimal-ui">
<head>
<style>
    body {
        background-image: url('<?php echo $randomImage; ?>');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        transition: background-image 0.5s ease-in-out; /* Plynulá změna */
    }
</style>
</head>
<body>
    <h1>Vítejte na https://programervit.kesug.com/</h1>
</body>
</html>
Nahoru Odpovědět
15. února 5:17
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:16. února 11:44

Proc otevirat tema z r 2017?
Proc v tematu html + css pouzivat php reseni, kdyz to jde resit pres js? A mozna jen pres css.

 
Nahoru Odpovědět
16. února 11:44
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 11 zpráv z 11.