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

HTML a CSS HTML a CSS Rozdílné scrollování elementů American English version English version

Avatar
k.ats
Člen
Avatar
k.ats:

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
Nahoru Odpovědět  +1 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:

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:

Java a Javascript je rozdil. :)

Nahoru Odpovědět  +1 17.9.2014 10:15
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
k.ats
Člen
Avatar
k.ats:

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:

Nebylo to myšleno negativně...

Nahoru Odpovědět 17.9.2014 10:32
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na k.ats
tomasmanhal:

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
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
k.ats
Člen
Avatar
Odpovídá na vajkuba1234
k.ats:

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  +1 17.9.2014 11:38
Avatar
Matej
Člen
Avatar
Matej:

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  +1 17.9.2014 18:16
Avatar
k.ats
Člen
Avatar
Odpovídá na Matej
k.ats:

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
Redaktor
Avatar
Odpovídá na k.ats
Honza Bittner:

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  +2 17.9.2014 18:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
k.ats
Člen
Avatar
Odpovídá na Honza Bittner
k.ats:

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
Redaktor
Avatar
Odpovídá na k.ats
Honza Bittner:

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  +1 17.9.2014 18:59
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Matej
Člen
Avatar
Matej:

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:

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
tomasmanhal
Člen
Avatar
Odpovídá na k.ats
tomasmanhal:

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  +1 18.9.2014 14:03
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
k.ats
Člen
Avatar
k.ats:

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:

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.