Autor | Zpráva | ||
---|---|---|---|
Deny Profil * |
#1 · Zasláno: 19. 1. 2013, 00:21:38
Zdravím,
chtěl bych udělat něco podobného - http://www.ringvemedia.com/introduction myslím ten bílý pohybující se sloupec, chtěl bych uplně stejný efekt. Co je potřeba k tomu umět? Nemáte tip na nějáký tutoriál? Díky |
||
exoslav Profil |
#2 · Zasláno: 19. 1. 2013, 00:33:56
Hmm, to by mě taky zajímalo :) Myslím si, že to je dělaný přes absolutní pozicování, ale jak přesně, to nevím...
|
||
Trejpa Profil |
#3 · Zasláno: 19. 1. 2013, 01:32:56
Deny, exoslav:
Ukotvené pozadí Bílý sloupec může být normální součástí stránky, kromě nastavení šířky, bílého pozadí a odražení od nějakého okraje není ničím výjimečný. Posun proti pozadí stránky je docílen ukotvení pozadí nadřazeného bloku background-attachment: fixed, prohlížeče to podporují. Ostatní použité technologie mají drobná úskalí: Roztahování obrázku pozadí na výplň okna prohlížeče řeší background-size: cover. To ale nepodporuje prohlížeč Internet Explorer 8 a nižší. Dá se to obejít napozicováním obrázku <img> pod samotný obsah, ale většina stránek raději použije pozadí nezvětšovací, které je větší a stránku obvykle přesahuje nebo plynule přechází do barvy pozadí. Umístění proužku dole zajistí vlastnost position: fixed společně s nastavením odražení od kraje, zde vlastností bottom. Fixní pozice nefunguje v Internet Exploreru 6 a nižších. Můžeš podporu oželet (zobrazí se na konci stránky, vyroluje za sloupečkem), případně se to dá řešit hackem postaveným na vlastnosti overflow. Poloprůhlednou barvu pozadí proužku může řešit obarvení pomocí zápisu barvy v RGBA. Ta však není podporována v Internet Exploreru 8 a nižších, proto bude kompatibilnějším řešením místo barvy použít poloprůhledný obrázek PNG. Jeho (polo)průhlednost není podporována v Internet Exploreru 6 a nižších. To by nemuselo až tolik vadit, proužek se zobrazí aspoň neprůhledný, případně i na to existuje hack. |
||
Deny Profil * |
#4 · Zasláno: 19. 1. 2013, 12:15:39
wow Trejpa, díky moc. Jdu to skusit
|
||
Deny Profil * |
#5 · Zasláno: 19. 1. 2013, 23:55:16
Nedaří se mi ten sloupec... udělal jsem to takhle
#sloupec { float:left; width:500px; height:300px; overflow: scroll background-color: white; } Ale ty lišty se mi zobrazí uvnitř toho sloupce, ja chci jenom vertikalni listu mimo sloupec, abych mohl hýbat jenom s ním. Jak na to? |
||
Trejpa Profil |
#6 · Zasláno: 20. 1. 2013, 00:05:24
Deny:
„Jak na to?“ Jako v mém příkladě. Nenastavovat sloupci výšku ani přetékání. Fixní pozici nastavit nepohyblivým částem. |
||
Deny Profil * |
#7 · Zasláno: 20. 1. 2013, 12:54:52 · Upravil/a: Deny
Výšku ale musím nastavit když chci vytvořit bílý sloupec 500x300.
Už se mi to povedlo, buhůžel ten bílý sloupec se mi zobrazuje před tím šedým páskem... aha, tak stačilo přidat- z-index:999; |
||
Deny Profil * |
#8 · Zasláno: 20. 1. 2013, 14:17:21
Ještě by mě zajímalo, Když se podíváte na ten sloupec http://www.ringvemedia.com/introduction tak u konce je ten sloupec useklý, já ho mám až do konce stránky. Když jsem zadal margin-top: -30px tak vlastně ubral na výšce ale dál pokračuje až do konce stránky.
|
||
Petr ZZZ Profil |
#9 · Zasláno: 20. 1. 2013, 15:05:21
margin-bottom jsi zkoušel?
|
||
Deny Profil * |
#10 · Zasláno: 20. 1. 2013, 19:22:26
Petr ZZZ jj
|
||
Časová prodleva: 11 let
|
0