Простой эффект параллакса для изображения

prlx-hover Мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса.

Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.

Шаг 1. HTML

Так как нам нужно все реализовать достаточно просто, при этом не задействовать лишних скриптов, мы решили все упростить по максимуму, так вышло и с разметкой, мы выводим общий класс эффекта.


  <section id="banner">
    <div id="intro">
     <h1>RED-STAR.PRO</h1>
     <p>Бесплатные уроки и статьи по html, php, mysql, js, jquery, ms office (excel, word, powerpoint), windows XP/7/8. Бесплатные шаблоны иконки, темы оформления.

</div> <img src="images/about.jpg" width="900" /> </section>

Кроме этого вы указали вывод картинки через ссылку, для удобства, также добавили некоторое описание, чтобы дополнить демонстрационный пример.

Шаг 2. CSS

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


 #banner{
  width: 840px;
  height: 350px;
  margin: 40px auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-family: 'PT Sans', sans-serif;
border: 13px solid rgb(222, 222, 222);  background-color: rgb(243, 244, 239);
  z-index: 20;
}

#banner img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  
}

#intro{
  position: absolute;
  height: 100%;
  padding: 100px 0;
  z-index: 10;
  text-align: center;
  -moz-box-shadow:    inset 0 0 30px #333333;
  -webkit-box-shadow: inset 0 0 30px #333333;
  box-shadow:         inset 0 0 30px #333333;
}
#intro h1{
  text-align: center;
  width: 840px;
  margin: auto;
  font-family: 'Rokkitt', serif;
  text-transform: uppercase;
  color: #333333;
  font-size: 28px;
}
     

Также мы указываем параметры для текстовой надписи, нам необходимо, чтобы она сохраняла свое позиционирование в не зависимости от движения изображения.

Шаг 3. JS

Последний шаг, как вы уже поняли, у нас будет оживление изображения и привязка его к движению курсора мыши, сделать это не так уже и сложно:


	jQuery("#banner").mousemove(
		function(e){
      
			var offset = jQuery(this).offset();
			var xPos = e.pageX - offset.left;
			var yPos = e.pageY - offset.top;

			var mouseXPercent = Math.round(xPos / jQuery(this).width() * 100);
			var mouseYPercent = Math.round(yPos / jQuery(this).height() * 100);

			jQuery(this).children('img').each(
				function(){
					var diffX = jQuery('#Parallax').width() - jQuery(this).width();
					var diffY = jQuery('#Parallax').height() - jQuery(this).height();

					var myX = diffX * (mouseXPercent / 1500);

					var myY = diffY * (mouseYPercent / 1080);


					var cssObj = {
						'left': myX + 'px',
						'top': myY + 'px'
					}
          
					jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});

				}
			);

		}
	); 
     

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

Вот и все. Готово!

Источник урока: s-sd.ru
Урок для Вас подготовлен командой сайта www.red-star.pro.