Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   как можно реализовать вот такой эффект меню(http://allure-estetic.ru/)? (https://javascript.ru/forum/library-toolkit-framework/22114-kak-mozhno-realizovat-vot-takojj-ehffekt-menyu-http-allure-estetic-ru.html)

Reasgo 06.10.2011 19:31

как можно реализовать вот такой эффект меню(http://allure-estetic.ru/)?
 
как можно реализовать вот такой эффект меню(http://allure-estetic.ru/)? при клике на элемент меню все плавно переезжает

Tmin10 06.10.2011 21:33

Как сделать не посоветую, но такая анимация бесит, хороша только для рекламных промо сайтов.

Serg_pnz 07.10.2011 12:36

http://flesler.blogspot.com/2007/10/jqueryscrollto.html
http://demos.flesler.com/jquery/scrollTo/

DjDiablo 09.10.2011 16:46

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

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

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

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

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

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

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


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


Часовой пояс GMT +3, время: 08:12.