Рубрики
Без рубрики

Создание эффекта «волны» с CSS

Создание эффекта «волны» с чистыми CSS или просто небольшая помощь от JavaScript и Zurb Foundation.

Автор оригинала: LAU TIAM KOK.

Вступление

Много лет назад, если вы хотите создать док-станцию MacOS с подпрыгивающим эффектом для вашей веб-страницы, это была большая проблема, и вам понадобится JavaScript, чтобы помочь вам сделать это. Сегодня мы можем достичь этого с чистыми CSS, как кусок пирога.

CSS «Переход» и «Flex»

Есть два варианта, которые вы можете сделать это, но Переход это то, что вы в основном нужно:

  1. Использование Переход С системой сетки от Фонда Zurb Zurb и небольшая помощь от JavaScript или без.
  2. Используя только Переход с Flex без ничего другого.

Опция 1

Основной HTML, который вам нужен:

И в основном это то, что вам нужно иметь в ваших CSS (я использую меньше):

.cell-item {
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    transition: width 1s ease;
}

И в вашем JavaScript зависит от того, какое событие вам нужно, либо событие «Hover», либо «Click» (я использую «» для моего примера):

$('.cell-item a').on('click', function(event) {
  event.preventDefault()
  var $this = $(this)
  var parent = $this.closest('.cell')
  var context = $this.closest('.row')

  parent.addClass('large-6 active').removeClass('large-3')
  parent.siblings('.cell').addClass('large-2').removeClass('large-3 large-6 active')
  context.siblings('.row-scale').find('.cell').addClass('large-3').removeClass('large-2 large-6 active')
})

Идея состоит в том, чтобы поменяться вокруг Большой-3 , Большой-6 и Большой-2 Отказ Когда вам нужно клетки Усаживаться, вы добавляете Большой-2 и удалить Большой-3 Отказ Когда вам нужно клетки Чтобы увеличить, вы добавляете Большой-6 и удалить Большой-3 Отказ CSS Переход сделаю остаток работы для вас.

Вариант 2.

Основной HTML, который вам нужен:

CSS (меньше) вам нужно:

.flex-items {
    display: flex;
    flex-direction: row;
}

.flex-item {
    -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;

    -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;

    &:hover {
        -webkit-box-flex: 4;
        -ms-flex-positive: 4;
        flex-grow: 4;
    }
}

Вы просто используете Flex: 1 начать с, и поменяйте его с Flex-рост: 4 или любое число, когда вам нужен Flex-item увеличивать, когда вы Hover Это. Опять же, Переход сделаю все остальное для вас.

Заключение

Там вы идете, теперь у вас есть эффект «волны» так же просто, как это. Вы можете Скачать или Смотри Как это работает с моего репозитория GitHub. Дайте мне знать, что вы думаете. Любые улучшения или предложения, просто оставьте мне комментарий ниже.