Красивые эффект параллакса на JQuery

В нынешнем веб-дизайне очень важна детализация элементов и четко сформированный дизайн. Это позволяет сделать ваш ресурс более читаемым, соответственно это привлекает посетителей, ведь хороший сайт делает сам себе рекламу. В последнее время стал широко популярным эффект параллакса, который позволяет создать иллюзию объемного дизайна не прибегая к моделированию специальных программах. В данном уроке мы рассмотрим как создать простой фон сайта с эффектом параллакса, который будет реагировать на манипуляциями мишки.

Данный фон отлично подойдет для стилизации шапки сайта, который не будет нагружать ресурс, но тем самым добавляя изюминку в дизайн. И так, приступим.


1) Подключаем CSS стили для паралаксных картинок


Code
* {
  margin: 0;
  padding: 0;
}
body {
  background: #6e9b68 url('/img/body.gif') -10% 0 repeat-x;
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial;
  line-height: 1.3;
}
a, img {
  border: 0;
}
p {
  margin: 1em 0 0.8em;
}
.clear {
  clear: both;
}
#main .outer {
  background: transparent url('/img/vines-mid.png') 70% 0 repeat-x;
}
#main .inner {
  background: transparent url('/img/vines-front.png') 300% 0 repeat-x;
}
#main .content {
  width: 838px;
  margin: 0 auto;
  padding: 80px 0;
}


Картинки используемые в CSS вы сможете найти в прикреплённом ниже архиве!!

2) Пдоключаем сам скрипт при помощи которого будетсоздаваться эффект паралакса


Code
<script type="text/javascript">
  $('body').parallax({
  'elements': [
  {
  'selector': 'body',
  'properties': {
  'x': {
  'background-position-x': {
  'initial': 0,
  'multiplier': 0.1,
  'invert': true
  }
  }
  }
  },
  {
  'selector': 'div.outer',
  'properties': {
  'x': {
  'background-position-x': {
  'initial': 50,
  'multiplier': 0.02,
  'unit': '%'
  }
  }
  }
  },
  {
  'selector': 'div.inner',
  'properties': {
  'x': {
  'background-position-x': {
  'initial': 0,
  'multiplier': 0.3
  }
  }
  }
  }
  ]
  });
  </script>


P.S если у вас не подключен jQuery вставляем код ниже между

Code
<script src="http://get-element.3dn.ru/demo/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>

  • FalleN

  • 7615

  • 1

  • 273

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!