на clientX / Y влияют поля - искажает эффект курсора jQuery / CSS - PullRequest
Новая
       21

на clientX / Y влияют поля - искажает эффект курсора jQuery / CSS

0 голосов
/ 24 июня 2019

Оригинальное название : конечный jQuery. Эффект курсора (мыши) не работает должным образом в Blogger ( Отредактировано )

Been rackingмой мозг с этим эффектом скользящего курсора.

По какой-то причине он отображается незначительно выключен на моем Blogger / BS4 сайте (удаленный шаблон Blogger с добавленной BS 4), но отображается просто отлично в Codepen .

Задние окружности Координаты выключены примерно на -15px (слева)/ - 30px (вверху) в моей реализации Blogger / BS4.Теперь я мог бы просто включить эти смещения в мои clientX / ClientY координаты, чтобы получить правильный результат, например 

var x = e.clientX + $(window).scrollLeft() -15;
var y = e.clientY + $(window).scrollTop() -30;

Однако , не понимая, что вызываетсмещение беспокоит то, что он будет отображаться по-разному для других пользователей / устройств / экранов или даже разных страниц.

На самом деле я пробовал это на более сложной реализации Blogger и координаты clientY на другом сайтегде еще на 50px или около того.Вручную взломать этот шаблон может быть не очень хорошей идеей, так как это может быть хорошо на целевой странице и полностью отключено на другой странице!

NB Я включил указатель для этой демонстрации, но он должен работать с cursor: none;, чтобы две точки окружности стали курсором!

Любые указатели приветствуются;)

ОБНОВЛЕНО:

После первоначального ответа выясняется, что client X / Y (также пробовал pageX / Y, screenX / Y и т. Д.) зависят от полей , установленных для элементов внутримой документ

В моем конкретном сокращенном тестовом примере это поля .widget и .section, применяемые Blogger, но на других страницах, несомненно, будут присутствовать другие поля элементов, например, на другой странице блоггера, которая у меня больше похожа на -15px (слева)/ - 85px (вверху).Настраивать любые заданные поля страниц / элементов не приходится, поэтому на самом деле главный вопрос заключается в следующем:

Почему поля в первую очередь мешают использованию clientX / Y .

Насколько я понимаю, clientX / Y измеряет координаты с точки зрения, и я просто не могу понять, почему поля будут иметь такое влияние.

ПроблематичноДемонстрация Blogger: https://magicmbblog.blogspot.com/p/custom-circle-cursor.html (теперь работает с <nav> исправлением !)

Рабочий CodePen: https://codepen.io/magicmb/pen/MMoabE

КОД: 

<div class="cursor"></div>
<div class="cursor"></div>

<div class="blank"></div>


<style >
html,*{ margin:0; padding:0;}
*{
    /*cursor: none;*/
}

.blank {
  height: 200vh;
}
body {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/2200/1900/?random) center center;
  background-size: cover;
  height: 100vh;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
}
h1 {
  color: white;
  font-family: futura-pt, sans-serif;
  letter-spacing: 10px;
  font-weight: bold;
  text-transform: uppercase;
}
.cursor {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.cursor:nth-child(1) {
  background-color: #D26;
  z-index: 1;
}
.cursor:nth-child(2) {
  background-color: #FFF;
}
</style>

<script>
$(document)
  .mousemove(function(e) {

    $('.cursor')
      .eq(0)
      .css({
        left: e.clientX + $(window).scrollLeft(),
        top: e.clientY + $(window).scrollTop()
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.clientX + $(window).scrollLeft(),
          top: e.clientY + $(window).scrollTop()
        });
    }, 100);
  })
</script>

Ответы [ 2 ]

1 голос
/ 24 июня 2019

Проблемы в рабочем примере вызваны margin на родительских элементах. В частности, левое значение на .section { margin: 0 15px; } и верхнее значение на .widget { margin: 30px 0; }.

Есть два исправления для этого. Во-первых, вы можете установить отрицательную маржу для самих элементов .cursor, чтобы компенсировать то, что было установлено для родителей.

Во-вторых, вы можете переместить элементы .cursor, чтобы они находились в корне body, чтобы родительский стиль не влиял на них каким-либо образом.

Я бы предложил использовать последнее.

0 голосов
/ 25 июня 2019

Я до сих пор не совсем уверен, в чем проблема с полями, отбрасывающими вещи, но, как оказалось, когда я переместил <div class="cursor"></div> в один из моих других блогов по разработке внутри элемента <nav class="navbar2"> Bootstrap navbar, он решил проблема для меня полностью.

Несмотря на то, что в моей уменьшенной демонстрационной версии тестового примера у меня нет навигационной панели, я просто создал пустой и поместил элемент курсора внутри этой 

<nav class="navbar2">
  <div class="cursor"></div>
  <div class="cursor"></div>
</nav>

Здесь также решена проблема.

Так что, связано ли это с Bootstrap4 или с Blogger, я не знаю, но это помогло мне. Я добавлю тег Bootstrap4 к этому вопросу StackOverflow на случай, если у кого-то еще возникнут подобные проблемы.

...