Javascript.RU

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

как можно реализовать вот такой эффект меню(http://allure-estetic.ru/)?
как можно реализовать вот такой эффект меню(http://allure-estetic.ru/)? при клике на элемент меню все плавно переезжает
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2011, 21:33
Аватар для Tmin10
Кандидат Javascript-наук
Отправить личное сообщение для Tmin10 Посмотреть профиль Найти все сообщения от Tmin10
 
Регистрация: 13.05.2011
Сообщений: 104

Как сделать не посоветую, но такая анимация бесит, хороша только для рекламных промо сайтов.
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2011, 12:36
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

http://flesler.blogspot.com/2007/10/jqueryscrollto.html
http://demos.flesler.com/jquery/scrollTo/
Ответить с цитированием
  #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.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать эффект кавычек? FirstFrost Общие вопросы Javascript 10 15.07.2010 22:47
Как это реализовать ~online~ Оффтопик 9 13.07.2010 16:15
Как реализовать перелистывающийся список? alextrish Элементы интерфейса 5 24.06.2010 13:02
Подскажите плизз как можно упростить код frolvict Общие вопросы Javascript 19 08.04.2010 14:23
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 13:08