Два блока div разъезжаются при скроллинге окна браузера...

[call007]

Всем привет.

Чтобы было сразу понятно, предлагаю посмотреть пример того, что получилось: 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
});

Edited April 3, 2011 by call007

[psywalker]

1. Я пральна понял, что вот это конечный результат?

http://www.screencast.com/users/psywalker/folders/Jing/media/7d02b02a-0f60-4554-a760-b793a10e2f82

2. Т.е. блоки должны плавно разъезжаться в разные стороны, до кокого то момента, на 285пк каждый, и в разные стороны, так?

3. Они должны быстро разъезжаться, так?

4. Если скролл будет уже далеко внизу, то видно их уже не будет, так как они останутся наверху да?

[call007]

1. Я пральна понял, что вот это конечный результат?

http://www.screencast.com/users/psywalker/folders/Jing/media/7d02b02a-0f60-4554-a760-b793a10e2f82

Да, именно!

2. Т.е. блоки должны плавно разъезжаться в разные стороны, до кокого то момента, на 285пк каждый, и в разные стороны, так?

Тоже верно.

3. Они должны быстро разъезжаться, так?

Вообще, надо, чтобы плавно разъезжались, не очень быстро. И так, чтобы на экране было полностью видно момент предела на который блоки разъедутся.

4. Если скролл будет уже далеко внизу, то видно их уже не будет, так как они останутся наверху да?

Да, всё правильно.

А когда скролл поднимаем и на экране уже становятся видны эти подопытные блоки, то таким же образом их надо перемещать в исходную позицию.

[psywalker]

А решения на чистом JS не пойдёт?

[call007]

А решения на чистом JS не пойдёт?

Да в общем то без разницы. Естественно, если будет во всех браузерах работать одинакого.

Но мне всегда казалось, что именно эту проблему (кроссбраузерность) с помощью jQuery довольно просто решить, да и код в размерах значительно меньше получается).

[psywalker]

Да в общем то без разницы. Естественно, если будет во всех браузерах работать одинакого.

Но мне всегда казалось, что именно эту проблему (кроссбраузерность) с помощью jQuery довольно просто решить, да и код в размерах значительно меньше получается).

А ИЕ6 тоже нужно?

[call007]

А ИЕ6 тоже нужно?

Поскольку при вёрстке всегда учитываю ие6, то желательно. Но если это геморно, то можно пренебречь.

[psywalker]

Вот всё что мне удалось добиться, но к сожалению в моём решение нет плавности, а наоборот присутствует противная резкость. Есть варианты, как исправить недочёты?

http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/Scroll/5.html

[MC WEST]

Странно, у меня вообще не работает твой вариант. Использую Chromium 10.0

UPD: Попробовал в Firefox, все работает. Если тянуть за скролл то получается очень даже ничего, но вот если скроллом прокручивать, то плавность не помешала бы.

Edited April 4, 2011 by MC WEST

[mr_temi4]

Пока первое предупреждение!

Edited June 3, 2011 by psywalker
Создание темы в чужом топике.