« 1 2 »
Autor Zpráva
Jenda B
Profil
Dobrý den. Nikde jsem nenašel, jak se udělá střídání obrázků zatmíváním a roztmíváním. Díky za radu.
Bubák
Profil
Co mydlíš tím zatmíváním a roztmíváním, to ti nestačí obyčejná prolínačka?
To má běžet "samo", nebo to chceš jako efekt po najetí myší?
Pokud nemáš nějaký extra požadavek, na netu je plno hotových řešení.
Jenda B
Profil
Bubák:
Nechci prolínačku, chci zatmění a rozetmění. Může to běžet samo anebo i s nastavením po najetí. Nevím, jaké řešení myslíš. Zadal jsem klíčové slovo "zatmívání" a na googlu ani tady na vašem webu se nic neobjevilo. Chtěl bych zápis v html. Pokud tedy někde něco o tom je, pošli link. Dík.
Tomášeek
Profil
Jenda B:
Zadal jsem klíčové slovo "zatmívání"
Chce to zkusit anglicky nebo nějakým synonymem. Spíše ale anglicky. Jsi na internetu první den? Byl jsi líný hledat i ve vedlejším tématu.

Chtěl bych zápis v html
HTML to neumí.

pošli link
Jak vidno, anglicky umíš, tak tak zkus i hledat.
Jenda B
Profil
Na netu první den nejsem, ale v tvorbě se příliš nevyznám. Zatmívání, roztmívání je obvyklý termín ve filmové scénáristice. A když se umějí zatmívat a rozetmívat i webové obrázky, tak pak je divné, že při zadání klíčového "zatmívání obrázku" se nikde nic neobjeví - ani u vás... Nevím v jakém vedlejším tématu to hledat, když se nikde nic centrálně neobjeví... Nevím, proč to hledat v angličtině, když by tahle ne neobvyklá tvůrčí webová záležitost mohla být již někde zaznamenána v češtině... Díky za přesnější navedení.
Kajman
Profil
Jenda B:
Pokud nelze nalézt hotové řešení v mateřském jazyce, naprogramujte si to sám - např. můžete mít pod obrázkem černé pozadím, pak budete javascriptem postupně měnit průhlednost (css:opacity) obrázku z žádné na plnou. Až bude úplně neviditelný, vyměníte obrázek nebo cestu k němu a začnete ho zase zneprůhledňovat.
Jenda B
Profil
No dík za aspoň nějaké navedení. Tou změnou průhlednosti to asi nějak půjde, ale bude třeba tu menší a menší průhlednost zadat časově a bude to asi trochu sekané...(?) Myslím, že změna průhlednosti a plynulé zatmívání je trochu rozdíl. Je škoda, že "nelze nalézt hotové řešení v mateřském jazyce" - tedy zápis, jak se jedna fotka zatmívá a druhá následná se rozetmívá... A je to vlastně důkaz, že ten termín "zatmívání" skutečně na netu není, a že jsem skutečně otevřel nové téma, které i váš precizně poučný web prozatím doposud nějak opomenul...
Tomášeek
Profil
Jenda B:
Nejsi náhodou politik? Tolik slov kvůli tomu, že nejsi schopen hledat v angličtině, nebo přeformulovat dotaz (synonymicky). Jinak Kajman tě navedl úplně přesně, jen nevím, jestli s tím dokážeš nějak naložit...
Bubák
Profil
Jenda B:
bude třeba tu menší a menší průhlednost zadat časově a bude to asi trochu sekané
Před 15 lety se to tak dělalo a běžný kancelářský PC to zvládal plynule.

Přestaň si stěžovat, ukaž více snahy, třeba se snažíš, ale nevíme o tom.
TomášK.
Profil *
Najít něco česky bez znalosti terminologie mi nepřijde úplně jednoduché. Pár minut mi to trvalo i když jsem věděl, co chci.

* link: Plynulá změna obrázků
* v angličtině fadein/fadeout, určitě to je v jquery.effects a další spoustě khihoven
Keeehi
Profil
Jenda B:
Nechci prolínačku, chci zatmění a rozetmění.
Ale chceš. Jen tady děláš chytrého ale přitom tomu moc nerozumíš. To tvé zatmění je prolinačka z obrázku do černého obrázku, rozetmění je postup opačný.
Postup, jakým se to běžně dělá je právě tou změnou průhlednosti.
K tomu, aby to bylo trháné není důvod. Pokud se bude průhlednost měnit alespoň 30x za vteřinu, bude to plynulé. Změnit průhlednost není pro prohlížeč až tak náročný úkol a měl by to zvládat i rychleji.
Takto vypadá prolínačka pomocí css animace. Živá ukázka
A takto prolínačka přes černou, neboli ta tvoje zatmívčka. Živá ukázka
Jenda B
Profil
Dobrý den. Tak jsem se tomu v rámci času a možností nyní trochu věnoval. Díky TomášK za ten nějaký čas, ale na tom jecas.cz byla jen obrázková prezentace a nejsou tam polopatické zápisy, které jako neuměl potřebuju - o angličtině nemluvě... Díky Keeehi, že našel konečně zatmívačku - což je u psychologických filmů obrazově naprosto běžné - na webech asi ne.
Zkusil jsem tedy dle té živé ukázky udělat zápis, ale po vložení do html indexu na webu to nefunguje. Samozřejmě jsem v tomto CSS břídil, takže to mám nějak blbě.
Toto je můj stávající výtvor :
Mám v adminu ty 3 fotky z té ukázky, které se na stránce zobrazují : <img src="10.jpg"> <img src="11.png"> <img src="12.jpg"> a tento zápis :
<head> <style type="text/css"> 
{ 0%   {background-image: url("10.jpg");}
15% {background-image: url("11.png");}
50% {background-image: url("12.jpg");}
65% {background-image: url("11.png");}
100%   {background-image: url("10.jpg");} } } 

div {
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;}
</style>
</head>
ale asi jsem to tam s tím url nějak zmršil... Dík za opravu.
Tomášeek
Profil
Jenda B:
Díky Keeehi, že našel konečně zatmívačku
Spíše napsal, než našel.

Ten CSS zápis máš špatně. Je s podivem, že nejsi ani schopen zkopírovat funkční kód (copak tam ten CSS zápis začíná složenou závorkou - { 0%?). To je fakt psycho (a nemusím ani do kina na psycho film :-)).
weroro
Profil
Jenda B:
Ak by si to chcel mať ľahšie upraviteľné Živá ukázka

Je to prekombinované ale funkčné (pôjde aj v EDGE ale mám však pocit, že to nepôjde v IE).
Jenda B
Profil
Tomášeek : No myslel jsem, že ten úvod není podstatnej pro tu zkoušku. Takže ten úvod má být :
<head> <style type="text/css"> 
@keyframes example/* The animation code */
{ 0%   {background-image: url("10.jpg");}
atd....
??

a uprostřed (před tím div) má být i to :
/* The element to apply the animation to */ 
??

No ale stejně to nefunguje...

weroro : Podívám se na to. Takže když si ty fotky zase dám do image.jpg a udělám zápis, že namísto toho tvého :
--obrazok-1: url("farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg");
bude :
--obrazok-1: url("image1.jpg");
a když to teda všechno zkopíruju a vložím do indexu html, tak by to mělo fungovat?
weroro
Profil
Jenda B:
áno, stačí zmeniť iba tie URL adresy.
Jenda B
Profil
weroro : vložil jsem do indexu tento tvůj resp. upraveně můj zápis :

<head> <style type="text/css">
.carousel {
    --sirka: 40em;
    --vyska: 25em;
    --hrubka-ramika: 1px;
    --cas-prelinania: 3s;
    
    --pocet-obrazkov: 4;
    --obrazok-1: url("21.jpg");
    --obrazok-2: url("22.jpg");
    --obrazok-3: url("23.jpg");
    --obrazok-4: url("24.jpg");
    
    position: relative;
    width: var(--sirka);
    height: var(--vyska);
    border: var(--hrubka-ramika, 0) solid gray;
    background-size: 100% 100%;
    animation: animate calc(var(--cas-prelinania) * var(--pocet-obrazkov)) infinite;
}

@keyframes animate {
    0%   {background-image: var(--obrazok-1)}
    25%  {background-image: var(--obrazok-2)}
    50%  {background-image: var(--obrazok-3)}
    75%  {background-image: var(--obrazok-4)}
    100% {background-image: var(--obrazok-1)}
}

.carousel::after {
    content: attr(data-popis);
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--sirka);
    line-height: 3em;
    box-sizing: border-box;
    background: rgba(0,0,0,.6);
    font-family: sans-serif;
    text-align: center;
    color: #fff; }

</style>
</head>

a nic se nezobrazuje... :-( Hraje tam nějakou roli velikost těch obrázků po tom přemístění z toho webu na plochu? Byly obrovské - zmenšil jsem je cca na 100 KB.
Jenda B
Profil
weroro : Tak už to jde. Chyba byla v tom, že jsem tam smolil ten svůj nějakej úvod a závěr, a až teď jsem si všiml, že je možno ten tvůj zápis vzít přesně ze zdrojáku té vaší zkušební tvůrčí stránky. A pokud jsem jen nahradil ty webový obrázky fotkama z plochy (20.jpg atd.), tak to už funguje.
Jenže ty tvoje obrázky jsou prolínací a já chci zatmívání. A to se již dostávám ke Keeehi a Tomášeek. Když do indexu vložím ten jejich zatmívací zdroják, tak to funguje, ale když tam vyměním webový obrázky fotkama, tak jak u weroro, tak to nejede - jen tam probleskne první obrázek a pak už je plocha bílá...


Tak byla drobná chyba v zápisu a asi i velikost těch fotek, které jsem upravil. Už to funguje. Díky.
Trejpa
Profil
A nikomu nevadí, že ukázky fungují pouze v Chrome?
Firefox neprolíná, Edge/IE má prázdný rámeček nebo rovnou nic.

Sám bych na to šel přes skript, hrubý nástřel.
T-fon
Profil
Trejpa:
nestačí přidat prefix? @-webkit-keyframes example a @-moz-keyframes example?
Keeehi
Profil
Trejpa:
Je pravda, že se na efekt prolínání při změně obrazků v mém případě spoléhám. Také jsem to psal v Chrome a jinde jsem to netestoval.
Ovšem v případě problémů se to dá velmi jednoduše změnit na ostré přechody mezi obrázky a efekt prolínání udělat pomocí průhlednosti. Což Jenda B nezvládne, když to neumí ani zkopírovat, to jsem však nemohl vědět.
Bubák
Profil
Prohlížeče odvozené od Chromia jsou pravděpodobně jediné, které umí (navzdory CSS specifikaci) background-image animovat.
Edge a Safari nemám po ruce, tam nevím, pokud někdo poreferuje, budu rád.
IE, Firefox a stará dobrá Opera background-image neanimují, změna obrázku na pozadí je skoková.
Testováno na Odkaz, reaguje na hover a pro testovací účely je tam i změna border-color.

Jediný způsob, jak docílit postupné změny obrázků napříč prohlížeči je změna průhlednosti.
Tomášeek
Profil
Bubák:
Safari je taky webkit, tam to funguje.
weroro
Profil
Bubák:
Jediný způsob, jak docílit postupné změny obrázků napříč prohlížeči
Čo sa týka mojej úpravy, tak to určite nepôjde v IE, ktorý nepodporuje premenné.
Bubák
Profil
Tomášeek:
Safari je taky webkit, tam to funguje.
Chrome už skoro 5 let používá Blink. Je to Fork WebKitu, rozdílů minimum, ale jistý podporou animované změny obrázkového pozadí jsem si nebyl, protože podle CSS specifikace background-image není animovatelná vlastnost.
Tomášeek
Profil
Bubák:
Chrome už skoro 5 let používá Blink
Aha, to jsem nevěděl, moc vývoj nesleduju :-) Ale mohu potvrdit, že v Safari (Macovém) to skutečně funguje, teď to jsem zkusil.
Jenda B
Profil
Ahoj vespolek. Tak jsem to už taky zjistil, že to funguje jen pro Chrome, ale jak jsem vyzkoušel ten "hrubý nástřel", tak to už jde i v FF i v IE. Díky, Trejpa :-)
Jenda B
Profil
Dobrý den. Pane Trejpa, ještě k tomu zatmívání.
Váš zápis z "hrubý nástřel" (relev. výňatek) je :

var obrazky = new Array(
"static.pexels.com/photos/7174/summer-grass.jpg",
"encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjOCNcnik0caAqRX601w3rTlf3ZTANFojDWVxc2WOkvOzu4NF7HQ",
"Odkaz",
"Odkaz"
);

Ono to ale funguje i bez toho "encrypted-tbn0.gstatic.com" - žádná černá tam ani být nemusí - pro amatéry, jako jsem já, je to pak "méně složité"... :-) :

var obrazky = new Array(
"static.pexels.com/photos/7174/summer-grass.jpg",
"Odkaz",
"Odkaz"
);

A teď bych se chtěl zeptat :

1) Dalo by se udělat, aby nějaký obrázek tam byl staticky k vidění dýl? Tedy aby to jelo samovolně a aby některé obrázky trvaly kratší dobu a některé déle.
2) Taky aby se některé obrázky prolínaly (bez zatmění) = aby function nebyla tma a svetlo, ale prolínání. Pokud by to bylo složité ten prolínací příkaz tam situačně vkládat, tak na to prolínání bych si udělal novou samostatnou prezentaci. Pan weroro tady výše dal hezký prolínací carousel ("Živá ukázka"), ale šlo to jenom pro Chrome... :-(
3) A dalo by se to taky udělat, aby se ta prezentace pozastavila najetím myši?

Díky za pomoc.
Tomášeek
Profil
Jenda B:
LOL

Dalo by se udělat, aby
Dalo by se udělat všechno. Fakt si myslíš, že ti tu bude někdo psát tohle zadarmo? Diskusní fórum je tu od toho, aby ti pomohlo, pokud nebudeš moci s něčím hnout. Ne, aby ti na míru programovalo tvoje vysněné funkce.

Ono to ale funguje i bez toho "encrypted-tbn0.gstatic.com"
Ano, funguje...

žádná černá tam ani být nemusí - pro amatéry, jako jsem já, je to pak "méně složité"... :-)
... jenže to není černá, ale jen další obrázek. Druhý ze čtyř, které se zobrazují. Odebráním se animace nezhroutí, jen budou rotovat 3 obrázky místo 4.
Trejpa
Profil
Jenda B:
1) Ano.
2) Ano.
3) Ano.

Kód je psán na míru tvému původnímu dotazu. Každý ze zmíněných požadavků by znamenal zásadní překopání kódu, druhý rovnou psát kód od začátku s jinou filozofií změn mezi obrázky. Ale to já dělat nebudu. Doporučuji si někoho na podobné požadavky najmout nebo pohledat po Internetu hotová řešení, klíčová slova image a carousel.
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: