Всем привет.
Чтобы было сразу понятно, предлагаю посмотреть пример того, что получилось:
http://mafia-world.ru/verstka/test/index.html
Как это работает:
Если медленно прокручивать скролл, то можно увидеть как два блока (один из которых находится под текстом RODINA, другой под ним) как бы выезжают из под него.
В определенный момент, а точнее когда нижний блок тёмного цвета полностью вылазит из текста RODINA (а это происходит, когда его css параметр "top" становится равным 285px) - эти блоки прекращают своё движение при скроллинге вниз.
Решил сделать этот эффект посредством события scroll. Однако, вероятно, это событие вызывается не на каждый прокрученный пиксель скролла. И если прокрутить резко вниз страницу, представленную выше, то не известно где окажутся разъехавшиеся блоки.
Как должно работать:
1) Сколлим страницу вниз, и два блока разъезжаются на то расстояние, на которое мы проскролили окно браузера. Плюс надо указать момент остановки движения блоков.
2) Скроллим страницу вверх, два блока должны принимать таким же образом исходную позицию.
Можно ли вообще осуществить задуманный эффект? И каким лучше всего способом? Так, чтобы во всех браузерах работало плавно без дрожания блоков...
Вот то, что пока сообразил:
$(document).ready(function() {
$(window).scrollTop(0); //при обновлении страницы поднимаем скролл страницы в самый верх
});
$(window).scroll(function() {
var topBlock3 = parseInt($('.block3').css('top')); // переменная, хранящая в себе значение "top" темного блока
if (topBlock3 >= 285) { //если у этого блока значение "top" превышает 285, то удаляем событие scroll
$(window).unbind();
}
var scrollHeight = $(window).scrollTop(); // переменная, хранящая в себе значение расстояния, прокрученного
// скроллом вниз и вверх (надо бы как-то сделать две переменные данного типа,
// чтобы в одной прописывалось расстояние прокрутки вверх, а у другой
// переменной - вниз)
$('.block3').animate({'top':'+='+scrollHeight},50); // прибавляем к значению "top" темного блока, при каждом вызове события scroll, значение сохранённое в переменной scrollHeight
$('.block2').animate({'top':'-='+scrollHeight},50); // отнимаем у значения "top" серого блока, при каждом вызове события scroll, значение сохранённое в переменной scrollHeight
});