Анимация картинки на Javascript

136
21 января 2020, 09:10

Хочу реализовать анимацию картинки, как вот на этом сайте https://bmfest.com, принцип работы должен быть таким, чтобы при ведении курсора мыши, картинка меняло свои данные в transform: rotateX и rotateY в соответствии с положение курсора мыши, помогите пожалуйста, как данный функционал написать на js, заранее благодарю за помощь

Answer 1

За Вас, конечно, вряд ли кто-то будет писать с нуля, поэтому открою Вам небольшой секрет: если запустить интересующий Вас сайт в Хроме и кликнуть по странице правой клавишей мыши, то в появившемся меню будет пункт "Просмотр кода страницы" (Ctrl + U).

Дальше Вы просто вытаскиваете этот код (разметка, стили, скрипты) и смотрите, что и как там устроено:

(function() { 
  // Init 
  var container = document.getElementById("container"), 
      inner = document.getElementById("inner"); 
 
  // Mouse 
  var mouse = { 
    _x: 0, 
    _y: 0, 
    x: 0, 
    y: 0, 
    updatePosition: function(event) { 
      var e = event || window.event; 
      this.x = e.clientX - this._x; 
      this.y = (e.clientY - this._y) * -1; 
    }, 
    setOrigin: function(e) { 
      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2); 
      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2); 
    }, 
    show: function() { 
      return "(" + this.x + ", " + this.y + ")"; 
    } 
  }; 
 
  // Track the mouse position relative to the center of the container. 
  mouse.setOrigin(container); 
 
  //---------------------------------------------------- 
 
  var counter = 0; 
  var refreshRate = 10; 
  var isTimeToUpdate = function() { 
    return counter++ % refreshRate === 0; 
  }; 
 
  //---------------------------------------------------- 
 
  var onMouseEnterHandler = function(event) { 
    update(event); 
  }; 
 
  var onMouseLeaveHandler = function() { 
    inner.style = ""; 
  }; 
 
  var onMouseMoveHandler = function(event) { 
    if (isTimeToUpdate()) { 
      update(event); 
    } 
  }; 
 
  //---------------------------------------------------- 
 
  var update = function(event) { 
    mouse.updatePosition(event); 
    updateTransformStyle( 
      (mouse.y / inner.offsetHeight / 2).toFixed(2), 
      (mouse.x / inner.offsetWidth / 2).toFixed(2) 
    ); 
  }; 
 
  var updateTransformStyle = function(x, y) { 
    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)"; 
    inner.style.transform = style; 
    inner.style.webkitTransform = style; 
    inner.style.mozTranform = style; 
    inner.style.msTransform = style; 
    inner.style.oTransform = style; 
  }; 
 
  //-------------------------------------------------------- 
 
  container.onmousemove = onMouseMoveHandler; 
  container.onmouseleave = onMouseLeaveHandler; 
  container.onmouseenter = onMouseEnterHandler; 
})();
  <link href="https://bmfest.com/wp-content/themes/bmfest/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
  <link href="https://bmfest.com/wp-content/themes/bmfest/css/style-cache.css" type="text/css" rel="stylesheet"/> 
<main> 
	<div id="container" class="video-bg fest-bg valign-wrapper"> 
	 
	  <div class="row"> 
		<div class="col s12 l8 offset-l2 center pad-top-40"> 
			<img id="inner" src="https://bmfest.com/wp-content/themes/bmfest/images/logo-2019.png" class="responsive-img fest-logo"> 
 
			<div class="pad-top-40 pad-bot-20"> 
				<h4 class="white-text">24 августа, Москва</h4> 
				<h5 class="white-text">Измайловский парк</h5> 
			</div> 
			 
			<showdiver-widget id="buy-button" class="waves-effect waves-light btn z-depth-0 fest-btn" data-id="dd0c4ba5-038f-4931-b160-769499da777c"> 
			Купить билет 
			</showdiver-widget> 
		</div> 
	  </div> 
	   
	<div class="sixteen-plus white-text"> 
		<h5>16+</h5> 
		<p>Сотрудничество:<br>fest@booking-machine.com</p> 
		<p>Фуд-корт:<br>food@booking-machine.com</p> 
	</div> 
 
	</div> 
	 
</main>

READ ALSO
Почему аудио-скрипт не работает в Google Chrome?

Почему аудио-скрипт не работает в Google Chrome?

Нашёл вот такой скрипт, который проигрывает звук на странице

202
Какой метод более (правильный/читаемый)?

Какой метод более (правильный/читаемый)?

Написал несколько строк роутера, потом пришла идея переписать его на async/await, собственно вопрос несколько:

121
Отправлятся пустые формы [закрыт]

Отправлятся пустые формы [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы он соответствовал тематике «Stack Overflow на русском»

142
Чем заменить iframe?

Чем заменить iframe?

Ситуация проста: есть некий html-код, который должен выводиться юзеруНо код этот может генерировать кто угодно, поэтому я использую iframe в режиме...

159