feat: добавить лоадеры Dots, Rotating Text и DNA Strain

— Добавлен dots-pulsating (минимализм на CSS-переменных) — Добавлен rotating-text (эффект переворота букв с использованием JS) — Добавлен dna-strain (научная анимация цепочки ДНК) — Обновлен общий README.md: коллекция расширена до 8 элементов
2026-04-04 22:31:42 +03:00
parent 29324fca97
commit 4145ca07c4
12 changed files with 590 additions and 7 deletions
@@ -0,0 +1,15 @@
+# 🔄 Rotating Text 3D
+
+Продвинутая анимация смены слов с эффектом 3D-вращения каждой отдельной буквы. Идеально подходит для динамических заголовков или креативных загрузочных экранов.
+
+### Особенности
+
+- **3D Letter Flip**: Буквы переворачиваются по оси X, создавая объемный эффект «барабана».
+- **Dynamic JS**: Скрипт автоматически разбивает слова на отдельные символы (`span`), что позволяет использовать любые слова без ручной правки HTML.
+- **Color Themes**: Предусмотрено 5 ярких цветовых схем (Emerald, Peter River, Wisteria и др.).
+
+### Технологии
+
+- **CSS3 Transforms**: Использование `rotateX` и `transform-origin` для глубины.
+- **Vanilla JS**: Чистый JavaScript для управления таймингами и переключения слов.
+- **Google Fonts**: Подключен современный шрифт **Lato**.
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Rotating Text</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="rotating-text">
+  <p>CSS Animation is</p>
+  <p>
+    <span class="word alizarin">awesome.</span>
+    <span class="word wisteria">beautiful.</span>
+    <span class="word peter-river">creative.</span>
+    <span class="word emerald">fabulous.</span>
+    <span class="word sun-flower">interesting.</span>
+  </p>
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
@@ -0,0 +1,37 @@
+"use strict";
+let words = document.querySelectorAll(".word");
+words.forEach(word => {
+    let letters = word.textContent.split("");
+    word.textContent = "";
+    letters.forEach(letter => {
+        let span = document.createElement("span");
+        span.textContent = letter;
+        span.className = "letter";
+        word.append(span);
+    });
+});
+let currentWordIndex = 0;
+let maxWordIndex = words.length - 1;
+words[currentWordIndex].style.opacity = "1";
+let rotateText = () => {
+    let currentWord = words[currentWordIndex];
+    let nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
+    // rotate out letters of current word
+    Array.from(currentWord.children).forEach((letter, i) => {
+        setTimeout(() => {
+            letter.className = "letter out";
+        }, i * 80);
+    });
+    // reveal and rotate in letters of next word
+    nextWord.style.opacity = "1";
+    Array.from(nextWord.children).forEach((letter, i) => {
+        letter.className = "letter behind";
+        setTimeout(() => {
+            letter.className = "letter in";
+        }, 340 + i * 80);
+    });
+    currentWordIndex =
+        currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
+};
+rotateText();
+setInterval(rotateText, 4000);
@@ -0,0 +1,59 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:600);
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #222;
+}
+
+.rotating-text {
+  font-family: Lato, sans-serif;
+  font-weight: 600;
+  font-size: 36px;
+  color: white;
+  transform: translateX(-80px);
+}
+.rotating-text p {
+  display: inline-flex;
+  margin: 0;
+  vertical-align: top;
+}
+.rotating-text p .word {
+  position: absolute;
+  display: flex;
+  opacity: 0;
+}
+.rotating-text p .word .letter {
+  transform-origin: center center 25px;
+}
+.rotating-text p .word .letter.out {
+  transform: rotateX(90deg);
+  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
+}
+.rotating-text p .word .letter.in {
+  transition: 0.38s ease;
+}
+.rotating-text p .word .letter.behind {
+  transform: rotateX(-90deg);
+}
+
+.alizarin {
+  color: #e74c3c;
+}
+
+.wisteria {
+  color: #8e44ad;
+}
+
+.peter-river {
+  color: #3498db;
+}
+
+.emerald {
+  color: #2ecc71;
+}
+
+.sun-flower {
+  color: #f1c40f;
+}