Статьи

Coda Popup Bubbles

Январь 30, 2018

Фон

Coda — один из новых инструментов веб-разработки для Mac — и он популярен среди дизайнеров и разработчиков, которых я знаю. Panic (разработчики Coda) также известны своим острым дизайном.

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

По сути, эффект представляет собой простую комбинацию эффекта, но есть несколько нюансов, которые следует остерегаться.

Coda Bubble

Как решить проблему

Чтобы создать эффект всплывающего всплывающего пузыря, нам нужно следующее:

  1. Разметка, предполагающая, что JavaScript отключен. Было бы справедливо сказать, что всплывающее окно будет скрыто от CSS.
  2. Скрытое всплывающее окно, правильно стилизованное для отображения.
  3. jПросьба анимировать эффект затяжки на mouseoverи mouseout.

Самая большая хитрость, о которой следует опасаться: при наведении мыши на всплывающее окно, это запускает значок mouseoutна изображении, используемом для запуска показанного всплывающего окна. Я объясню (внимательно), как убедиться, что эффект не потерпит неудачу в этой ситуации.

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

Посмотрите скринкабл coda bubble ( альтернативная версия flash )

(Версия QuickTime составляет около 23 Мб, флэш-версия потоковая)

Посмотреть демо и исходный код, используемый в скринкасте

HTML-разметка

В целях повторного использования я поместил мои «target» и «popup» в div. Цель — это элемент, который пользователь должен mouseoverпоказать во всплывающем окне.

<div class="bubbleInfo">
  <img class="trigger" src="http://mysite.com/path/to/image.png" />
  <div class="popup">
    <!-- your information content -->
  </div>
</div>

CSS

Там очень мало к минимуму требуется CSS. Конечно, то, как вы разметите свой пузырь, изменит это, и в скринкасте используется версия с веб-сайта Coda, так что для стилизации пузыря существует значительное количество CSS.

Минимум, который я рекомендую для примера:

.bubbleInfo {
    position: relative;
}

.popup {
    position: absolute;
    display: none; /* keeps the popup hidden if no JS available */
}

Таким образом, мы можем абсолютно точно расположить всплывающее окно против триггера

JQuery

Чтобы создать эффект, нам нужно запустить следующую анимацию для всплывающего элемента:

Мышь над

  1. Вкл mouseover: сбросить позицию всплывающего окна (требуется, потому что мы плывем вверх, когда пыхтим).
  2. Анимируйте непрозрачность всплывающего окна от 0 до 1 и переместите его верхнюю позицию CSS на минус 10 пикселей (для перемещения вверх).
  3. Если mouseoverснова выстрелили, а мы все еще оживляем — игнорируйте.
  4. Если mouseoverснова запущен, а всплывающее окно уже видно — игнорировать.

Мышь вне

  1. Установите таймер для запуска функции скрытия всплывающих окон (это предотвращает случайное перемещение из «активной» области).
  2. Если таймер установлен (для скрытия), сбросьте таймер (таким образом, позволяя срабатывать только одной функции скрытия).
  3. По истечении этого времени анимируйте непрозрачность всплывающего окна от 1 до 0 и переместите его верхнюю позицию CSS на минус 10 пикселей (чтобы всплыть вверх).
  4. Установите соответствующие флаги, чтобы указать, что всплывающее окно теперь скрыто.

Трюк’

Там была одна хитрая логика, которую я изначально не мог понять. Каждый раз, когда я наводил курсор мыши на всплывающее окно, он mouseoutзапускал элемент триггера, который скрывал всплывающее окно. Это нежелательная ошибка.

Возможно, есть и другой способ обойти это, и, насколько я могу судить, разработчики сайта Coda не решили эту проблему таким образом, но вот решение:

Вам необходимо очистить таймер, установленный в mouseout(пункт 1 выше) в mouseover. Это полностью решает проблему.

Полный исходный код

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

$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -100,
          left: -33,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});

Продолжая

Этот эффект можно улучшить, изменив исходный popup.css()код reset ( ) для чтения из элемента триггера и приблизительного его положения. В моем примере я жестко закодировал это, потому что у меня есть только один на странице — но вы можете использовать этот эффект несколько раз на своей странице.

33
Share: