Frontend developer externista
Zobrazují se odpovědi 1 až 9 z 9

Speciální efekty v jQuery

  1. 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/Si...mples/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!

  2. Co se právě děje na Webtrhu?
    Zivnyon poptává: Tvorba webu městské organizace
    Aramis1 poptává: Laravel, Git, VPS
    Mareksm poptává: Správce VPS
  3. 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/
    Naposledy upravil David Petricek : 10.09.2018 v 12:42

  4. 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?

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

  6. 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/
    Naposledy upravil Miroslav Foltýn : 10.09.2018 v 14:28

  7. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    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ě.

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

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

  10. Jasně, šlo by to i nějak postavit v DOM-u (jako třeba tady https://tympanus.net/Development/3DB...ase/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.

Hostujeme u Server powered by TELE3