Блоб топ – стильный и комфортный выбор для модных девушек

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

Реализовать блоб топ можно с помощью CSS и JavaScript. В CSS для элемента задается начальная форма и размер, а с помощью JavaScript происходят изменения параметров, создающие эффект жидкости.

Пример кода блоб топ на чистом CSS:

html

css
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff5252;
  animation: blob 2s infinite ease-in-out;
}
@keyframes blob {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8) translate(30%, -30%);
  }
  50% {
    transform: scale(0.5) translate(-50%, 30%);
  }
  75% {
    transform: scale(0.8) translate(-30%, 30%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

Пример кода блоб топ с использованием библиотеки GreenSock в JavaScript:

html

css
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff5252;
}

javascript
const blob = document.querySelector('.blob');
const tween = gsap.to(blob, {
  duration: 2,
  ease: 'power4.out',
  repeat: -1,
  repeatDelay: 0.25,
  yoyo: true,
  borderRadius: '50%',
  scale: 0.5,
  x: '-50%',
  y: '50%',
  modifiers: {
    borderRadius: function (value) {
      return value + '%';
    },
  },
});

В этом примере используется библиотека GreenSock (GSAP), которая позволяет управлять анимациями с высокой точностью и производительностью. С помощью метода to из библиотеки происходит плавное изменение параметров элемента, создающее эффект блоб топ. Также используется модификатор borderRadius для анимации изменения радиуса элемента в процентах.