Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Rozdílné scrollování elementů

Aktivity
Avatar
k.ats
Člen
Avatar
k.ats:17.9.2014 8:28

Ahoj nevíte někdo jestli se dá pomocí stylování docílit toho aby se mě dva elementy při scrollování posouvali různou rychlostí. Jde mi např. o něco takového co mají na těchto stránkách: www.tescomobile.cz ale jednodušího, prostě pozadí elementu a na něm nějaký element třeba div. Při skrolování by se mi líbilo kdyby se každý element posouval jinou rychlostí. Snad jste mě pochopili. Myslím si, že se to bude dělat zřejmě pomocí javy, ale nevím, proto se ptám. Děkuji z reakce.

 
Odpovědět
17.9.2014 8:28
Avatar
Martin
Člen
Avatar
Martin:17.9.2014 9:54

ahoj

tutorial

https://ihatetomatoes.net/…ing-website/

Nahoru Odpovědět
17.9.2014 9:54
Je jedno co děláš, ale záleží jak dobře to umíš prodat.
Avatar
k.ats
Člen
Avatar
Odpovídá na Martin
k.ats:17.9.2014 10:03

Děkuji, tušil jsem, že tu bude java :-) No možná to nechám až nakonec, jestli se mi do toho vůbec bude chtít. Zatím si hraji se samotnou webovou stránkou, která má do cíle ještě dost daleko.

 
Nahoru Odpovědět
17.9.2014 10:03
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na k.ats
vajkuba1234:17.9.2014 10:15

Java a Javascript je rozdil. :)

Nahoru Odpovědět
17.9.2014 10:15
No hope, no future, JUST WAR!
Avatar
k.ats
Člen
Avatar
k.ats:17.9.2014 10:30

Pořád se člověk učí. Po roce jsem zabrousil opět do html a css a snažím se držet v těchto hranicích, protože java a javascript už je pro mě vyšší level :-) Doposud jsem myslel, že java a javascript je jedno a to samé :-) Programátor povoláním nejsem a web je pro mě spíš jen řekněme takový "vedlejší" koníček (html a css). Neživí mě to a dělám to pouze pro známé a jen jednoduché webové prezentace.

Editováno 17.9.2014 10:30
 
Nahoru Odpovědět
17.9.2014 10:30
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na k.ats
vajkuba1234:17.9.2014 10:32

Nebylo to myšleno negativně...

Nahoru Odpovědět
17.9.2014 10:32
No hope, no future, JUST WAR!
Avatar
Odpovídá na k.ats
Tomáš Maňhal:17.9.2014 11:18

On Javascript není nijak těžký, zvlášť při použití jQuery :-) pokud děláš web jen jako koníček, tak věřím, že s trochou času na zkoušení se vnoříš i do toho Javascriptu, který tvůj web příjemně oživí :-) Jen je nevýhoda, že někdo má JS vypnutý a tak je třeba ošetřovat i tyto podmínky :-)

 
Nahoru Odpovědět
17.9.2014 11:18
Avatar
k.ats
Člen
Avatar
Odpovídá na vajkuba1234
k.ats:17.9.2014 11:38

Také jsem to nemyslel negativně :-)
Jinak některé to jquery už jsem asi dělal, ale to nepovažuju za programování. To bylo jen, že jsem si vložil nějaký kus kódu do webové stránky nebo např. nějakou fotogalerii jsem si tam dával. To tak těžký nebylo, ale už to jsou hotový věci. Sám bych to nenaprogramoval :-)

 
Nahoru Odpovědět
17.9.2014 11:38
Avatar
Matej
Člen
Avatar
Matej:17.9.2014 18:16

k topicu - ide to spravit aj cez css pomerne jednoducho http://jsfiddle.net/xfg5Lju6/

offtopic- paralax na tej tesco stranke je to celkom v pohode , ale nechapem ako sa dakomu moze pacit parallax ako je v tom tutoriali :P

 
Nahoru Odpovědět
17.9.2014 18:16
Avatar
k.ats
Člen
Avatar
Odpovídá na Matej
k.ats:17.9.2014 18:43

Děkuji za tip. No vida, že to jde i v css :-) Já bych ale potřeboval jen jeden obrázek, který bude tak jakože plavat za nějakým článkem. Nebude to "vysoká" stránka a nepotřebuji X přechodů obrázků. Snažil jsem se o to dnes odpoledne asi 2 hodiny podle toho tutoriálu výše, ale nezadařilo se. Tak to asi nechám být, nebo na to možná mrknu později.

 
Nahoru Odpovědět
17.9.2014 18:43
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na k.ats
Honza Bittner:17.9.2014 18:50

Ona ta CSS verze uvedena není plnohodnotná paralax, je to pouze fixní pozadí...

Nastav si pozadí stránka(body) na obrázek, kterému nastavíš také fixní pozici...

Zhruba nějak takto by to mohlo fungovat

background-image: url('xxx') fixed no-repeat top center;

A samozřejmě dále v elementech, které v body používáš někde "vypni"/nezadávej pozadí...

:)
Nahoru Odpovědět
17.9.2014 18:50
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
k.ats
Člen
Avatar
Odpovídá na Honza Bittner
k.ats:17.9.2014 18:55

Děkuji, takhle mě to taky napadlo, ale chtěl jsem aby se i to pozadí hejbalo, ale míň než článek v popředí. Ale nechám to na té fixní pozici a nebudu se s tím dál trápit. Dnes toho bylo už dost :-) Teď hezky na florbal, trochu si zaběhat a spát :-)

Editováno 17.9.2014 18:55
 
Nahoru Odpovědět
17.9.2014 18:55
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na k.ats
Honza Bittner:17.9.2014 18:59

Pro to, aby jsi rozhýbal pozadí pomaleji bys musel využít ten Javascript...

Avšak mě nepříjde ani ta CSS verze s fixním pozadím špatná. :)

Nahoru Odpovědět
17.9.2014 18:59
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Matej
Člen
Avatar
Matej:17.9.2014 20:30

Podľa mňa je "Css verzia" prehľadnejšia (aj krajšia) , klasický paralex mi príjde chaotický/nepreh­ladný :`

 
Nahoru Odpovědět
17.9.2014 20:30
Avatar
k.ats
Člen
Avatar
Odpovídá na Honza Bittner
k.ats:18.9.2014 13:50

Ahoj, tak se mi tam povedlo dát ten jednoduchý paralax, ale zjistil jsem, že když tam dám jen jeden obrázek bez opakování, tak je dole bílé místo. Obrázek už prostě skončí. Musí se to nastavit a pak už to skoro vůbec neskroluje. Dal jsem tam tedy pouze opakující se texturu a přemýšlím jestli to celé nezruším anenechám jen fixní texturu nebo jiné pozadí. Skript musí být v těle html stránky aby to fungovalo a nevím jestli je to to pravé ořechové. Jinak zatím je stránka stále ve vývoji a je tam použito hodně HoBiho věcí z tutoriálu, které tam pak nebudou (tlačítka a quote ve článcích :-) ) Tady je ochutnávka http://supastav.tode.cz/ Místy je to udělané dost prasácky, ale v mozzile a IE to funguje, jinde jsem zatím nezkoušel.

 
Nahoru Odpovědět
18.9.2014 13:50
Avatar
Odpovídá na k.ats
Tomáš Maňhal:18.9.2014 14:03

script nemusí být nutně vypsán v těle html dokumentu, stačí když se na něj odkážeš na začátku a uložíš samotnej script do kořenovýho adresáře jako *.js

 
Nahoru Odpovědět
18.9.2014 14:03
Avatar
k.ats
Člen
Avatar
k.ats:18.9.2014 14:18

Tak jsem to zkoušel na mobilu a je to těžce nerezponsivní :-) Ach jo. No co se dá dělat, pro mobil to dělaný není.
Až bude chvilka tak na ten skript mrknu, jestli tam tedy vůbec bude. Děkuji za radu.

Editováno 18.9.2014 14:19
 
Nahoru Odpovědět
18.9.2014 14:18
Avatar
Matej
Člen
Avatar
Odpovídá na k.ats
Matej:18.9.2014 14:42

ak myslis pred footerom ten volny preistor , tak len vymaz
padding-bottom: 200px; */ z main

 
Nahoru Odpovědět
18.9.2014 14:42
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 18 zpráv z 18.