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
@@ -5,13 +5,16 @@

 ## Обзор коллекции

-| Превью | Компонент                            | Стиль        | Особенности                                 |
-| :----- | :----------------------------------- | :----------- | :------------------------------------------ |
-| 🎰     | [`Rolling Letters`](./rolling-text/) | Текстовый    | Эффект барабана и каскадное выпадение букв. |
-| 🧬     | [`Helix DNA`](./helix-dna/)          | 3D / Научный | Сложная анимация вращения двойной спирали.  |
-| ⚔️     | [`Lightsaber Fight`](./lightsaber/)  | Креатив      | Мини-сюжет сражения на мечах с искрами.     |
-| 🥞     | [`Pancake Cooking`](./pancake/)      | Сюжетный     | Детальная анимация подбрасывания блинчика.  |
-| 🎾     | [`Pong Game`](./pong-game/)          | Ретро        | Минималистичный геймплей легендарной игры.  |
+| Превью | Компонент                             | Стиль        | Особенности                                  |
+| :----- | :------------------------------------ | :----------- | :------------------------------------------- |
+| 🎰     | [`Rolling Letters`](./rolling-text/)  | Текстовый    | Эффект барабана и каскадное выпадение букв.  |
+| 🧬     | [`Helix DNA`](./helix-dna/)           | 3D / Научный | Сложная анимация вращения двойной спирали.   |
+| ⚔️     | [`Lightsaber Fight`](./lightsaber/)   | Креатив      | Мини-сюжет сражения на мечах с искрами.      |
+| 🥞     | [`Pancake Cooking`](./pancake/)       | Сюжетный     | Детальная анимация подбрасывания блинчика.   |
+| 🎾     | [`Pong Game`](./pong-game/)           | Ретро        | Минималистичный геймплей легендарной игры.   |
+| ⚪     | [`Dots Pulsating`](./dots-pulsating/) | Минимализм   | Настройка через CSS Variables, эффект волны. |
+| 🔄     | [`Rotating Text`](./rotating-text/)   | Текстовый    | 3D-переворот букв, выбор цветов.             |
+| 🧬     | [`DNA Strain`](./dna/)                | Научный      | Плоская анимация вращения цепочки. Pure CSS  |

 ## Технологии

@@ -0,0 +1,15 @@
+# 🧬 DNA Strain Loader
+
+Элегантная двумерная анимация цепочки ДНК, реализованная на чистом CSS. Имитирует вращение за счет динамического изменения ширины соединительных линий и масштабирования узлов.
+
+### Особенности
+
+- **Pure CSS**: Вся логика вращения построена на `@keyframes` без использования сторонних скриптов.
+- **Pseudo-elements**: Узлы цепочки реализованы через `:before` и `:after`, что минимизирует количество HTML-разметки.
+- **Cascading Delay**: Эффект плавной волны достигается за счет точечной настройки `animation-delay` для 12 последовательных элементов.
+
+### Технические детали
+
+- **Rotation Illusion**: Анимация `rotate-strain` циклически меняет ширину линии от 155px до 0.
+- **Sync Scaling**: Узлы меняют размер (`scale`) и положение синхронно с линией, создавая иллюзию объема.
+- **Webkit Support**: Включены префиксы для стабильной работы в старых версиях браузеров.
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>DNA</title>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<div class="strain"></div>
+<!-- partial -->
+  
+</body>
+</html>
@@ -0,0 +1,228 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  background-color: #292929;
+  padding-top: 50px;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.strain {
+  width: 155px;
+  height: 1px;
+  background-color: #dbdbdb;
+  position: relative;
+  margin: 0px auto;
+  margin-top: 28px;
+  margin-bottom: 28px;
+  -webkit-animation-name: rotate-strain;
+          animation-name: rotate-strain;
+  -webkit-animation-duration: 1.7s;
+          animation-duration: 1.7s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+.strain:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #13b6e2;
+  left: 0;
+  margin-top: -9px;
+  margin-left: -9px;
+  -webkit-animation-name: strain-size-left;
+          animation-name: strain-size-left;
+  -webkit-animation-duration: 1.7s;
+          animation-duration: 1.7s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+.strain:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #13b6e2;
+  right: 0;
+  margin-top: -9px;
+  margin-right: -9px;
+  -webkit-animation-name: strain-size-right;
+          animation-name: strain-size-right;
+  -webkit-animation-duration: 1.7s;
+          animation-duration: 1.7s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+.strain:nth-child(1), .strain:nth-child(1):before, .strain:nth-child(1):after {
+  -webkit-animation-delay: 0.15s;
+          animation-delay: 0.15s;
+}
+.strain:nth-child(2), .strain:nth-child(2):before, .strain:nth-child(2):after {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+.strain:nth-child(3), .strain:nth-child(3):before, .strain:nth-child(3):after {
+  -webkit-animation-delay: 0.45s;
+          animation-delay: 0.45s;
+}
+.strain:nth-child(4), .strain:nth-child(4):before, .strain:nth-child(4):after {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+.strain:nth-child(5), .strain:nth-child(5):before, .strain:nth-child(5):after {
+  -webkit-animation-delay: 0.75s;
+          animation-delay: 0.75s;
+}
+.strain:nth-child(6), .strain:nth-child(6):before, .strain:nth-child(6):after {
+  -webkit-animation-delay: 0.9s;
+          animation-delay: 0.9s;
+}
+.strain:nth-child(7), .strain:nth-child(7):before, .strain:nth-child(7):after {
+  -webkit-animation-delay: 1.05s;
+          animation-delay: 1.05s;
+}
+.strain:nth-child(8), .strain:nth-child(8):before, .strain:nth-child(8):after {
+  -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+}
+.strain:nth-child(9), .strain:nth-child(9):before, .strain:nth-child(9):after {
+  -webkit-animation-delay: 1.35s;
+          animation-delay: 1.35s;
+}
+.strain:nth-child(10), .strain:nth-child(10):before, .strain:nth-child(10):after {
+  -webkit-animation-delay: 1.5s;
+          animation-delay: 1.5s;
+}
+.strain:nth-child(11), .strain:nth-child(11):before, .strain:nth-child(11):after {
+  -webkit-animation-delay: 1.65s;
+          animation-delay: 1.65s;
+}
+.strain:nth-child(12), .strain:nth-child(12):before, .strain:nth-child(12):after {
+  -webkit-animation-delay: 1.8s;
+          animation-delay: 1.8s;
+}
+
+@-webkit-keyframes rotate-strain {
+  0% {
+    width: 155px;
+  }
+  25% {
+    width: 0;
+  }
+  50% {
+    width: 155px;
+  }
+  75% {
+    width: 0;
+  }
+  100% {
+    width: 155px;
+  }
+}
+
+@keyframes rotate-strain {
+  0% {
+    width: 155px;
+  }
+  25% {
+    width: 0;
+  }
+  50% {
+    width: 155px;
+  }
+  75% {
+    width: 0;
+  }
+  100% {
+    width: 155px;
+  }
+}
+@-webkit-keyframes strain-size-left {
+  0% {
+    transform: scale(1) translateX(0px);
+  }
+  25% {
+    transform: scale(0.5);
+  }
+  50% {
+    transform: scale(1) translateX(155px);
+  }
+  75% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1) translateX(0px);
+  }
+}
+@keyframes strain-size-left {
+  0% {
+    transform: scale(1) translateX(0px);
+  }
+  25% {
+    transform: scale(0.5);
+  }
+  50% {
+    transform: scale(1) translateX(155px);
+  }
+  75% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1) translateX(0px);
+  }
+}
+@-webkit-keyframes strain-size-right {
+  0% {
+    transform: scale(1) translateX(0px);
+  }
+  25% {
+    transform: scale(1.5);
+  }
+  50% {
+    transform: scale(1) translateX(-155px);
+  }
+  75% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(1) translateX(0px);
+  }
+}
+@keyframes strain-size-right {
+  0% {
+    transform: scale(1) translateX(0px);
+  }
+  25% {
+    transform: scale(1.5);
+  }
+  50% {
+    transform: scale(1) translateX(-155px);
+  }
+  75% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(1) translateX(0px);
+  }
+}
@@ -0,0 +1,101 @@
+$bg: #292929;
+$blue: #13b6e2;
+$gray: #dbdbdb;
+
+@mixin animation-delay($time) {
+	animation-delay: $time;
+}
+
+html, body {
+	width: 100%;
+	height: 100%;
+	background-color: $bg;
+	padding-top: 50px;
+}
+
+*, *:before, *:after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+.strain {
+	width: 155px;
+	height: 1px;
+	background-color: $gray;
+	position: relative;
+	margin: 0px auto;
+	margin-top: 28px;
+	margin-bottom: 28px;
+	animation-name: rotate-strain;
+	animation-duration: 1.7s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-play-state: running;
+	
+	&:before {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background-color: $blue;
+		left: 0;
+		margin-top: -9px;
+		margin-left: -9px;
+		animation-name: strain-size-left;
+		animation-duration: 1.7s;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		animation-play-state: running;
+	}
+	
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background-color: $blue;
+		right: 0;
+		margin-top: -9px;
+		margin-right: -9px;
+		animation-name: strain-size-right;
+		animation-duration: 1.7s;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		animation-play-state: running;
+	}
+	
+	@for $i from 1 through 12 {
+		&:nth-child(#{$i}), &:nth-child(#{$i}):before, &:nth-child(#{$i}):after {
+			@include animation-delay((.15s * $i));
+		}
+	}	
+}
+
+@keyframes rotate-strain {
+	0% {width: 155px;}
+	25% {width: 0;}	
+	50% {width: 155px;}	
+	75% {width: 0;}
+	100% {width: 155px;}
+}
+
+@keyframes strain-size-left {
+	0% {transform: scale(1) translateX(0px);}	
+	25% {transform: scale(.5);}	
+	50% {transform: scale(1) translateX(155px);}	
+	75% {transform: scale(1.5);}	
+	100% {transform: scale(1) translateX(0px);}
+}
+
+@keyframes strain-size-right {
+	0% {transform: scale(1) translateX(0px);}	
+	25% {transform: scale(1.5);}	
+	50% {transform: scale(1) translateX(-155px);}	
+	75% {transform: scale(.5);}	
+	100% {transform: scale(1) translateX(0px);}
+}
@@ -0,0 +1,15 @@
+# ⚪ Dots Pulsating Loader
+
+Лаконичный и легкий индикатор загрузки из трех пульсирующих точек. Реализован на чистом CSS с использованием переменных для быстрой настройки.
+
+### Особенности
+
+- **Pure CSS**: Работает без JavaScript, используя стандартные `@keyframes`.
+- **CSS Variables**: Цвет фона, цвет точек и их размер легко меняются через `:root` (переменные `--main-color`, `--point-color`, `--size`).
+- **Smooth Animation**: Эффект «волны» достигается за счет последовательной задержки (`animation-delay`) для каждой точки.
+
+### Технические детали
+
+- **Scale Effect**: Анимация плавно увеличивает размер точек в 2 раза (`transform: scale(2)`).
+- **Flexbox Layout**: Идеальное центрирование по вертикали и горизонтали на весь экран.
+- **Fixed Position**: Лоадер перекрывает весь контент за счет `position: fixed` и высокого `z-index`.
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Dots Pulsating Loader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="loader">
+  <span class="loader__element"></span>
+  <span class="loader__element"></span>
+  <span class="loader__element"></span>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
@@ -0,0 +1,40 @@
+:root {
+  --main-color: #ecf0f1;
+  --point-color: #555;
+  --size: 5px;
+}
+
+.loader {
+	background-color: var(--main-color);
+	overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0; left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center; 
+  justify-content: center;  
+	z-index: 100000;
+}
+
+.loader__element {
+  border-radius: 100%;
+  border: var(--size) solid var(--point-color);
+  margin: calc(var(--size)*2);
+}
+
+.loader__element:nth-child(1) {
+  animation: preloader .6s ease-in-out alternate infinite;
+}
+.loader__element:nth-child(2) {
+  animation: preloader .6s ease-in-out alternate .2s infinite;
+}
+
+.loader__element:nth-child(3) {
+  animation: preloader .6s ease-in-out alternate .4s infinite;
+}
+
+@keyframes preloader {
+  100% { transform: scale(2); }
+}
@@ -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;
+}