Diskuze: Scrollovanie obrázku / Parallax / CSS

HTML a CSS HTML a CSS Scrollovanie obrázku / Parallax / CSS American English version English version

Avatar
Gabriel Konečný:

Cau,

Chcel by urobit miniatúru webovej stránky, ktorá sa bude scrollovat súcasne s webovou stránkou. Jej miniatúra bude umiestnená v obrázku smartphonu, tabletu a PC. (vid prilozene obrázky)

CSS:

.parallax{

    background-image: url(parallaxb.jpg);

    position: absolute;
    margin-top: 250px;
    left: 500px;


    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 20%;

    height: 167.5px;
    width: 100%;
    }

.pc{
   padding-left: 408px;
   padding-top: 182px;
   width: 521px;
   height: 368px;

}

Je tam pár problémov:

  1. Obrázok stránky sa scrolluje naopak
  2. Obrázok zacína niekde v strede
  3. Rýchlost scrollovania je prílis pomalá

Vie mi s tým niekto pomoct?

Vopred dakujem.

 
Odpovědět 28. července 11:17
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na Gabriel Konečný
David Hynek:

čas pro javascript :)

můžeš pak nastavit, že rolování pozadí bude x-krát rychlejší nebo pomalejší než samotné rolování stránky a pod. Ale spíš bych použil pomalejší, protože by pak mohl obrázek pozadí dojít...

Editováno 28. července 11:48
Nahoru Odpovědět 28. července 11:46
Čím víc vím, tím víc věcí nevím.
Avatar
Odpovídá na David Hynek
Gabriel Konečný:

Nevies o nejakej stranke kde to je lepsie vysvetlene, resp nejaky tutorial na tento javascript?

Dakujem

 
Nahoru Odpovědět 28. července 13:57
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na Gabriel Konečný
David Hynek:

co třeba první odkaz, při googlení :) http://pixelcog.github.io/parallax.js/
ale na rovinu řeknu že jquery nemám rád. Je to kanon na vrabce, člověk nikdy nevyužije celou knihovnu a těch pár efektů co by se člověku hodilo, zabere pár řádků prostého javascriptu... třeba tady http://inner.geek.nz/…pt/parallax/

Nahoru Odpovědět 28. července 15:43
Čím víc vím, tím víc věcí nevím.
Avatar
Gabriel Konečný:

Problem je ze ja potrebujem 3x scrolling effekt do kazdeho obrazku (vid nizsie wireframe)

Vsade najdem len ako to robia na cely background tj. cover.
Ako nahle to chcem zmensit tak to robi problemy, neni to cele, nezacina to od zaciatku a tak..

 
Nahoru Odpovědět 28. července 17:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.