init: коллекция анимаций

— Добавлен Rolling Letters Loader (текстовый барабан) — Добавлен Helix DNA Loader (3D спираль) — Добавлен Lightsaber Fight Loader (сражение на мечах) — Добавлен Pancake Cooking Loader (подбрасывание блинчика) — Добавлен Pong Game Loader (ретро-игра) — Создан общий README.md с навигационной таблицей
2026-04-04 21:40:15 +03:00
commit 29324fca97
19 changed files with 2202 additions and 0 deletions
@@ -0,0 +1,14 @@
+# 🎰 Rolling Letters Loader
+
+Креативный текстовый индикатор загрузки с эффектом «барабана». Буквы слова **LOADING** поочередно вылетают и прокручиваются по вертикали, создавая эффект динамичного каскада.
+
+### Особенности
+
+- **Pure CSS**: Вся магия анимации реализована через `@keyframes` и трансформации.
+- **Zero JS**: Решение работает без использования JavaScript и сторонних библиотек.
+- **Staggered Animation**: Эффект «волны» достигается за счет последовательной задержки (`animation-delay`) для каждого символа.
+
+### Технологии
+
+- **HTML5**: Семантическая разметка с использованием `<span>` для каждой буквы.
+- **CSS3**: Использование `rotateX` для 3D-вращения и `top` для перемещения по вертикали.
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Rolling Letters Loader</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>
+    <span class="let1">l</span>  
+    <span class="let2">o</span>  
+    <span class="let3">a</span>  
+    <span class="let4">d</span>  
+    <span class="let5">i</span>  
+    <span class="let6">n</span>  
+    <span class="let7">g</span>  
+  </h1>
+<!-- partial -->
+  
+</body>
+</html>
@@ -0,0 +1,86 @@
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  background: #191a1a;
+  text-align: center;
+}
+
+h1 {
+  margin: 0;
+  padding: 0;
+  font-family: ‘Arial Narrow’, sans-serif;
+  font-weight: 100;
+  font-size: 1.1em;
+  color: #a3e1f0;
+}
+
+span {
+  position: relative;
+  top: 0.63em;  
+  display: inline-block;
+  text-transform: uppercase;  
+  opacity: 0;
+  transform: rotateX(-90deg);
+}
+
+.let1 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.2s;
+}
+
+.let2 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.3s;
+}
+
+.let3 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.4s;
+}
+
+.let4 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.5s;
+
+}
+
+.let5 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.6s;
+}
+
+.let6 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.7s;
+}
+
+.let7 {
+  animation: drop 1.2s ease-in-out infinite;
+  animation-delay: 1.8s;
+}
+
+@keyframes drop {
+    10% {
+        opacity: 0.5;
+    }
+    20% {
+        opacity: 1;
+        top: 3.78em;
+        transform: rotateX(-360deg);
+    }
+    80% {
+        opacity: 1;
+        top: 3.78em;
+        transform: rotateX(-360deg);
+    }
+    90% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+        top: 6.94em
+    }
+}