Хочу сделать эффект наведение как у windows 10. Вот такой:
Видите? У него есть свечение border, и внутренние свечение.
Т.е если навожу на кнопку, то курсор мыши горит, и как бы внутри освещает кнопку. А так-же рядом начинают светиться как блики border. Ну кто может проверьте и поймете. Я думаю вы знаете такой эффект. Лучше конечно показать видео но я не могу.
Я нашел примеры и вот как я сделал внутренние свечение:
//Вот этот код легкий
$(document).ready(function(){
$(".btn-effect").on('mousemove', function(event){
var thisElement = $(this); //Берем элемент над которым висит мышь
var rect = thisElement.offset(); //Берем текущие координаты кнопки относительно окна
//Расчитываем координаты мыши внутри кнопки
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
//Делаем radial-gradient рисуем круг, и перетаскиваем его по за мышью
thisElement.css("background", `radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.2),rgba(36,36,36,1) )`);
//Делаем border-image, вместе картинки рисуем круг, и сужаем границы картинки. И так-же перетаскивает за мышью.
thisElement.css("border-image", `radial-gradient(20% 75% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 9 / 1px / 0px stretch `);
});
//Если мышк уведена то делаем прежние стили
$(".btn-effect").on('mouseout', function(event){
var thisElement = $(this);
thisElement.css("background", `#181818`);
thisElement.css("border-image", `none`);
});
});
//Дальше сложнее и я мало что понял.
const offset = 69;
const angles = []; //in deg
for (let i = 0; i <= 360; i += 45) {
angles.push((i * Math.PI) / 180);
}
let nearBy = [];
function clearNearBy() {
nearBy.splice(0, nearBy.length).forEach((e) => (e.style.borderImage = null));
}
//Понял только то что мы тут создаем окружность вокруг мыши, и далее проверяем элементы которые вошли в окружность. И если он найден то добавляем стили кнопки. И изменяем опять-же border-image.
const body = document.querySelector(".container-effect");
body.addEventListener("mousemove", (e) => {
const x = e.x; //x position within the element.
const y = e.y; //y position within the element.
clearNearBy();
nearBy = angles.reduce((acc, rad, i, arr) => {
const cx = Math.floor(x + Math.cos(rad) * offset);
const cy = Math.floor(y + Math.sin(rad) * offset);
const element = document.elementFromPoint(cx, cy);
if (element !== null) {
if (
element.classList.contains("btn-effect")
) {
const brect = element.getBoundingClientRect();
const bx = x - brect.left; //x position within the element.
const by = y - brect.top; //y position within the element.
if (!element.style.borderImage)
element.style.borderImage = `radial-gradient(${offset * 2}px ${
offset * 2
}px at ${bx}px ${by}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1),transparent ) 9 / 1px / 0px stretch `;
return [...acc, element];
}
}
return acc;
}, []);
});
body{
background-color: #1c1c1c;
font-family: verdana, trebuchet, sans-serif;
}
.container-effect{
display: flex;
gap: 10px;
padding: 30px;
}
.btn-effect{
display: flex;
justify-content: center;
padding: 15px;
width: 120px;
border-radius: 5px;
background-color: #181818;
margin-top: 20px;
cursor: pointer;
border: 1px solid transparent;
}
.btn-effect .text{
color: #fff;
font-size: 12px;
}
<!DOCTYPE html>
<html>
<head>
<title>Эффект</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
</head>
<body>
<div class="container-effect">
<div class="btn-effect">
<div class="text">эффект</div>
<div class="btn"></div>
</div>
<div class="btn-effect">
<div class="text">эффект</div>
<div class="btn"></div>
</div>
</div>
</body>
</html>
Вроде все работает. Но если вы проверите пример, то иногда блик может моргать. Это из-за дочерних элементов. Когда мы находим его, <div class="text">эффект</div>
или другой, то стили сразу-же сбрасываются и из-за проверки не обрабатываются.
Может вы как то улучшите код или скажите что я делаю не так?