Створення динамічної картки каруселі слів за допомогою чистого CSS

Динамічна картка зі словами, створена лише за допомогою CSS

Я рідко переглядаю Product Hunt, тому був здивований, коли сьогодні випадково натрапив на UIverse. Під час вивчення їхньої колекції компонентів, мою увагу привернув обертовий карусель з текстом. Переглянувши пост @kennyotsu, я зацікавився: чи можна відтворити це за допомогою лише семантичної розмітки та базового CSS?

На моєму попередньому домашньому сайті v3 Robleto.com (тепер v4) я використовував текст типу машинопису для написання та видалення багатьох титулів, які я маю професійно та особисто. Хоч я й відмовився від цього дизайну, я захотів повернутися до цієї концепції з обертовими словами, створивши багаторазовий компонент для мого інструментарію.

Ідея: Універсальне представлення ролей

Цей компонент є динамічним способом показати кілька варіантів в одному, елегантному просторі. Завдяки плавним анімаціям, він обертається через різні текстові елементи, створюючи захоплюючу презентацію, яка привертає увагу, не перевантажуючи користувача.

Процес: Магія HTML та CSS

HTML

Структура є елегантно простою — семантичний HTML з div для картки та обертовим списком <ul> варіантів.

    CSS is    
Awesome
Exhausting
Frustrating
Satisfying
Challenging
Confusing
Rewarding
Overwhelming
Liberating
Irritating

CSS (SCSS)

Використовуючи keyframes, я створив плавну анімацію обертання слів, де кожен титул природно переходить до наступного. Картка зберігає чисту, сучасну естетику з адаптивним макетом.

Ключові моменти:
- Flexbox для макету та вирівнювання.
- Користувацькі анімації через @keyframes для вертикальних переходів тексту.
- Базовий адаптивний елемент для маленьких екранів.

 // Глобальні змінні для кольорів і розміру тексту
   $bg-color: #fff;
   $highlight: #316FA1;
   $text-size: 2.2rem;

   body {
     background: lighten($highlight, 40%);
     background-image: repeating-linear-gradient(45deg, rgba(#FFF, .1), rgba(#FFF, .1) 30px, transparent 0, transparent 60px);
     font-size: $text-size;
     font-weight: 600;
     font-family: 'Bebas Neue', sans-serif;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .card {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fff;
     border: 1px solid #e8e8e8;
     border-radius: 0.3rem;
     padding: 5rem 3rem;
     box-shadow: 0 5px 5px #0005;
   }

   // Анімований список
   .card ul {
     overflow: hidden;
     position: relative;
     font-size: $text-size;
     height: ($text-size + ($text-size * 0));
   }

   // Елементи списку
   li {
     display: block;
     height: 100%;
     padding-left: .5rem;
     color: $highlight;
     animation: rotate-the-words 10s infinite;
   }

   // Адаптивне розташування для малих екранів
   @media (max-width: 600px) {
     .card {
       flex-direction: column;
     }
   }

   // Анімоване вертикальне обертання списку
   @keyframes rotate-the-words {
     0% { transform: translateY(100%); }
     2%, 10% { transform: translateY(-0%); }
     12%, 20% { transform: translateY(-100%); }
     /* і так далі */
   }

Результат: Перевикористовуваний, елегантний компонент

Кінцевий продукт — це чиста, візуально динамічна картка, де елементи обертаються плавно, привертаючи увагу без перевантаження користувача.
Це ідеально підходить для:

• Портфоліо-сайтів: Підкресліть свої навички в компактному, стильному дизайні.
• Цільових сторінок: Продемонструйте ключові особливості, переваги продукту або ролі.
• Елементів розповіді: Використовуйте анімації тексту для створення наративу.

Найкраща частина?

Це чистий CSS — без зайвих JavaScript-скриптів, лише чистий, ефективний код.

Що я дізнався

• Повернення до можливостей CSS нагадало мені, що прості рішення часто дають найсильніший вплив.
• Робота з keyframes творчо і поєднання анімацій тексту з гнучкими макетами надихнули на ідеї для схожих компонентів.
• Найкраще з усього — це глибоке задоволення від створення чогось візуально привабливого і функціонального.

Спробуйте це самі

Код легкий, налаштовуваний і готовий для вашої творчості. Хочете швидші анімації? Змініть тривалість. Потрібно більше ролей? Просто додайте більше <li> тегів.

Ось Pen для вас, щоб дослідити: Динамічна картка з каруселлю слів на CodePen
(Не соромтеся форкати, змінювати і робити це своїм!)

Давайте продовжимо рухатись вперед з творчим кодом. Яку малу ідею ви можете перетворити на щось визначне сьогодні?

Ключова думка

Це не просто обертовий список; це демонстрація того, як чистий дизайн і простий CSS можуть розповісти історію. Чи то ваші ролі, особливості, чи улюблені цитати — можливості безмежні.

Більш абстрактна думка... добре досліджувати, інколи натхнення приходить з найнеочікуваніших місць.

Відмова від відповідальності: Як завжди, усі думки — мої власні, і не моєї компанії, яка не платить мені за програмування моїх почуттів щодо CSS, які, ймовірно, я повинен був би ділитися на терапії, а не в рішенні на CodePen. Дякую _ Kenny Otsu _за натхнення. Хоч вони й виглядають дуже схоже, після зворотного інженерії кожен рядок коду був створений вручну Грегом Роблето.

Грег Роблето — robleto.com

Перекладено з: Building a Dynamic Word Carousel Card with Pure CSS