Как-то я видел забавный дизайн с обезьяной, позади которой очень занимательный фон который динамически менялся при изменении размера окна брузера.
Это достигалось за счет движения нескольких параллельных слоев.
С помощью этого эффекта можно создавать множество очень интересных штук(ссылки на интересные штуки прилагаются ниже).
Кроме того, я хочу поделится с вами очень интересным скриптом который практически автоматизирует процесс создания параллельных слоев.
jParallax
Как Вы уже, скорее всего, заметили по приставке «j», это ничто иное как плагин для jQuery.jParallax захватывает дочерние элементы блока, к которому нужно применить этот эффект, и передвигает их при наведении и перемещении мыши.
Размер плагина в несжатом виде всего 12 килобайт.
Работаем с jParallax
jParallax, как и практически все плагины для jQuery, сводят всю возню с кодом на нет.Для начала мы должны скачать саму библиотеку и подключить ее к вашей страничке. Затем создаем блок, к примеру, с id
parallax, в котором будут находится несколько изображений к которым вы хотите применить этот эффект.Теперь дописываем строчку, после которой всё уже, в принципе, работает:
jQuery('#parallax').jparallax();Кроме того можно изменять скорость анимации, положение слоев по умолчанию и т.п., о чем вы можете весьма подробно почитать на оф. сайте плагина.
Посмотреть замечательное демо #1
Посмотреть замечательное демо #2
Посмотреть замечательное демо #3
Посетить оф. сайт плагина jParallax
Подписаться на заметки от Чернева
