Показать сообщение отдельно
  #4 (permalink)  
Старый 09.10.2011, 16:46
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Ну вот наскидку аналог.

Для эффекта paralax, несколько слоёв div (помоему в примере их три), расположены друг над другом. Самый нижний с контентом(девушки, текст, ссылки и тп), остальные слои с лепестками расположены выше.
высота слоёв друг над другом это(z-index)
Позиционирование самих слоёв скорее всего обсолютное и установлено в 0.

При щелчке по ссылке в меню(в ромбиках) происходит скроллинг содержимого слоёв. Содержимое разных слоёв скроллируется на разные величины, за счёт этого достигается эффект глубины, такой эффект как раз и называется параллаксом. Правда для глубины тут только лепестки, можно было и поглубже развить эту идею.

Скроллинг слоёв проще всего производить при помощи плагинов вроде scrollTo.

Содержимое естественно больше самого слоя. Что касается содержимого слоя вообще, он состоит из отпозиционированных относительно родителя, div класса section. Эти самые div имеют своё содержимое и фоновые картинки. Все девушки в содержимом это не img, это именно фон секций установленный через css. Делать девушек фоном не принципиально, но в общем миксе выглядит довольно круто. Лепестки можно реализовать аналогично, тоесть фоном в section, только section будут естественно в вышележащих слоях, собственно и предназначенных для лепестков.

Самый верхний слой это меню (то которое в ромбиках) у него самый высокий z-index. этот слой не является частью эффекта paralax, и не подлежит скроллингу. Помимо меню на этом же слое расположены логотип, телефон и т.д. По щелчке по ссылке запускается функция которая выполняет скроллинг слоёв, делая контент скрытый за границами экрана доступным.

есть в интернете и готовые плагины параллакса, но все что видел работают обычно относительно мышки, тебе же значения для скролинга надо задавать из обработчика щелчка по ссылке. Но можешь покопать, вдруг найдёшь подходящий.


ps. - меню медленное, отчего просто бесит.
Набросал как можно сделать похоже, поглядывая на конкретный пример.
Т.е это не точное описание примера, это описание аналога.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 09.10.2011 в 17:58.
Ответить с цитированием