7

Хочу сделать эффект наведение как у 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> или другой, то стили сразу-же сбрасываются и из-за проверки не обрабатываются. Может вы как то улучшите код или скажите что я делаю не так?

7
  • У меня свечение пропадает только в середине между кнопками. Вы про этот момент?
    – EzioMercer
    28 июл 2022 в 15:31
  • Один нюанс: в Винде это свечение и прочие эффекты легко отключаются. У меня отключены. Если на вашем сайте эту цветомузыку нельзя будет отключить чекбоксом в настройках, то я потерян для вас как потенциальный клиент. 28 июл 2022 в 15:32
  • @EzioMercer да именно этот момент. И еще если мышку навести очень близко с права от последнего блока.
    – Hopeyer
    28 июл 2022 в 15:34
  • @AlexanderPetrov почему?
    – Hopeyer
    28 июл 2022 в 15:34
  • 4
    Делал пару элементов из Windows 10, может пригодится - Меню и главная страница настроек
    – De.Minov
    29 июл 2022 в 9:22

3 ответа 3

8

document.querySelector('div').addEventListener('mousemove', e => {
  var div = e.target.closest('div')
  var { x, y } = div.getBoundingClientRect()
  div.style.setProperty('--mousex', e.clientX - x + 'px')
  div.style.setProperty('--mousey', e.clientY - y + 'px')
})
* {
  box-sizing: border-box;
}

section {
  margin-top: 1em;
  background: black;
  padding: 2em;
}

div {
  width: min-content;
  padding: 1px;
  display: flex;
  gap: 1px;
  background: #444;
  --mousex: 0px;
  --mousey: 0px;
}

div:hover {
  background: radial-gradient(circle at var(--mousex) var(--mousey), white, #444 3em);
}

button {
  background: black;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 2rem;
  min-width: 2rem;
  color: white;
  padding: .5em 1em;
}

#with-buttons:checked ~ section button:hover {
  background: rgba(0, 0, 0, .75);
}

#with-gap:checked ~ section div {
  gap: calc(1em + 2px);
  overflow: hidden;
}

#with-gap:checked ~ section button {
  outline: 1em solid black;
  outline-offset: 1px;
}
<input type=checkbox id=with-buttons><label for=with-buttons>&nbsp;Подсвечивать внутри кнопки</label><br>
<input type=checkbox id=with-gap><label for=with-gap>&nbsp;Зазор между кнопками</label>

<section>
  <div>
    <button>A</button>
    <button>B</button>
    <button>C</button>
    <button>D</button>
  </div>
</section>

4
  • 1
    Не перестаю удивляться лаконичности ваших решений. Но есть вопрос, как сделать компоновку с зазорами между кнопками? Как бы вы решали эту задачу? 29 июл 2022 в 4:54
  • @LaukhinAndrey, немного костыльно получилось, но сделал)
    – Qwertiy
    29 июл 2022 в 9:02
  • 2
    @LaukhinAndrey, подумал получше - теперь не костыльный)))
    – Qwertiy
    29 июл 2022 в 9:08
  • Действительно, про outline я не подумал. В моём варианте с grid это упростило бы структуру (штатный gap + outline и минус обертка на кнопку). 29 июл 2022 в 9:31
4

Предлагаю альтернативный и более эффективный подход.

Вместо того, чтобы для каждой кнопки (и границы) вычислять и задавать индивидуальный градиент на основе позиции, можно задать единый общий фон с градиентом. Слой сверху содержит кнопки. Кнопки и их границы являются "окнами", через которые просвечивает градиент.

Загвоздка в том, как сделать "дырявый" блок? Сначала я копался с mix-blend-mode и даже что-то получилось, но в итоге зашёл в тупик.

Тогда я взял grid, а вместо штатного gap сделал обёртки для кнопок с бордюрами. Позднее, позаимствовал у @Qwertiy идею с outline. Получился макет, в котором можно управлять "светопропусканием" кнопок и границ через CSS. Роль JS отводится только для позиционирования градиента от положения курсора.

Вот что из этого получилось:

let menu = document.getElementById('menu');

menu.addEventListener('mousemove', function(e) {
  let x = e.pageX - e.currentTarget.clientLeft;
  let y = e.pageY - e.currentTarget.clientTop;

  menu.style.background = `radial-gradient(circle at ${x}px ${y}px, var(--light-color), var(--bkg-color) 100px`;
});
#menu {
  --light-color: rgb(170, 170, 170);  
  --bkg-color: rgb(36, 36, 36);
  --btn-color: rgb(60, 60, 60);
  --btn-hover: rgba(70, 70, 80, 0.8);
  --brd-hover: rgba(170, 170, 170, 1);
  --brd-size: 2px;
  --gap: 10px;
  
  display: grid;
  grid-template: repeat(3, 80px) / repeat(5, 80px);
  border: var(--gap) solid var(--bkg-color);
  width: fit-content;
  user-select: none;
  gap: var(--gap);
}

#menu:not(:hover) { background: var(--bkg-color) !important; }

#menu >* {
  box-sizing: border-box;
  outline: calc(var(--gap) / 2 + 0.5px) solid var(--bkg-color);
}

.button {
  font-size: 14px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-clip: padding-box;
  border: var(--brd-size) solid transparent;
  background-color: var(--btn-color);
  overflow: hidden;
}

.button:hover {
  backdrop-filter: blur(10px);
  border: var(--brd-size) solid var(--brd-hover);
  background-color: var(--btn-hover);
}

.empty {
  background: var(--bkg-color);
}

.btn-s2 { grid-column: span 2; }
.btn-s4 { grid-column: span 2; grid-row: span 2; }
.material-symbols-sharp { font-size: 24px !important; }
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0,0" />

<div id="menu">
    <div class="button">button</div>
    <div class="button">button</div>
    <div class="button">button</div>
    <div class="button btn-s2">Long button</div>
    <div class="button"><span class="material-symbols-sharp">description</span></div>
    <div class="empty"></div>
    <div class="button btn-s4">Big button</div>
    <div class="button">button</div>
    <div class="button"><span class="material-symbols-sharp">download</span></div>
    <div class="button"><span class="material-symbols-sharp">terminal</span></div>
    <div class="button"><span class="material-symbols-sharp">calculate</span></div>
</div>

Можно настраивать все параметры в CSS (цвет освещения, фон меню и кнопок).
P.S. в пустые ячейки нужно вставлять блок .empty, иначе будут просвечивать тоже.

1
  • спасибо большое. 3 ответа и они хороши, но ваш пример более для меня красивее и лучше. И где я читал статью о том как сделать такой эффект, говорилось что его метод самый легкий, и оптимизированный по моему. Но у вас тут прям минимум Js и без всяких подобных вычислений как у меня
    – Hopeyer
    16 авг 2022 в 6:59
4

"Но если вы проверите пример, то иногда блик может моргать. Это из-за дочерних элементов." Не, это не из-за этого.. Вот где ты написал "//Дальше сложнее и я мало что понял." Есть расчёт углов for (let i = 0; i <= 360; i += 45) и там у тебя деление было 45 соответственно появлялись "слепые зоны". Если поставишь от ~ 1 - 20 их не будет и моргать перестанет.

//Вот этот код легкий
$(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 += 20) {
  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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.