Хочу реализовать анимацию картинки, как вот на этом сайте https://bmfest.com, принцип работы должен быть таким, чтобы при ведении курсора мыши, картинка меняло свои данные в transform: rotateX и rotateY в соответствии с положение курсора мыши, помогите пожалуйста, как данный функционал написать на js, заранее благодарю за помощь
За Вас, конечно, вряд ли кто-то будет писать с нуля, поэтому открою Вам небольшой секрет: если запустить интересующий Вас сайт в Хроме и кликнуть по странице правой клавишей мыши, то в появившемся меню будет пункт "Просмотр кода страницы" (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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Нашёл вот такой скрипт, который проигрывает звук на странице
Написал несколько строк роутера, потом пришла идея переписать его на async/await, собственно вопрос несколько:
Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы он соответствовал тематике «Stack Overflow на русском»
Ситуация проста: есть некий html-код, который должен выводиться юзеруНо код этот может генерировать кто угодно, поэтому я использую iframe в режиме...