JS: добавить плавность к движущемуся элементу
Я работаю над сайтом с одним центральным элементом и хочу, чтобы этот элемент взаимодействовал с курсором. Это то, что у меня есть до сих пор:
var hello = document.getElementsByClassName("hello");
document.onmousemove = function() {
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
for(var i=0;i<hello.length;i++) {
hello[i].style.left = x;
hello[i].style.top = y;
hello[i].style.transform = "translate(-" + x + ",-" + y + ")";
}
}* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
.hello_wrapper_wrapper {
position: absolute;
background-color: none;
/* background-color: blue */
width: 35vw;
/* This object has to be larger than: width: 300px; height: 150px; */
height: 35vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hello_wrapper {
position: relative;
background-color: none;
width: 35vw;
height: 35vh;
}
.hello {
position: absolute;
background-color: white;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<!doctype html>
<html lang = "EN">
<head>
<meta charset = "UTF-8">
<title> 0 </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "hello_wrapper_wrapper">
<div class = "hello_wrapper">
<div class = "hello">
Hello World!
</div>
</div>
</div>
<script src = "script.js"></script>
</body>
</html>Примечание. Основной элемент находится внутри a: wrapper (width: 35vw; height: 35vh;), основной элемент, называемый: hello, имеет следующие размеры: hello (width: 300px; height: 150px;). - hello должен быть больше, чем wrapper, чтобы это работало, поэтому я бы изменил размер окна предварительного просмотра, когда смотрю на скрипку.
Я хотел бы добавить какое-то смягчение элементу, я не хочу, чтобы он прыгал или двигался слишком быстро, я хотел бы, чтобы он был немного вялым, следовал за курсором, но тащился немного позади. Кроме того, когда курсор не наводится на страницу, страница перезагружается, а затем курсор входит на страницу, поле прыгает, и, опять же, я просто хотел бы сделать это более плавным.
Я был бы очень признателен, если бы кто-то мог помочь мне с этим. Спасибо!
Кредиты: https://thewikihow.com/video_AixAmLWzXYg (это руководство, которому я следовал.)
@Sal Я собираюсь попробовать это через секунду. :)
Пожалуйста, всегда включайте минимальный воспроизводимый пример в сам вопрос, как я только что сделал
@SimonR. Это я отредактировал вопрос, заменив jsfiddle.net/qf3ua47k фактическим кодом, там тоже выдает ту же ошибку ("<a class='gotoLine' href='#104:12'>104:12</a> Uncaught TypeError: Cannot read property 'style' of undefined")
@AlonEitan Хорошо! – Но я получаю ошибки, когда запускаю snipped in stackoverflow, это только у меня? – На скрипке работало нормально…
Нет, там тоже бывает, нужно поменять петлю for на for(var i=0;i<hello.length;i++){, чтобы это исправить
Ах хорошо! я не видела…
Кроме того, что вы подразумеваете под «страница перезагружается... коробка прыгает»? Вы хотите, чтобы страница действительно перезагружалась или создавала эффект, как если бы она была? Если первое, вы можете попробовать добавить прослушиватель событий onmouseout к window или body и добавить location.reload(). Если вы имеете в виду последнее, то, возможно, вы можете добавить «начальный» класс к элементу hello со значениями начальной позиции, добавить его, когда onmouseout срабатывает, как и раньше, и удалить его в методе document.onmousemove.
@AlonEitan Спасибо за ваш вклад! Обновил вопрос, теперь работает без ошибок. :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Мы можем просто использовать CSS-переходы!.
Добавлено в качестве примера transition: transform 0.6s cubic-bezier(0.32, 0, 0.67, 0) в ваш css. Это вернет элемент в центр через 0,6 с после перемещения мыши.
См. https://easings.net/ множество примеров переходов.
Похожий ответ
var hello = document.getElementsByClassName("hello")[0];
document.onmousemove = function() {
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
hello.style.left = x;
hello.style.top = y;
hello.style.transform = "translate(-" + x + ",-" + y + ")";
}* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
.hello_wrapper_wrapper {
position: absolute;
background-color: none;
/* background-color: blue */
width: 35vw;
/* This object has to be larger than: width: 300px; height: 150px; */
height: 35vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hello_wrapper {
position: relative;
background-color: none;
width: 35vw;
height: 35vh;
}
.hello {
position: absolute;
background-color: white;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.6s cubic-bezier(0.32, 0, 0.67, 0)
}<!doctype html>
<html lang = "EN">
<head>
<meta charset = "UTF-8">
<title> 0 </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "hello_wrapper_wrapper">
<div class = "hello_wrapper">
<div class = "hello">
Hello World!
</div>
</div>
</div>
<script src = "script.js"></script>
</body>
</html>Это круто, но это не совсем то, что я хотел сделать, я бы хотел, чтобы поле возвращалось только в исходное положение, когда при выходе из области просмотра с курсором элемент не всегда возвращается в исходное положение i… но спасибо за участие!
Вы должны попробовать один из многих примеров по ссылке easings.net
Чтобы установить позицию при наведении мыши, вы должны использовать javascript для переключения или добавления класса. Используйте разные классы css для разных переходов^
Вы можете использовать свойства перехода CSS, чтобы убедиться, что он плавный.
Я попытался добавить transition-delay: 10ms, transition-timing-function: ease к элементу приветствия CSS. Подробнее здесь: https://css-tricks.com/ease-out-in-ease-in-out/ и здесь https://www.w3schools.com/css/css3_transitions.asp
* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
.hello_wrapper_wrapper {
position: absolute;
background-color: none; /* background-color: blue */
width: 35vw; /* This object has to be larger than: width: 300px; height: 150px; */
height: 35vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hello_wrapper {
position: relative;
background-color: none;
width: 35vw;
height: 35vh;
}
.hello {
position: absolute;
background-color: white;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition-delay: 10ms;
transition-timing-function: ease;
}
Теперь, чтобы убедиться, что коробка не двигается, вы можете попробовать прослушиватель событий onmouseout на теле.
Попробуйте этот код javascript, чтобы сделать переход плавным, когда мышь покидает окно:
var hello = document.getElementsByClassName("hello");
document.onmouseleave = function(){
for(var i=0;i<2;i++){
hello[i].style.left = '50%';
hello[i].style.top = '50%';
hello[i].style.transform = "translate(-50%,-50%)";
}
document.removeEventListener('onmousemove')
}
document.onmouseenter = function(){
setTimeout(function(){
document.onmousemove = function(){
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
for(var i=0;i<2;i++){
hello[i].style.left = x;
hello[i].style.top = y;
hello[i].style.transform = "translate(-"+x+",-"+y+")";
}
}
},1000)
}
Эй, спасибо! … но все еще есть одна проблема: скажем, я перемещаю курсор по странице, затем я покидаю страницу с курсором в левой части окна просмотра, я работаю где-то еще на моем мониторе, а затем я снова вхожу в окно просмотра , с правой стороны, вьюпорта, то ящик прыгает… Можно ли как-то сделать так, чтобы я не прыгал, а с легкостью двигался в направлении курсора?
Я подумал, что вы могли бы использовать прослушиватель событий onmouseenter на теле и onmouseleave вместе, чтобы получить эту функциональность. В коде JS в ответе добавьте строку для удаления прослушивателя событий mousemove, когда мышь находится вне тела.
У меня нет такого опыта работы с JS, и я не могу заставить это работать. :/ Не могли бы вы реализовать это для меня или дать мне более подробные инструкции? - Извини.
Конечно, Саймон, никаких проблем. Мой JS-код в ответе должен работать. Дайте мне знать, если это не так.
Эй, он прыгает назад, это то, что я хотел. Спасибо! :) // Была бы еще одна вещь, которую я хотел бы изменить и не знаю как, но если это сложно, я также могу просто оставить это так, это уже здорово. …но есть ли простой способ сделать так, чтобы, когда курсор покидает область просмотра, прямоугольник не просто прыгал в исходное положение, а перемещался туда с некоторым облегчением? Опять же, только если это легко…
Ок, отлично. Да, я пытался сделать это со свойством легкости, но у меня не получилось. Я бы предложил попробовать метод, в котором вы анимируете его обратно. Используйте анимацию JQuery. Подробнее здесь: api.jquery.com/animate
Как насчет добавления
setTimeoutвокруг цикла? Это задержит анимацию на любую продолжительность, которую вы хотите установить. Это не дало бы эффекта «ослабления», хотя позволило бы ту задержку, которую вы искали.