Как сделать подобный js эффект?

здесь только для наведения

const cardsAnim = document.querySelectorAll('.card_js')
    const cardsContentAnim = document.querySelectorAll('.card-contanet_js')

    for (let index = 0; index < cardsAnim.length; index++) {
        const card = cardsAnim[index]
        const cardContent = cardsContentAnim[index]

        card.addEventListener('mouseenter', (e) => {
            let cardRect = card.getBoundingClientRect()
            

            let relX = e.pageX - cardRect.left
            let relY = e.pageY - cardRect.top - getBodyScrollTop()

            let cardHeight = (cardRect.height + 100) / 2
            let cardWeight = cardRect.width / 2

            console.log(relX, cardRect.left, e.pageX)
            const zone = zonexy( e.pageX, e.pageY, cardRect );
            cardContent.innerText = zone;

            if ( zone === 'top' ) {
                cardContent.style.top = '-100%'
                cardContent.style.left = '0'

                cardContent.style.transition = '0s top ease'

                setTimeout(() => {
                    cardContent.style.top = '0'
                    cardContent.style.transition = '0.3s top ease'
                }, 0)
            } else if ( zone === 'bottom' ) {
                cardContent.style.top = '100%'
                cardContent.style.left = '0'

                cardContent.style.transition = '0s top ease'

                setTimeout(() => {
                    cardContent.style.top = '0'
                    cardContent.style.transition = '0.3s top ease'
                }, 0)
            } else if ( zone === 'left' ) {
                cardContent.style.left = '-100%'
                cardContent.style.top = '0'

                cardContent.style.transition = '0s left ease'

                setTimeout(() => {
                    cardContent.style.left = '0'
                    cardContent.style.transition = '0.3s left ease'
                }, 0)
            } else if ( zone === 'right' ) {
                cardContent.style.left = '100%'
                cardContent.style.top = '0'

                cardContent.style.transition = '0s left ease'

                setTimeout(() => {
                    cardContent.style.left = '0'
                    cardContent.style.transition = '0.3s left ease'
                }, 0)
            }
        })

        card.addEventListener('mouseleave', (e) => {
            let cardRect = card.getBoundingClientRect()

            let relX = e.pageX - cardRect.left
            let relY = e.pageY - cardRect.top - getBodyScrollTop()

            let cardHeight = (cardRect.height + 100) / 2
            let cardWeight = cardRect.width / 2

            if (relY < cardHeight) {
                cardContent.style.transition = '0s top ease'
                cardContent.style.left = '0'

                setTimeout(() => {
                    cardContent.style.top = '-100%'
                    cardContent.style.transition = '0.3s top ease'
                }, 0)
            } else if (relY > cardHeight) {
                cardContent.style.transition = '0s top ease'
                cardContent.style.left = '0'

                setTimeout(() => {
                    cardContent.style.top = '100%'
                    cardContent.style.transition = '0.3s top ease'
                }, 0)
            } else if (relX < cardWeight) {
                cardContent.style.transition = '0s left ease'
                cardContent.style.top = '0'

                setTimeout(() => {
                    cardContent.style.left = '-100%'
                    cardContent.style.transition = '0.3s left ease'
                }, 0)
            } else if (relX > cardWeight) {
                cardContent.style.transition = '0s left ease'
                cardContent.style.top = '0'

                setTimeout(() => {
                    cardContent.style.left = '100%'
                    cardContent.style.transition = '0.3s left ease'
                }, 0)
            }
        })
    }

    function getBodyScrollTop() {
        return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop)
    }

  

function zonexy( x, y, {top,left,bottom,right} ) {
  const lx = x - left;
  const rx = right - x;
  const ty = y - top;
  const by = bottom - y;
  if( lx < rx ) {
    if( ty < by ) {
      if( lx < ty ) return 'left';
      else return 'top';
    }else{
      if( lx < by ) return 'left';
      else return 'bottom';
    }
  }else{
    if( ty < by ) {
      if( rx < ty ) return 'right';
      else return 'top';
    }else{
      if( rx < by ) return 'right';
      else return 'bottom';
    }
  }
}

и с прокруткой надо пошаманить.

Как сделать, чтобы картинка наезжала на обводку?

.block {
  display: flex;
  height: 400px;
  border-radius: 15px;
  overflow: visible;
  width: 70%;
  border: 4px solid gray;

  &__text {
    margin-left: 30px;
  }

  &__img {
    /*z-index: 10;*/
    margin: -4px;
    border-radius: 15px 0 0 15px;
  }
}

Как инвертировать сигнал транзистора для реле?

Реле для нагрузки 120 В. Чё за насос такой? И вообще, откуда такая схема датчика?

Как отфильтровать массив обьектов?

Сергей Соколов, Alexandroppolus, в пору нативную функцию вводить для такого.

Как правильно выбрать переменные из json в bash скрипте?

grep -e \"ip\" -e \"name\"

Почему выдает ошибку?

d-sem, Danny Arty, "свойство не определено для null" я полагаю.

Как удалить класс в скрипте при скроллинге вверх?

Что за ошибка?

Как дождаться элемент на странице, чтобы к нему добавить новый используя createElement?

(function f( s ) {
  const se = document.querySelector( s );
  if( se ) {
    // createElement
    // append
  }else{
    setTimeout( f, 500, s );
  }
})('div.settings');

Как сверстать стрелочки в макете?

это так, proof of concept.

Как расположить кнопку чуть ниже центра?

.btn ul{
  margin-top: 50px;
}

Как удалить класс в скрипте при скроллинге вверх?

а так?

-else if (scrollPosition() < lastScroll) {
+else if (scrollPosition() < lastScroll || scrollPosition() < defaultOffset) {

Как удалить класс в скрипте при скроллинге вверх?

Если && заменить на ||?

Как выполнить функцию если выбран определенный select?

(function f( s, v, d, c ) {
  const se = document.querySelector( s );
  const de = document.querySelector( d );
  if( se.selectedOptions[0].value === v ) {
    de.classList.remove( c );
  }else{
    setTimeout( f, 500, s, v, d, c );
  }
})('.wpcf7-form-control', 'Instagram and MB', '.form-item.another_jeweler.d-none', 'd-none');

При row, div начинается с новой строки, как починить?

Нужно убрать div.navigator, он мешает правильной структуре вложенности.

Не изменяет переменную в Nodejs почему?

потому что callback убивает await синхронизацию.

При row, div начинается с новой строки, как починить?

Так бы скриншот, а лучше интерактивный пример на codepen, и с раскраской блоков разным фоном, чтобы нагляднее.

При row, div начинается с новой строки, как починить?

атрибут class повторяется.

Как сделать, чтобы табы переключались с помощью кнопок?

Если для .tab сделать position: relative;, то li.step начинают нормально реагировать. Не знаю, насколько это реально, но что-то с перекрытием абсолютно позиционированных элементов не то.

Как избежать сдвига блоков при использовании :hover?

что?

вот так пусть будет

label{
    padding: 3px 3px 3px 10px;
    border-radius: 5px;
    background-color:blanchedalmond;
    margin-bottom: 4px;
    min-width: 145px;
    border: 1px solid transparent;
}
label:hover{
  border-color: greenyellow;
}

Как избежать сдвига блоков при использовании :hover?

прозрачный бордюр без наведения сделать.