Выделение логотипа – это популярная функция веб-дизайна, которая придает веб-сайту визуальный интерес и динамизм. Он предполагает анимацию последовательности логотипов или изображений по горизонтали на экране. В этой статье мы рассмотрим несколько методов реализации эффекта выделения логотипа на примерах кода в HTML, CSS и JavaScript.

Метод 1: CSS-анимация
Один из способов создать эффект выделения логотипа — использовать CSS-анимацию. Мы можем определить анимацию ключевого кадра, которая перемещает логотипы по горизонтали, а затем применить ее к элементу контейнера. Вот пример:

HTML:

<div class="logo-marquee">
  <img src="logo1.png" alt="Logo 1">
  <img src="logo2.png" alt="Logo 2">
  <img src="logo3.png" alt="Logo 3">
</div>

CSS:

.logo-marquee {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

Метод 2: анимация JavaScript
Другой подход — использовать JavaScript для анимации эффекта выделения логотипа. Мы можем рассчитать положение логотипов и обновлять их положение через определенные промежутки времени. Вот пример использования JavaScript:

HTML:

<div class="logo-marquee">
  <img src="logo1.png" alt="Logo 1">
  <img src="logo2.png" alt="Logo 2">
  <img src="logo3.png" alt="Logo 3">
</div>

JavaScript:

const marqueeContainer = document.querySelector('.logo-marquee');
const logos = marqueeContainer.querySelectorAll('img');
let position = 0;
function moveLogos() {
  position--;
  logos.forEach(logo => {
    logo.style.transform = `translateX(${position}px)`;
  });
  if (position <= -logos[0].width) {
    position = 0;
  }
  requestAnimationFrame(moveLogos);
}
moveLogos();

Метод 3: CSS Scroll Snap
CSS Scroll Snap — относительно новая функция, которая обеспечивает плавную прокрутку и привязку к определенным позициям. Мы можем использовать эту функцию для создания эффекта выделения логотипа. Вот пример:

HTML:

<div class="logo-marquee">
  <img src="logo1.png" alt="Logo 1">
  <img src="logo2.png" alt="Logo 2">
  <img src="logo3.png" alt="Logo 3">
</div>

CSS:

.logo-marquee {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.logo-marquee img {
  scroll-snap-align: center;
}

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