| Autor | Zpráva | ||
|---|---|---|---|
| Venca V Profil |
#1 · Zasláno: 5. 11. 2013, 12:54:58
Ahoj,
dělám na jednom projektu, kde chtěli parallax efekt, kde budou jednotlivé vrstvy jinou rychlostí scrollovat a následně se v určitém bodě zastavovat. Nakonec se mi to s pomocí jQuery podařilo napsat, všechno mi funguje, ale nejsem zas tak silný v JS, tak prosím zdejší javascriptaře, jestli tam nemám něco vyloženě blbě, jestli by se dalo ještě něco "ušetřit". function parallax() {
var speed1 = 1.05;
var speed2 = 1.1;
$(document).on('scroll', function() {
var scrollTop = $(document).scrollTop();
scrollTop < (121 / speed1) ? bg2top = (scrollTop * speed1) : bg2top = 121;
$('.bg_2').css('top', bg2top);
scrollTop < (1315 / speed2) ? bg3top = (scrollTop * speed2) : bg3top = 1315;
$('.bg_3').css('top', bg3top);
(scrollTop > (2585 - $(window).height())) ? $('.parallax').css({'bottom': -scrollTop, 'top': 'auto'}) : $('.parallax').css({'bottom': 'auto','top': '0'});
});
} |
||
| Chamurappi Profil |
#2 · Zasláno: 5. 11. 2013, 13:31:18
Reaguji na Vencu V:
Je to napsané dost hnusně. Proč nepoužíváš na podmínky if a else?
Když používáš ternární operátor, proč ne jen na pravou stranu přiřazení, když levá je v obou větvích stejná? „Nakonec se mi to s pomocí jQuery podařilo napsat“ Na nastavování CSS vlastností není třeba žádný framework, element.style.vlastnost = hodnota funguje všude spolehlivě.
|
||
| Venca V Profil |
#3 · Zasláno: 5. 11. 2013, 13:40:10
Díky, přesně tohle jsem potřeboval.
Co se týká jQuery, je tam kromě tohoto víc věcí, a bez jQuery bych to asi nedal...a pokud ano, tak by mi ten čas nikdo nezaplatil:-) |
||
| Chamurappi Profil |
#4 · Zasláno: 5. 11. 2013, 13:45:26
Reaguji na Vencu V:
Řádky 8 a 11 bych napsal spíš takhle: var bg2top = Math.min(scrollTop * speed1, 121); var bg3top = Math.min(scrollTop * speed2, 1315); var.)
|
||
| Venca V Profil |
#5 · Zasláno: 5. 11. 2013, 14:17:37
Díky, var mi tam vypadlo.
|
||
|
Časová prodleva: 10 let
|
|||
0