Slideshow za použití pouze CSS

18. 7. 2018 13:38:17

Ahoj,

rád bych vytvořil klasický layout, tak že pod menu v section by byla přes autoplay spuštěna slideshow měníci se po 5 či 10s pro article ve 2-3 sekcích pouze za použití css. Nějaké zdrojaky jsem našel, ale nic co by odpovídalo přesně této představě s tím, že bych doplnil akorát cesty odkazů pro načítání bohužel ne. Poradí někdo jak na to?

18. 7. 2018 13:38:17

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356988

Pavel Mareš

(19 hodnocení)

18. 7. 2018 15:25:06

- https://codepen.io/trungk18/pen/EydyoL (což je dle mého to o čem mluvíš)

Problém je, že CSS ani HTML ti nedokáže nic časovat, to je JS - hromada věcí z CSS3 jede přes JS. Už jen z logiky fungování prolhížeče. HTML se vykresluje, ale nereaguje. CSS rozpoznává HTML ale nemanipuluje.

A důležitá otázka: Proč bys to proboha chtěl jen v CSS? Proč ne JS?

18. 7. 2018 15:25:06

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356987

Michal Jeřábek

18. 7. 2018 15:43:09

Napsal Doctore97;1475054
Problém je, že CSS ani HTML ti nedokáže nic časovat

Tak pokud by ta slideshow nemusela být ovladatelná, tak se to dá udělat pomocí CSS Animations. Ačkoliv by to šlo i tak, že by v případě, když inputy mají focus (nebo je myš nad slideshow), tak by se ta animace vypnula. Akorát by se to asi chovalo trochu divně.

18. 7. 2018 15:43:09

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356986

Pavel Mareš

(19 hodnocení)

18. 7. 2018 15:55:36

Napsal mjerabek;1475056
Tak pokud by ta slideshow nemusela být ovladatelná, tak se to dá udělat pomocí CSS Animations. Ačkoliv by to šlo i tak, že by v případě, když inputy mají focus (nebo je myš nad slideshow), tak by se ta animace vypnula. Akorát by se to asi chovalo trochu divně.

Tohle má hromadu problémů a nevím jak to bude s podporou v prohlížečích. Druhak CSS animace ti se něco rozhýbou, ale vždycky musíš +- vědět, jak to v HTML vypadá. Což se sice může dát nějak obejít taky, že si to před výpisem slideru v PHP (například) nějak rozpočítáš a vygeneruješ ... Ale není to zbytečně moc práce?

Navíc pokud se budu snažit dosáhnout co nejuniverzálnějšího řešení, tohle mi přijde jako hrozně zbytečná práce navíc ...

18. 7. 2018 15:55:36

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356985

Michal Jeřábek

18. 7. 2018 16:01:27

Napsal Doctore97;1475058
Ale není to zbytečně moc práce?

Tak to záleží na tom, jestli je z nějakého důvodu nutné, aby to fungovalo i s vypnutým JS. To v drtivé většině případů není, takže zbytečně moc práce to je, ale člověk pak může machrovat, že umí. ;)

18. 7. 2018 16:01:27

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356984

Pavel Mareš

(19 hodnocení)

18. 7. 2018 16:03:32

Napsal mjerabek;1475060
Tak to záleží na tom, jestli je z nějakého důvodu nutné, aby to fungovalo i s vypnutým JS. To v drtivé většině případů není, takže zbytečně moc práce to je, ale člověk pak může machrovat, že umí. ;)

A tak jasně :D Machrovat je fajn, ale zase efektivita vs. výsledný efekt :D

18. 7. 2018 16:03:32

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356983

Itzacatecnik

18. 7. 2018 16:28:58

Doctore97: Já právě myslel, že bez skriptování si ušetřím práci a bude to "elegantnější". Jinak ten link na ten kód je zhruba co bych chtěl, akorát teda aby byl v okně nadpis s nahledovym obrázkem a také aby pod tím bylo zřejmé mezi čímž se to přepíná po těch dejme tomu 5s (většinou jsou tam vyzobrazene ikony malých koleček třeba tři a když se to prepne mění se screen).

18. 7. 2018 16:28:58

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356982

Pavel Mareš

(19 hodnocení)

18. 7. 2018 16:30:51

Napsal Itzacatecnik;1475064
Doctore97: Já právě myslel, že bez skriptování si ušetřím práci a bude to "elegantnější". Jinak ten link na ten kód je zhruba co bych chtěl, akorát teda aby byl v okně nadpis s nahledovym obrázkem a také aby pod tím bylo zřejmé mezi čímž se to přepíná po těch dejme tomu 5s (většinou jsou tam vyzobrazene ikony malých koleček třeba tři a když se to prepne mění se screen).

Tak to co jsem poslal bys měl dokázat jednouše upravit. A nebo, bez JS to nebude ano náhodou elegantnější a rozhodně si neuštrříš práci. Stáhni "Slick" nebo "OwlCarousel" a máš po problémech. Pak už jen přestyluj a nastav dle potřeb.

18. 7. 2018 16:30:51

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356981

(20 hodnocení)

18. 7. 2018 17:20:39

V dnesni dobe je naprosto zbytecne vyhybat se javascriptu za kazdou cenu... Neco proste ciste html/css nezvladne...

18. 7. 2018 17:20:39

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356980

Itzacatecnik

18. 7. 2018 20:33:19

Napsal Aleš Jiříček;1475077
V dnesni dobe je naprosto zbytecne vyhybat se javascriptu za kazdou cenu... Neco proste ciste html/css nezvladne...

To ano, koneckonců s JS se počítá i v specifikaci html5 a CSS3, ale někde jsem tuším zahlédl krátký zdrojak jak to udělat jen s použitím html/css, tak jsem chtěl jít "jednodušší cestou"...

18. 7. 2018 20:33:19

https://webtrh.cz/diskuse/slideshow-za-pouziti-pouze-css/#reply1356979

Pro odpověď se přihlašte.

Přihlásit