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 @@
+# 🎾 Pong Pure Loader
+
+Минималистичный индикатор загрузки, воссоздающий геймплей легендарной игры Pong. Реализовано полностью на чистом CSS.
+
+### Особенности
+
+- **Retro Gaming Vibe**: Классическая механика взаимодействия двух ракеток и мяча.
+- **Perfect Timing**: Движения обеих ракеток (`player_one`, `player_two`) идеально синхронизированы с траекторией полета мяча.
+- **Extreme Lightness**: Код занимает всего несколько десятков строк и не требует никаких внешних ресурсов или JS.
+
+### Технические детали
+
+- **Ball Animation**: Мяч движется по сложной траектории с использованием `linear` тайминга для имитации постоянной скорости.
+- **Paddles**: Ракетки перемещаются только по оси Y (`translateY`), имитируя логику игры.
+- **Layout**: Использование `position: absolute` и `transform: translate(-50%, -50%)` для идеального центрирования на экране.
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Pong Pure CSS Loader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body>
+<div class="content">
+  <div class="player_one"></div>
+  <div class="player_two"></div>
+  <div class="ball"></div>
+</div>
+</body>
+
+</body>
+</html>
@@ -0,0 +1,80 @@
+body {
+  background: #56c8d8;
+}
+
+.content {
+  position: absolute;
+  top: 45%;
+  left: 57.5%;
+  transform: translate(-50%, -50%);
+  display: block;
+}
+
+.paddle, .player_two, .player_one {
+  height: 40px;
+  width: 3px;
+  background-color: white;
+  position: relative;
+}
+
+.player_one {
+  left: -180px;
+  animation: movePaddleOne 4s infinite;
+}
+
+.player_two {
+  left: 20px;
+  animation: movePaddleTwo 4s infinite;
+}
+
+.ball {
+  position: relative;
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  background-color: white;
+  animation: moveBall 4s infinite linear;
+}
+
+@keyframes movePaddleOne {
+  0%, 100% {
+    transform: translate(0px, 100px);
+  }
+  25% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(0px, 0px);
+  }
+  75% {
+    transform: translate(0px, 100px);
+  }
+}
+@keyframes movePaddleTwo {
+  0%, 100% {
+    transform: translate(0px, -50px);
+  }
+  25% {
+    transform: translate(0px, 10px);
+  }
+  50% {
+    transform: translate(0px, 0px);
+  }
+  75% {
+    transform: translate(0px, 50px);
+  }
+}
+@keyframes moveBall {
+  0%, 100% {
+    transform: translate(-180px, 30px);
+  }
+  25% {
+    transform: translate(18px, -25px);
+  }
+  50% {
+    transform: translate(-180px, -55px);
+  }
+  75% {
+    transform: translate(18px, 15px);
+  }
+}
@@ -0,0 +1,84 @@
+body {
+  background: #56c8d8; 
+}
+
+.content {
+  position: absolute;
+  top: 45%;
+  left: 57.5%;
+  transform: translate(-50%, -50%);
+  display: block;
+}
+
+.paddle{
+  height:40px;
+  width:3px;
+  background-color:white;
+  position:relative;
+}
+
+.player_one{
+  @extend .paddle;
+  left:-180px;
+  animation: movePaddleOne 4s infinite;
+}
+
+.player_two{
+  @extend .paddle;
+  left:20px;
+  animation: movePaddleTwo 4s infinite;
+}
+
+.ball{
+  position:relative;
+  height:5px;
+  width:5px;
+  border-radius:50%;
+  background-color:white;
+  animation: moveBall 4s infinite linear;
+}
+
+@keyframes movePaddleOne{
+  0%, 100%{
+    transform:translate(0px, 100px);
+  }
+  25%{
+    transform:translate(0px, 0px);
+  }
+  50%{
+    transform:translate(0px, 0px);
+  }
+  75%{
+    transform:translate(0px, 100px);
+  }
+}
+
+@keyframes movePaddleTwo{
+  0%, 100%{
+     transform:translate(0px,-50px);
+  }
+  25%{
+       transform:translate(0px,10px); 
+  }
+  50%{
+        transform:translate(0px,0px);
+  }
+  75%{
+        transform:translate(0px,50px);
+  } 
+}
+
+@keyframes moveBall{
+   0%, 100%{
+    transform:translate(-180px, 30px);
+  }
+  25%{
+      transform:translate(18px, -25px);
+  }
+ 50%{
+     transform:translate(-180px, -55px);
+  }
+  75%{
+    transform:translate(18px, 15px);
+  }
+}