| Autor | Zpráva | ||
|---|---|---|---|
| Jenda B Profil |
#1 · Zasláno: 12. 3. 2018, 10:42:34
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 |
#2 · Zasláno: 12. 3. 2018, 11:00:56
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 |
#3 · Zasláno: 12. 3. 2018, 11:44:06
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 |
#5 · Zasláno: 12. 3. 2018, 12:03:23
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 |
#6 · Zasláno: 12. 3. 2018, 12:25:43
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 |
#7 · Zasláno: 12. 3. 2018, 13:50:13
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 |
#8 · Zasláno: 12. 3. 2018, 14:29:02
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 |
#9 · Zasláno: 12. 3. 2018, 15:41:09
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 * |
#10 · Zasláno: 12. 3. 2018, 15:49:57
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 |
#12 · Zasláno: 13. 3. 2018, 12:30:53
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> |
||
| 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 |
#15 · Zasláno: 13. 3. 2018, 13:27:46
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 |
#16 · Zasláno: 13. 3. 2018, 13:59:38
Jenda B:
áno, stačí zmeniť iba tie URL adresy. |
||
| Jenda B Profil |
#17 · Zasláno: 13. 3. 2018, 14:06:51
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 |
#19 · Zasláno: 13. 3. 2018, 17:53:20
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 |
#20 · Zasláno: 13. 3. 2018, 18:07:35
Trejpa:
nestačí přidat prefix? @-webkit-keyframes example a @-moz-keyframes example? |
||
| Keeehi Profil |
#21 · Zasláno: 13. 3. 2018, 21:48:22
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 |
#22 · Zasláno: 13. 3. 2018, 22:32:42
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 |
#23 · Zasláno: 14. 3. 2018, 08:59:26
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 |
#25 · Zasláno: 14. 3. 2018, 12:48:13
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 |
#26 · Zasláno: 14. 3. 2018, 13:22:47
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 |
#27 · Zasláno: 14. 3. 2018, 18:23:58
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 :-)
|
||
|
Časová prodleva: 6 dní
|
|||
| Jenda B Profil |
#28 · Zasláno: 20. 3. 2018, 10:36:25
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 |
#30 · Zasláno: 20. 3. 2018, 11:16:43
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. |
||
|
Téma pokračuje na další straně.
|
|||
0