Speciální efekty v jQuery

10. 9. 2018 11:41:02

Zdravím,

front-endu se věnuji minimálně a narazil jsem na jeden (pro mě) problém o kterém bych se prvně chtěl dozvědět něco více, než zadám poptávku na vyhotovení.

Potřebuji v jQuery udělat 3D spin efekt. Bude obrázek knihy, kterým by mělo jít 3D točit (na telefonu swajpem, na PC nejspíše tlačítko a kniha se roztočí sama). Určitě tam bude muset být nějaká setrvačnost, aby to vypadalo dobře a nějaký event, pokud kniha dosáhne určité rychlosti, v tomto eventu bude další efekt, kde z knížky vypadnou dárečky, které se pod knížkou seřadí.

Našel jsem v rychlosti třeba tento efekt - https://www.jqueryscript.net/demo/Simple-jQuery-Slider-Plugin-with-3D-Flip-Effect-Impulse-Slider/samples/hexagon/

chtěl bych se zeptat zde zkušenějších kodérů, jestli je reálné něco takového zpracovat, aby to vypadalo dobře (ne polovičaté řešení, kde se kniha 1 z 5 případů bez důvodu zasekne atp.), jak dlouho by to Vám osobně trvalo a jaká by byla za takové efekty Vaše cena.

dále bych se chtěl ještě zeptat, co pro takové efekty musí udělat grafik, jestli má být kniha graficky navržena ze všech stran, nebo nějak jinak.

Díky moc za reakce!

10. 9. 2018 11:41:02

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364859

David Petricek

(32 hodnocení)

10. 9. 2018 12:33:50

Dobrý den, vhodnější mi přijde použít něco z našich českých končin.

Mám dobré zkušenosti s http://jquery.vostrel.cz/reel

A práce je to spíše pro grafika a vytvoření pohybu než kodéra pro kterého to je práce na pár minut.

Edit: pro opravdu plynulý efekt je potřeba minimálně 28 framu, optimálně 32 po 11-12°

A pokud seženete kodéra s dostatkem času a velkým rozpočtem, tak https://threejs.org/

10. 9. 2018 12:33:50

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364858

Denis Ulmann

(9 hodnocení)

10. 9. 2018 13:18:58

Díky za odpověď. Nejsem grafik tak se chci zeptat, jak se potom spojí grafikova práce s tou kodérskou? Aby byl kodér schopen nasadit animace od grafika a jak vůbec tyto animace od grafika mají vypadat?

10. 9. 2018 13:18:58

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364857

David Petricek

(32 hodnocení)

10. 9. 2018 13:26:10

V případě pluginu reel se pracuje z maticí fotek ideálně s vloženou průhledností.

A každý kodér, i negrafik si zvládne zpracovat něco takového z podkladu od grafika na kterých to celé stojí.

V případě threejs se vkládá hotový 3D model do scény.

10. 9. 2018 13:26:10

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364856

Miroslav Foltyn

(3 hodnocení)

10. 9. 2018 13:35:17

V případě three.js ani nemusí grafik řešit 3D, stačí, když nachystá obrázky reprezentující jednotlivé strany pomyslného obdélníku reprezentující knihu - v kódu vytvořit obdelník a dát mu texturu je banální. Otáčení apod. jistě nebude problém, divil bych se, kdyby v dokumentaci již neměli nějaký podobný příklad.

EDIT: Rozhodně v tom nejsem zběhlý, ale upravit příklad z dokumentace nevyžadovalo nějakou hlubokou znalost: http://demos.miroslavfoltyn.com/rectangle/

10. 9. 2018 13:35:17

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364855

Denis Ulmann

(9 hodnocení)

10. 9. 2018 14:49:26

Napsal Miroslav Foltýn;1484291
V případě three.js ani nemusí grafik řešit 3D, stačí, když nachystá obrázky reprezentující jednotlivé strany pomyslného obdélníku reprezentující knihu - v kódu vytvořit obdelník a dát mu texturu je banální. Otáčení apod. jistě nebude problém, divil bych se, kdyby v dokumentaci již neměli nějaký podobný příklad.
EDIT: Rozhodně v tom nejsem zběhlý, ale upravit příklad z dokumentace nevyžadovalo nějakou hlubokou znalost: http://demos.miroslavfoltyn.com/rectangle/

Koukám na to, vypadá to dobře, děkuji za příklad jak by to vypadalo s knížkou přímo.. koukal jsem do zdrojáků a vidím knížky jen ze stran, takže paráda. Co mě tak rychle napadá na co jsem nekoukal, jestli se dá měřit rychlost rotace a tím i vlastně spustit ten event při dosažení nějaké rychlosti.

EDIT: Na telefonu v safari mám 2 FPS a s knihou se nedá moc efektivně točit, to je pro mě celkem problém v tomto případě.

10. 9. 2018 14:49:26

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364854

Miroslav Foltyn

(3 hodnocení)

10. 9. 2018 15:17:56

Kód je pouze příklad. Vzhledem k tomu, že se tam pracuje s klasickými událostmi myši, jistě by šla změřit rychlost rotace (vzdálenost/čas).

Co se týče Safari, tak dle diskuze zde: https://github.com/mrdoob/three.js/issues/1376 (sice pár let stará, ovšem nevím jakou verzí iPhone disponujete a i v novější diskuzích se prostě tvrdí, že je problém ze strany iOS Safari), protože Apple tlačí složitější aplikace do AppStore. Zda-li problém se Safari na iOS platí pouze pro příklad, který jsem já zveřejnil si můžete vyzkoušet prohlédnutím jiných ukázek zde: https://threejs.org/, já fyzickým iPhonem nedisponuji a ve virtuálu to zkoušet nebudu. V nejhorším případě můžete dát pro iOS Safari nějaký statický fallback, vyzkoušet jiný renderer threejs nebo upravit parametry renderu z mého dema ať už pro všechny user-agenty nebo specificky pro iOS Safari.

10. 9. 2018 15:17:56

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364853

Michal Jeřábek

10. 9. 2018 16:13:53

Takovýhle jednoduchý objekt lze udělat i jenom pomocí CSS, což zvládá v pohodě i poměrně starý iPad Mini 2.

10. 9. 2018 16:13:53

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364852

Miroslav Foltyn

(3 hodnocení)

10. 9. 2018 16:36:43

Jasně, šlo by to i nějak postavit v DOM-u (jako třeba tady https://tympanus.net/Development/3DBookShowcase/index.html), záleží akorát na tom, jak moc interaktivní a bohaté na efekty to je třeba, čím víc, tím více se to bude táhnout k něčemu jako threejs.

10. 9. 2018 16:36:43

https://webtrh.cz/diskuse/specialni-efekty-v-jquery#reply1364851

Pro odpověď se přihlašte.

Přihlásit