Разностороннее вращение фигур относительно курсора
Как вращать фигуры относительно приближения и отдаления мыши.
В общем сделал вариант где есть 3 фигуры. Но все они отдаляются от курсора когда курсор отдаляется! и приближаются если курсор приближается к ним! Как заставить к примеру одну из фигур двигаться наоборот? То есть чтобы, если курсор уходит то она немного смещалась в сторону курсора, а при возврате курсора на неё фигура застывала с курсором на себе как и в текущем случае. Текущее решение: https://jsfiddle.net/Georka/u1yphzgc/7/ Пример: https://edublink.html.devsblink.com/...e-academy.html |
WebMachine,
так может поменять знак "ускорения", строка 51?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: rgb(102, 189, 16);
}
.mouse_move {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.mouse_move h2 {
position: relative;
font-size: 32px;
color: white;
}
.mouse_move img {
position: absolute;
}
#img1 {
top: 80px;
left: 80px;
}
#img2 {
bottom: 80px;
right: 80px;
}
#img3 {
top: 80px;
right: 140px;
}
</style>
</head>
<body>
<div class="mouse_move">
<img id="img1" src="https://edublink.html.devsblink.com/assets/images/faq/shape-12.png" class="mouse" data-value="3">
<h2>GeeksforGeeks</h2>
<img id="img2" src="https://edublink.html.devsblink.com/assets/images/faq/shape-09.png" class="mouse" data-value="-5">
<img id="img3" src="https://edublink.html.devsblink.com/assets/images/cta/shape-04.png" class="mouse" data-value="4">
</div>
<script>
document.addEventListener("mousemove", parallax);
function parallax(event) {
console.log(1)
this.querySelectorAll(".mouse").forEach((shift) => {
const position = +shift.dataset.value;
const x = (window.innerWidth - event.pageX * position) / 90;
const y = (window.innerHeight - event.pageY * position) / 90;
shift.style.transform = `translateX(${x|0}px) translateY(${y|0}px)`;
});
}
</script>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:04. |