Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2011, 16:21
Новичок на форуме
Отправить личное сообщение для call007 Посмотреть профиль Найти все сообщения от call007
 
Регистрация: 03.04.2011
Сообщений: 3

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера окна браузера pv! Общие вопросы Javascript 10 29.09.2019 08:45
Закрытие прозрачного div при щелчке мыши в любой его области mav1 Элементы интерфейса 8 09.02.2011 19:25
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04
Реклама по центру окна браузера Макс Элементы интерфейса 2 15.06.2008 00:55