init: репозиторий backgrounds

— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
2026-04-04 22:17:14 +03:00
commit 4bbe7f68da
21 changed files with 3287 additions and 0 deletions
@@ -0,0 +1,15 @@
+# ✨ CSS Fireflies Background
+
+Элегантный и спокойный фон с анимированными светлячками. Полностью реализован на чистом HTML/CSS, создавая глубокую атмосферу за счет хаотичного движения и мягкого мерцания.
+
+### Особенности
+
+- **Natural Motion**: Каждый светлячок движется по уникальной траектории, заданной через сложные `@keyframes` (move1, move2 и т.д.).
+- **Double Animation**: Элементы используют комбинацию зацикленного движения (`drift`) и мерцания (`flash`).
+- **Zero JS**: Анимация не требует скриптов и работает плавно благодаря аппаратной поддержке трансформаций.
+
+### Технические детали
+
+- **Particles**: Светлячки созданы с использованием псевдоэлементов `::before` (тень/тело) и `::after` (свечение).
+- **Glow**: Эффект свечения реализован через `box-shadow: yellow` с анимацией прозрачности.
+- **Randomization**: Разнообразие достигается за счет использования `nth-child` с разными задержками и длительностью анимации.
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Fireflies</title>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- Quantity should be the same in Sass-->
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
@@ -0,0 +1,75 @@
+// Quantity should be the same in PUG
+$quantity: 15
+
+html, body
+  height: 100%
+
+body
+  background: url(https://i.pinimg.com/originals/44/6e/3b/446e3b79395a287ca32f7977dd83b290.jpg)
+  background-size: cover
+    
+.firefly
+  position: fixed
+  left: 50%
+  top: 50%
+  width: 0.4vw
+  height: 0.4vw
+  margin: -0.2vw 0 0 9.8vw
+  animation: ease 200s alternate infinite
+  pointer-events: none
+
+  &::before,
+  &::after
+    content: ''
+    position: absolute
+    width: 100%
+    height: 100%
+    border-radius: 50%
+    transform-origin: -10vw
+  
+  &::before
+    background: black
+    opacity: 0.4
+    animation: drift ease alternate infinite
+  
+  &::after
+    background: white
+    opacity: 0
+    box-shadow: 0 0 0vw 0vw yellow
+    animation: drift ease alternate infinite, flash ease infinite
+
+  
+// Randomize Fireflies Motion
+@for $i from 1 through $quantity
+  
+  $steps: random(12) + 16
+  $rotationSpeed: random(10) + 8s
+  
+  .firefly:nth-child(#{$i})
+    animation-name: move#{$i}
+
+    &::before
+      animation-duration: #{$rotationSpeed}
+
+    &::after
+      animation-duration: #{$rotationSpeed}, random(6000) + 5000ms
+      animation-delay: 0ms, random(8000) + 500ms
+
+  @keyframes move#{$i}
+    @for $step from 0 through $steps
+      #{$step * (100 / $steps)}%
+        transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(random(75) / 100 + .25)
+
+@keyframes drift
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)
+
+@keyframes flash
+  0%, 30%, 100%
+    opacity: 0
+    box-shadow: 0 0 0vw 0vw yellow
+  5%
+    opacity: 1
+    box-shadow: 0 0 2vw 0.4vw yellow