Блог

Главная - Вопросы по программированию - Можно ли видеть через div тот, который ниже вокруг курсора?

Можно ли видеть через div тот, который ниже вокруг курсора?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Привет, это немного странный вопрос, я видел похожие эффекты на то, к чему я стремлюсь, но не совсем то же самое, не уверен, возможно ли то, что я хочу сделать. Я хочу, чтобы два div были сложены так, чтобы содержимое div ниже отображалось только в определенной области (вокруг курсора), есть ли способ сделать прозрачной только часть div? Или есть какой-либо другой способ добиться этого эффекта?

введите описание изображения здесь

Комментарии:

1. есть ли у них один и тот же родительский div?

2. Я не верю, что это достижимо, как на вашем чертеже. Если это вообще возможно, я скорее представляю, что делаю наоборот: помещаю зеленый div сверху , а затем показываю только то, что находится вокруг курсора, и маскирую остальное. Но для такого рода дополнительных эффектов (маскирования) вам, вероятно <canvas> , каким-то образом понадобится. При этом этот вопрос не по теме для Stackoverflow 🙂

3. Вы также можете скопировать нижний div поверх верхнего div. Итак, три слоя. Слой раскрытия, «верхний» слой и нижний. Затем вы показываете реальный верхний слой, но похоже, что он находится внизу. Эффект фонарика для отображения содержимого, с которым я не знаком, но, вероятно, не только CSS, если бы мне пришлось догадываться.

Ответ №1:

Вместо того, чтобы иметь элемент, который вы хотите показать в фоновом режиме, вы можете поместить его впереди и показывать только его часть через клип-путь;

Для координат я использую переменные CSS, хотя вы также можете перезаписать стиль напрямую.

 // Get element from the DOM
const container = document.querySelector('.container');

// Apply event listener
container.addEventListener('mousemove', updateCoords, false);

function updateCoords(event) {
  // Get X and Y coordinates
  const { offsetX, offsetY } = event;
  
  // Update coordinates
  container.style.setProperty('--x', offsetX   'px');
  container.style.setProperty('--y', offsetY   'px');
} 
 .container {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
}

/* Show child when hovering the container */
.container:hover .child {
  display: block;
}

.child {
  clip-path: ellipse(30px 30px at var(--x) var(--y));
  display: none;
} 
 <div class="container">
  <img class="child" src="//picsum.photos/300" width="300" height="300" />
</div>

Вы можете использовать requestAnimationFrame, чтобы сделать движение круга более плавным

 // Get element from the DOM
const container = document.querySelector('.container');

// Apply event listener
container.addEventListener('mousemove', updateCoords, false);

function updateCoords(event) {
  // Get X and Y coordinates
  const { offsetX, offsetY } = event;
  
  // Update coordinates
  requestAnimationFrame(() => {
    container.style.setProperty('--x', offsetX   'px');
    container.style.setProperty('--y', offsetY   'px');
  });
} 
 .container {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
}

/* Show child when hovering the container */
.container:hover .child {
  display: block;
}

.child {
  clip-path: ellipse(30px 30px at var(--x) var(--y));
  display: none;
} 
 <div class="container">
  <img class="child" src="//picsum.photos/300" width="300" height="300" />
</div>

Пример с текстом

 // Get element from the DOM
const container = document.querySelector('.container');

// Apply event listener
container.addEventListener('mousemove', updateCoords, false);

function updateCoords(event) {
  // Get X and Y coordinates
  const {offsetX, offsetY} = event;

  // Update coordinates
  requestAnimationFrame(() => {
    container.style.setProperty('--x', offsetX   'px');
    container.style.setProperty('--y', offsetY   'px');
  });
} 
 .container {
  min-height: 100vh;
  min-width: 100vh;
  overflow: hidden;
}

.container:hover .code {
  display: flex;
}

.display,
.code {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(49, 49, 49);
  color: rgb(240, 191, 29);
  pointer-events: none;
}

.code {
  clip-path: ellipse(100px 100px at var(--x) var(--y));
  display: none;
  background-color: rgb(3, 3, 3);
  color: rgb(101, 253, 101);
} 
 <div class="container">
  <div class="display">
    <h1>Header</h1>
  </div>
  <div class="code">
    <h3>amp;<h1amp;>Headeramp;</h1amp;></h3>
  </div>
</div>

Комментарии:

1. Привет, спасибо, это почти то, что мне было нужно, я использую этот эффект для отображения текста, а не изображений, и он отлично работает, пока мышь не пройдет по тексту, он отправит круг в верхнюю часть экрана, я как бы в тупике, почему это может происходить, есть идеи?

2. @jacquesrockell да, это потому, что событие всплывает. Это означает, что при наведении курсора на текст он будет считывать координаты из заголовка, а не из контейнера. Одним из простых решений является добавление pointer-events: none; к вашему контенту. См. Фрагмент обновления.

3. Эффект работает отлично, тай

Метки: ,