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

Question

[FrelFrloich]

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

https://jevelin.shufflehound.com/education/

Вопрос таков, как сделать подобный эффект на карточках под заголовком Study Programs, для любителей послать на фриланс, это не для работы, мне понравилось, но я не могу допереть как.
Моя попытка, ужасна и не изящна, но какая есть, получается только или сверху и снизу, с боков но в отдельности)
https://codepen.io/FrelAderal/pen/mdMgdOV?editors=1010

Уже пределал и вроде как работает адекватно, если вам не составит труда поглядите и подскажите что можно сократить и сделать красивее.

Comments

[Сергей Сергей]

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

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';
    }
  }
}

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

[FrelFrloich]

Сергей Сергей, Я уже переделал и вроде как работает норм, можете взглянуть и сказать, а то я подглючиваю слегонца и не могу понять нормально работает или нет. https://codepen.io/FrelAderal/pen/mdMgdOV

[FrelFrloich]

Сергей Сергей, С вашим у меня сильно всё глючно как то через чур, извините, спасибо за старания.

[Сергей Сергей]

нормально, только от дублирования кода избавиться и всё. И transition можно не обнулять, наверно.

switch с минимальным значением изящнее моего if-else на три глубины.

[FrelFrloich]

Сергей Сергей, трансишн нельзя к сожалению убрать, сразу ахтунг начинается) Но всё равно трабла, когда одновременно скроллишь и одновременно наводишь, чутка не корректно.

[Сергей Сергей]

Пока прокрутка идёт запретить эффект, может быть?

[FrelFrloich]

Сергей Сергей, Нет, это уже придирчивость и некая педантичность с моей стороны, обычный пользователь скорее всего не обратит внимание.

[FrelFrloich]

Сергей Сергей, как думаешь это адекватное не повторения самого себя https://codepen.io/FrelAderal/pen/mdMgdOV?editors=1010

[Сергей Сергей]

enterCard и leaveCard можно объединить в одну функцию, там ведь только значения меняются. Минимум и зону наведения можно перенести в функцию funcCoord, и делать возврат готовых флагов.

// поможет сократить код, если применять к месту
let [ fromtop, fromright, frombottom, fromleft ] = ( (a,n) => (n = Math.min(...a),a.map(a=>a===n)) )( [1,2,3,4] )

[FrelFrloich]

Сергей Сергей, понял, спасибо.

Answer 1

[Антон Шаманов]

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