Prodej projektů Duchod.cz, Duchodova-Reforma.cz a doména MojeFinance.cz
Zobrazují se odpovědi 1 až 6 z 6

Animace na webu - hledám návod

  1. Ahoj,

    už na několika webech jsem viděl animaci, která mě zaujala a rád bych se ji naučil nebo bych se o ni alespoň něco dozvěděl.

    Hledám nejlépe nějaký tutoriál na YT, nebo písemný návod. A nebo poprosím alespoň o klíčová slova. Bohužel, ať hledám jak hledám, nemohu ničeho dohledat a už jsem nad tím strávil několik hodin.

    V současné době ovládám HTML, CSS a nyní se učím jQuery, takže poprosím o vstřícnost, jedná-li se o nějakou banalitu v JS. :)

    Daná animaci se nachází např. na následujícím webu, hned v úvodní sekci. Při potočení kolečkem na myši se obrázky na stranách se posunují po ose X do ústraní a současně mizí - postupuje do opacity:0.
    Např. zde: https://konferenceglorious.cz/

    Na jiných webech se například objevují tímto stylem sekce zespodu stránky po ose Y a jdou do opacity:1.

    Předem díky.
    Štěpán

  2. Co se právě děje na Webtrhu?
  3. Nejjednodušší budeš mít asi přímo knihovnu. Třeba https://daneden.github.io/animate.css/
    Ze zdroje už si vyčteš jednotlivé animace a můžeš si je případně upravit.

    Pak nějaký tutorial třeba https://www.w3schools.com/css/css3_animations.asp

  4. Citace Původně odeslal michal731 Zobrazit příspěvek
    Nejjednodušší budeš mít asi přímo knihovnu. Třeba https://daneden.github.io/animate.css/
    Ze zdroje už si vyčteš jednotlivé animace a můžeš si je případně upravit.

    Pak nějaký tutorial třeba https://www.w3schools.com/css/css3_animations.asp
    Diky za radu, nicmene klasicke CSS animace samozrejme znam. Mne jde vsak o takovou animaci, mozna je to spise pozicovani, kdy se pri scrollu koleckem dolu, treba jen o jeden zoubek, se element posune napr o 50px doleva, jakmile scrollnes o dalsi zoubek, tak se posune o dalsich 50px doleva a tak dokola, nez nezmizi.

  5. Zde napríklad. Pre vlastný efekt bude treba vždy niečo doplniť a prikombinovať vlastnou znalosťou, žiadny návod neodpovedá 100%.
    Animate elements when scrolled into view with native JavaScript | Edd Yerburgh

  6. Nebude to slovíčko "parallax" ?

  7. Děkuji všem za pomoc. Našel jsem plugin http://scrollmagic.io/, ten mi prozatím postačí. :)

Hostujeme u Server powered by TELE3