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,15 @@
+# 🧬 Helix CSS Loader
+
+Сложный анимированный лоадер, имитирующий вращение двойной спирали (DNA Helix). Построен на чистом CSS с использованием 26 анимированных элементов.
+
+### Особенности
+
+- **3D Illusion**: Эффект объема достигается за счет синхронизации перемещения (`translate3d`), изменения масштаба (`scale`) и управления слоями (`z-index`).
+- **Smooth Gradient**: Фон с использованием `linear-gradient` подчеркивает глубину анимации.
+- **Pure CSS**: Не требует JavaScript, вся логика завязана на задержках (`animation-delay`) для каждого отдельного "узла" спирали.
+
+### Технические детали
+
+- **Movement**: Ключевой кадр `@keyframes movement` отвечает за вертикальное перемещение.
+- **Size/Opacity**: `@keyframes size-opacity` создает эффект приближения и удаления точек, меняя их размер и прозрачность.
+- **Dual Color**: Четные и нечетные элементы имеют разные цвета (белый и ярко-розовый) для визуального разделения двух нитей спирали.
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Helix CSS Loader</title>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="loader">
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+  <div class="dot"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
@@ -0,0 +1,355 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  align-items: center;
+  background: #d65b9e;
+  background: linear-gradient(45deg, #d65b9e 1%, #f699cb 22%, #ffacd9 51%, #f699cb 83%, #d65b9e 100%);
+  display: flex;
+  justify-content: center;
+}
+
+.loader {
+  position: relative;
+}
+.loader .dot {
+  -webkit-animation-name: movement;
+          animation-name: movement;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+  height: 10px;
+  position: absolute;
+  top: -10px;
+  transform: translate3d(0, -25px, 0) scale(1);
+  width: 10px;
+}
+.loader .dot:nth-of-type(1) {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+  left: 150px;
+}
+.loader .dot:nth-of-type(1)::before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+.loader .dot:nth-of-type(2) {
+  -webkit-animation-delay: -1.2s;
+          animation-delay: -1.2s;
+  left: 150px;
+}
+.loader .dot:nth-of-type(2)::before {
+  -webkit-animation-delay: -1.2s;
+          animation-delay: -1.2s;
+}
+.loader .dot:nth-of-type(3) {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+  left: 125px;
+}
+.loader .dot:nth-of-type(3)::before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.loader .dot:nth-of-type(4) {
+  -webkit-animation-delay: -1.4s;
+          animation-delay: -1.4s;
+  left: 125px;
+}
+.loader .dot:nth-of-type(4)::before {
+  -webkit-animation-delay: -1.4s;
+          animation-delay: -1.4s;
+}
+.loader .dot:nth-of-type(5) {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+  left: 100px;
+}
+.loader .dot:nth-of-type(5)::before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.loader .dot:nth-of-type(6) {
+  -webkit-animation-delay: -1.6s;
+          animation-delay: -1.6s;
+  left: 100px;
+}
+.loader .dot:nth-of-type(6)::before {
+  -webkit-animation-delay: -1.6s;
+          animation-delay: -1.6s;
+}
+.loader .dot:nth-of-type(7) {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s;
+  left: 75px;
+}
+.loader .dot:nth-of-type(7)::before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s;
+}
+.loader .dot:nth-of-type(8) {
+  -webkit-animation-delay: -1.8s;
+          animation-delay: -1.8s;
+  left: 75px;
+}
+.loader .dot:nth-of-type(8)::before {
+  -webkit-animation-delay: -1.8s;
+          animation-delay: -1.8s;
+}
+.loader .dot:nth-of-type(9) {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s;
+  left: 50px;
+}
+.loader .dot:nth-of-type(9)::before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s;
+}
+.loader .dot:nth-of-type(10) {
+  -webkit-animation-delay: -2s;
+          animation-delay: -2s;
+  left: 50px;
+}
+.loader .dot:nth-of-type(10)::before {
+  -webkit-animation-delay: -2s;
+          animation-delay: -2s;
+}
+.loader .dot:nth-of-type(11) {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s;
+  left: 25px;
+}
+.loader .dot:nth-of-type(11)::before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s;
+}
+.loader .dot:nth-of-type(12) {
+  -webkit-animation-delay: -2.2s;
+          animation-delay: -2.2s;
+  left: 25px;
+}
+.loader .dot:nth-of-type(12)::before {
+  -webkit-animation-delay: -2.2s;
+          animation-delay: -2.2s;
+}
+.loader .dot:nth-of-type(13) {
+  -webkit-animation-delay: -1.3s;
+          animation-delay: -1.3s;
+  left: 0px;
+}
+.loader .dot:nth-of-type(13)::before {
+  -webkit-animation-delay: -1.3s;
+          animation-delay: -1.3s;
+}
+.loader .dot:nth-of-type(14) {
+  -webkit-animation-delay: -2.4s;
+          animation-delay: -2.4s;
+  left: 0px;
+}
+.loader .dot:nth-of-type(14)::before {
+  -webkit-animation-delay: -2.4s;
+          animation-delay: -2.4s;
+}
+.loader .dot:nth-of-type(15) {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+  left: -25px;
+}
+.loader .dot:nth-of-type(15)::before {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+.loader .dot:nth-of-type(16) {
+  -webkit-animation-delay: -2.6s;
+          animation-delay: -2.6s;
+  left: -25px;
+}
+.loader .dot:nth-of-type(16)::before {
+  -webkit-animation-delay: -2.6s;
+          animation-delay: -2.6s;
+}
+.loader .dot:nth-of-type(17) {
+  -webkit-animation-delay: -1.7s;
+          animation-delay: -1.7s;
+  left: -50px;
+}
+.loader .dot:nth-of-type(17)::before {
+  -webkit-animation-delay: -1.7s;
+          animation-delay: -1.7s;
+}
+.loader .dot:nth-of-type(18) {
+  -webkit-animation-delay: -2.8s;
+          animation-delay: -2.8s;
+  left: -50px;
+}
+.loader .dot:nth-of-type(18)::before {
+  -webkit-animation-delay: -2.8s;
+          animation-delay: -2.8s;
+}
+.loader .dot:nth-of-type(19) {
+  -webkit-animation-delay: -1.9s;
+          animation-delay: -1.9s;
+  left: -75px;
+}
+.loader .dot:nth-of-type(19)::before {
+  -webkit-animation-delay: -1.9s;
+          animation-delay: -1.9s;
+}
+.loader .dot:nth-of-type(20) {
+  -webkit-animation-delay: -3s;
+          animation-delay: -3s;
+  left: -75px;
+}
+.loader .dot:nth-of-type(20)::before {
+  -webkit-animation-delay: -3s;
+          animation-delay: -3s;
+}
+.loader .dot:nth-of-type(21) {
+  -webkit-animation-delay: -2.1s;
+          animation-delay: -2.1s;
+  left: -100px;
+}
+.loader .dot:nth-of-type(21)::before {
+  -webkit-animation-delay: -2.1s;
+          animation-delay: -2.1s;
+}
+.loader .dot:nth-of-type(22) {
+  -webkit-animation-delay: -3.2s;
+          animation-delay: -3.2s;
+  left: -100px;
+}
+.loader .dot:nth-of-type(22)::before {
+  -webkit-animation-delay: -3.2s;
+          animation-delay: -3.2s;
+}
+.loader .dot:nth-of-type(23) {
+  -webkit-animation-delay: -2.3s;
+          animation-delay: -2.3s;
+  left: -125px;
+}
+.loader .dot:nth-of-type(23)::before {
+  -webkit-animation-delay: -2.3s;
+          animation-delay: -2.3s;
+}
+.loader .dot:nth-of-type(24) {
+  -webkit-animation-delay: -3.4s;
+          animation-delay: -3.4s;
+  left: -125px;
+}
+.loader .dot:nth-of-type(24)::before {
+  -webkit-animation-delay: -3.4s;
+          animation-delay: -3.4s;
+}
+.loader .dot:nth-of-type(25) {
+  -webkit-animation-delay: -2.5s;
+          animation-delay: -2.5s;
+  left: -150px;
+}
+.loader .dot:nth-of-type(25)::before {
+  -webkit-animation-delay: -2.5s;
+          animation-delay: -2.5s;
+}
+.loader .dot:nth-of-type(26) {
+  -webkit-animation-delay: -3.6s;
+          animation-delay: -3.6s;
+  left: -150px;
+}
+.loader .dot:nth-of-type(26)::before {
+  -webkit-animation-delay: -3.6s;
+          animation-delay: -3.6s;
+}
+.loader .dot::before {
+  -webkit-animation-name: size-opacity;
+          animation-name: size-opacity;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
+  background: white;
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.loader .dot:nth-of-type(even)::before {
+  background-color: #ff47aa;
+  box-shadow: inset 0 0 4px #ff1492;
+}
+
+@-webkit-keyframes movement {
+  0% {
+    transform: translate3d(0, -25px, 0);
+    z-index: 0;
+  }
+  50% {
+    transform: translate3d(0, 25px, 0);
+    z-index: 10;
+  }
+  100% {
+    transform: translate3d(0, -25px, 0);
+    z-index: -5;
+  }
+}
+
+@keyframes movement {
+  0% {
+    transform: translate3d(0, -25px, 0);
+    z-index: 0;
+  }
+  50% {
+    transform: translate3d(0, 25px, 0);
+    z-index: 10;
+  }
+  100% {
+    transform: translate3d(0, -25px, 0);
+    z-index: -5;
+  }
+}
+@-webkit-keyframes size-opacity {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.5);
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.35;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes size-opacity {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.5);
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.35;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
@@ -0,0 +1,109 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  align-items: center;
+  background: #d65b9e;
+  background: linear-gradient(45deg, #d65b9e 1%,#f699cb 22%,#ffacd9 51%,#f699cb 83%,#d65b9e 100%);
+  display: flex;
+  justify-content: center;
+}
+
+$dot-count: 26;
+$dot-size: 10px;
+$dot-space: 15px;
+$dot-start: (($dot-count / 2 + 1) * ($dot-size + $dot-space)) / 2;
+
+$animation-time: 2s;
+$animation-distance: 25px;
+
+.loader {
+  position: relative;
+
+  .dot {
+    animation-name: movement;
+    animation-duration: $animation-time;
+    animation-iteration-count: infinite; 
+    animation-timing-function: ease-in-out;
+    height: $dot-size;
+    position: absolute;
+    top: -#{$dot-size};
+    transform: translate3d(0, -#{$animation-distance}, 0) scale(1);
+    width: $dot-size;
+ 
+    @for $i from 1 through $dot-count {
+      $dot-move: ceil($i / 2);
+      $dot-pos: $dot-start - (($dot-size + $dot-space) * $dot-move);
+      
+      $animation-delay: -#{$i * .1}s;
+      @if $i % 2 == 0 {
+        $animation-delay: -#{($i * .1) + ($animation-time / 2)};
+      }
+      
+      &:nth-of-type(#{$i}) {
+        animation-delay: $animation-delay; 
+        left: $dot-pos;
+        
+        &::before {
+          animation-delay: $animation-delay; 
+        }
+      }
+    }
+
+    &::before {
+      animation-name: size-opacity;
+      animation-duration: $animation-time;
+      animation-iteration-count: infinite; 
+      animation-timing-function: ease;
+      background: white;
+      border-radius: 50%;
+      content: '';
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    
+    &:nth-of-type(even)::before {
+      background-color: #ff47aa;
+      box-shadow: inset 0 0 4px darken(#ff47aa, 10%);
+    }
+  }
+}
+
+@keyframes movement {
+  0% {
+    transform: translate3d(0, -#{$animation-distance}, 0);
+    z-index: 0;
+  }
+  50% {
+    transform: translate3d(0, #{$animation-distance}, 0);
+    z-index: 10;
+  }
+  100% {
+    transform: translate3d(0, -#{$animation-distance}, 0);
+    z-index: -5;
+  }
+}
+
+@keyframes size-opacity {
+  0% { 
+    opacity: 1;
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.5);
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: .35;
+    transform: scale(.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}