commit 4bbe7f68dad0337eb5e21cd82b7a3ac63d98635f Author: Powermacintosh Date: Sat Apr 4 22:17:14 2026 +0300 init: репозиторий backgrounds — Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением) diff --git a/README.md b/README.md new file mode 100644 index 0000000..b504030 --- /dev/null +++ b/README.md @@ -0,0 +1,20 @@ +# 🌌 Animated Web Backgrounds + +Коллекция эффектных и легких фонов для веб-проектов. +Почти все решения реализованы на **Pure CSS**, что обеспечивает высокую производительность без использования JavaScript (за исключением интерактивных элементов в Steps Animation). + +## Каталог фонов + +| Превью | Компонент (Путь к папке) | Стиль | Технология | +| :----- | :------------------------------------------------ | :-------- | :-------------------------- | +| 🧊 | **[animated-cubes](./animated-cubes/)** | Геометрия | CSS Keyframes & Scale | +| 🪐 | **[solar-system-orrery](./solar-system-orrery/)** | Космос | CSS Orbital Motion | +| 🌌 | **[parallax-star](./parallax-star/)** | Космос | CSS Box-Shadow Parallax | +| ✨ | **[fireflies](./fireflies/)** | Энергия | CSS Keyframes & Glow | +| 🏃 | **[steps-sprite](./steps-animation/)** | Спрайт | CSS Steps & **JS (jQuery)** | + +## Технологии + +- **HTML5** (Минималистичная разметка) +- **CSS3** (Animations, Transforms, Custom Properties) +- **JavaScript / jQuery** (Только для управления в Steps Animation) diff --git a/animated-cubes/README.md b/animated-cubes/README.md new file mode 100755 index 0000000..d6f620e --- /dev/null +++ b/animated-cubes/README.md @@ -0,0 +1,15 @@ +# 🧊 Animated Cubes Background + +Геометрический анимированный фон с разлетающимися и вращающимися кубами. Создает эффект глубины и динамики для лендингов или героических (Hero) секций. + +### Особенности + +- **3D Motion**: Использование `scale` и `rotate` в одном ключевом кадре создает иллюзию полета кубов из центра. +- **Pure CSS**: Анимация работает без JavaScript, что минимизирует нагрузку на браузер. +- **Staggered Effect**: Разное время появления кубов реализовано через `animation-delay`. + +### Технические детали + +- **Animation**: Основной цикл `cube` длится 12 секунд с плавным затуханием (`opacity: 0`). +- **Positions**: Кубы распределены по экрану с помощью `vw` (ширина) и `vh` (высота). +- **Typography**: Используется шрифт **Montserrat**, импортируемый из Google Fonts. diff --git a/animated-cubes/src/index.html b/animated-cubes/src/index.html new file mode 100755 index 0000000..a5b2248 --- /dev/null +++ b/animated-cubes/src/index.html @@ -0,0 +1,24 @@ + + + + + Animated Cubes Background + + + + + + +
+
Hello World
+
+
+
+
+
+
+
+ + + + diff --git a/animated-cubes/src/style.css b/animated-cubes/src/style.css new file mode 100755 index 0000000..df5ee72 --- /dev/null +++ b/animated-cubes/src/style.css @@ -0,0 +1,94 @@ +@import url("https://fonts.googleapis.com/css?family=Montserrat:700"); +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +.hero { + background-color: #0040c1; + position: relative; + height: 100vh; + overflow: hidden; + font-family: "Montserrat", sans-serif; +} + +.hero__title { + color: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 50px; + z-index: 1; +} + +.cube { + position: absolute; + top: 80vh; + left: 45vw; + width: 10px; + height: 10px; + border: solid 1px #003298; + transform-origin: top left; + transform: scale(0) rotate(0deg) translate(-50%, -50%); + -webkit-animation: cube 12s ease-in forwards infinite; + animation: cube 12s ease-in forwards infinite; +} +.cube:nth-child(2n) { + border-color: #0051f4; +} +.cube:nth-child(2) { + -webkit-animation-delay: 2s; + animation-delay: 2s; + left: 25vw; + top: 40vh; +} +.cube:nth-child(3) { + -webkit-animation-delay: 4s; + animation-delay: 4s; + left: 75vw; + top: 50vh; +} +.cube:nth-child(4) { + -webkit-animation-delay: 6s; + animation-delay: 6s; + left: 90vw; + top: 10vh; +} +.cube:nth-child(5) { + -webkit-animation-delay: 8s; + animation-delay: 8s; + left: 10vw; + top: 85vh; +} +.cube:nth-child(6) { + -webkit-animation-delay: 10s; + animation-delay: 10s; + left: 50vw; + top: 10vh; +} + +@-webkit-keyframes cube { + from { + transform: scale(0) rotate(0deg) translate(-50%, -50%); + opacity: 1; + } + to { + transform: scale(20) rotate(960deg) translate(-50%, -50%); + opacity: 0; + } +} + +@keyframes cube { + from { + transform: scale(0) rotate(0deg) translate(-50%, -50%); + opacity: 1; + } + to { + transform: scale(20) rotate(960deg) translate(-50%, -50%); + opacity: 0; + } +} diff --git a/animated-cubes/src/style.scss b/animated-cubes/src/style.scss new file mode 100755 index 0000000..a270508 --- /dev/null +++ b/animated-cubes/src/style.scss @@ -0,0 +1,76 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:700'); + +.hero { + background-color: #0040C1; + position: relative; + height: 100vh; + overflow: hidden; + font-family: 'Montserrat', sans-serif; +} + +.hero__title { + color: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 50px; + z-index: 1; +} + +.cube { + position: absolute; + top: 80vh; + left: 45vw; + width: 10px; + height: 10px; + border: solid 1px darken(#0040C1, 8%); + transform-origin: top left; + transform: scale(0) rotate(0deg) translate(-50%, -50%); + animation: cube 12s ease-in forwards infinite; + + &:nth-child(2n) { + border-color: lighten(#0040C1, 10%); + } + + &:nth-child(2) { + animation-delay: 2s; + left: 25vw; + top: 40vh; + } + + &:nth-child(3) { + animation-delay: 4s; + left: 75vw; + top: 50vh; + } + + &:nth-child(4) { + animation-delay: 6s; + left: 90vw; + top: 10vh; + } + + &:nth-child(5) { + animation-delay: 8s; + left: 10vw; + top: 85vh; + } + + &:nth-child(6) { + animation-delay: 10s; + left: 50vw; + top: 10vh; + } +} + +@keyframes cube { + from { + transform: scale(0) rotate(0deg) translate(-50%, -50%); + opacity: 1; + } + to { + transform: scale(20) rotate(960deg) translate(-50%, -50%); + opacity: 0; + } +} \ No newline at end of file diff --git a/fireflies/README.md b/fireflies/README.md new file mode 100755 index 0000000..0d5bf68 --- /dev/null +++ b/fireflies/README.md @@ -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` с разными задержками и длительностью анимации. diff --git a/fireflies/src/index.html b/fireflies/src/index.html new file mode 100755 index 0000000..8271e08 --- /dev/null +++ b/fireflies/src/index.html @@ -0,0 +1,31 @@ + + + + + CSS Fireflies + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + diff --git a/fireflies/src/style.css b/fireflies/src/style.css new file mode 100755 index 0000000..4fed29f --- /dev/null +++ b/fireflies/src/style.css @@ -0,0 +1,1302 @@ +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; +} +.firefly::before, .firefly::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + transform-origin: -10vw; +} +.firefly::before { + background: black; + opacity: 0.4; + animation: drift ease alternate infinite; +} +.firefly::after { + background: white; + opacity: 0; + box-shadow: 0 0 0vw 0vw yellow; + animation: drift ease alternate infinite, flash ease infinite; +} + +.firefly:nth-child(1) { + animation-name: move1; +} +.firefly:nth-child(1)::before { + animation-duration: 18s; +} +.firefly:nth-child(1)::after { + animation-duration: 18s, 10542ms; + animation-delay: 0ms, 8403ms; +} + +@keyframes move1 { + 0% { + transform: translateX(30vw) translateY(-44vh) scale(0.39); + } + 4.1666666667% { + transform: translateX(-24vw) translateY(-12vh) scale(1); + } + 8.3333333333% { + transform: translateX(-12vw) translateY(-42vh) scale(0.62); + } + 12.5% { + transform: translateX(-7vw) translateY(-2vh) scale(0.58); + } + 16.6666666667% { + transform: translateX(-28vw) translateY(19vh) scale(0.59); + } + 20.8333333333% { + transform: translateX(-21vw) translateY(-10vh) scale(0.59); + } + 25% { + transform: translateX(-44vw) translateY(-22vh) scale(0.7); + } + 29.1666666667% { + transform: translateX(-42vw) translateY(50vh) scale(0.72); + } + 33.3333333333% { + transform: translateX(50vw) translateY(4vh) scale(0.49); + } + 37.5% { + transform: translateX(41vw) translateY(47vh) scale(0.43); + } + 41.6666666667% { + transform: translateX(34vw) translateY(28vh) scale(0.29); + } + 45.8333333333% { + transform: translateX(7vw) translateY(-35vh) scale(0.98); + } + 50% { + transform: translateX(-33vw) translateY(35vh) scale(0.89); + } + 54.1666666667% { + transform: translateX(-7vw) translateY(10vh) scale(0.31); + } + 58.3333333333% { + transform: translateX(-49vw) translateY(43vh) scale(0.26); + } + 62.5% { + transform: translateX(-43vw) translateY(13vh) scale(0.75); + } + 66.6666666667% { + transform: translateX(39vw) translateY(24vh) scale(0.5); + } + 70.8333333333% { + transform: translateX(-26vw) translateY(-6vh) scale(0.43); + } + 75% { + transform: translateX(-43vw) translateY(-40vh) scale(0.75); + } + 79.1666666667% { + transform: translateX(-22vw) translateY(8vh) scale(0.94); + } + 83.3333333333% { + transform: translateX(-41vw) translateY(-49vh) scale(0.49); + } + 87.5% { + transform: translateX(48vw) translateY(33vh) scale(0.66); + } + 91.6666666667% { + transform: translateX(47vw) translateY(-3vh) scale(0.38); + } + 95.8333333333% { + transform: translateX(21vw) translateY(-20vh) scale(0.52); + } + 100% { + transform: translateX(-41vw) translateY(-27vh) scale(0.53); + } +} +.firefly:nth-child(2) { + animation-name: move2; +} +.firefly:nth-child(2)::before { + animation-duration: 14s; +} +.firefly:nth-child(2)::after { + animation-duration: 14s, 8734ms; + animation-delay: 0ms, 5295ms; +} + +@keyframes move2 { + 0% { + transform: translateX(-11vw) translateY(-14vh) scale(0.83); + } + 5.8823529412% { + transform: translateX(-38vw) translateY(12vh) scale(0.77); + } + 11.7647058824% { + transform: translateX(-44vw) translateY(19vh) scale(0.51); + } + 17.6470588235% { + transform: translateX(-15vw) translateY(-12vh) scale(0.96); + } + 23.5294117647% { + transform: translateX(-19vw) translateY(-19vh) scale(0.29); + } + 29.4117647059% { + transform: translateX(-13vw) translateY(5vh) scale(0.67); + } + 35.2941176471% { + transform: translateX(-30vw) translateY(-41vh) scale(1); + } + 41.1764705882% { + transform: translateX(-4vw) translateY(41vh) scale(0.62); + } + 47.0588235294% { + transform: translateX(19vw) translateY(10vh) scale(0.56); + } + 52.9411764706% { + transform: translateX(-2vw) translateY(31vh) scale(0.57); + } + 58.8235294118% { + transform: translateX(-17vw) translateY(-26vh) scale(0.36); + } + 64.7058823529% { + transform: translateX(-42vw) translateY(13vh) scale(0.26); + } + 70.5882352941% { + transform: translateX(25vw) translateY(-44vh) scale(0.81); + } + 76.4705882353% { + transform: translateX(43vw) translateY(43vh) scale(0.71); + } + 82.3529411765% { + transform: translateX(47vw) translateY(-18vh) scale(0.9); + } + 88.2352941176% { + transform: translateX(-40vw) translateY(5vh) scale(0.71); + } + 94.1176470588% { + transform: translateX(22vw) translateY(20vh) scale(0.84); + } + 100% { + transform: translateX(-12vw) translateY(0vh) scale(0.3); + } +} +.firefly:nth-child(3) { + animation-name: move3; +} +.firefly:nth-child(3)::before { + animation-duration: 18s; +} +.firefly:nth-child(3)::after { + animation-duration: 18s, 10893ms; + animation-delay: 0ms, 5327ms; +} + +@keyframes move3 { + 0% { + transform: translateX(-8vw) translateY(11vh) scale(0.34); + } + 5% { + transform: translateX(-32vw) translateY(-2vh) scale(0.63); + } + 10% { + transform: translateX(17vw) translateY(-28vh) scale(0.48); + } + 15% { + transform: translateX(18vw) translateY(-42vh) scale(0.95); + } + 20% { + transform: translateX(5vw) translateY(-32vh) scale(0.35); + } + 25% { + transform: translateX(50vw) translateY(40vh) scale(0.79); + } + 30% { + transform: translateX(38vw) translateY(-7vh) scale(0.48); + } + 35% { + transform: translateX(31vw) translateY(-35vh) scale(0.61); + } + 40% { + transform: translateX(49vw) translateY(-36vh) scale(0.64); + } + 45% { + transform: translateX(-41vw) translateY(26vh) scale(0.38); + } + 50% { + transform: translateX(-12vw) translateY(-16vh) scale(0.61); + } + 55% { + transform: translateX(-30vw) translateY(27vh) scale(0.41); + } + 60% { + transform: translateX(41vw) translateY(-42vh) scale(0.26); + } + 65% { + transform: translateX(5vw) translateY(-10vh) scale(0.85); + } + 70% { + transform: translateX(-28vw) translateY(16vh) scale(0.3); + } + 75% { + transform: translateX(-41vw) translateY(5vh) scale(0.98); + } + 80% { + transform: translateX(-20vw) translateY(-15vh) scale(0.68); + } + 85% { + transform: translateX(-15vw) translateY(5vh) scale(0.26); + } + 90% { + transform: translateX(24vw) translateY(-34vh) scale(0.83); + } + 95% { + transform: translateX(44vw) translateY(-5vh) scale(0.42); + } + 100% { + transform: translateX(-13vw) translateY(-17vh) scale(0.33); + } +} +.firefly:nth-child(4) { + animation-name: move4; +} +.firefly:nth-child(4)::before { + animation-duration: 13s; +} +.firefly:nth-child(4)::after { + animation-duration: 13s, 8651ms; + animation-delay: 0ms, 971ms; +} + +@keyframes move4 { + 0% { + transform: translateX(6vw) translateY(-42vh) scale(0.41); + } + 5.8823529412% { + transform: translateX(-36vw) translateY(13vh) scale(0.56); + } + 11.7647058824% { + transform: translateX(-38vw) translateY(-45vh) scale(0.56); + } + 17.6470588235% { + transform: translateX(-32vw) translateY(-30vh) scale(0.8); + } + 23.5294117647% { + transform: translateX(-29vw) translateY(25vh) scale(0.58); + } + 29.4117647059% { + transform: translateX(-43vw) translateY(-20vh) scale(0.59); + } + 35.2941176471% { + transform: translateX(-40vw) translateY(-26vh) scale(0.55); + } + 41.1764705882% { + transform: translateX(-21vw) translateY(20vh) scale(0.94); + } + 47.0588235294% { + transform: translateX(-10vw) translateY(-12vh) scale(0.75); + } + 52.9411764706% { + transform: translateX(26vw) translateY(-26vh) scale(0.41); + } + 58.8235294118% { + transform: translateX(7vw) translateY(8vh) scale(0.79); + } + 64.7058823529% { + transform: translateX(-6vw) translateY(32vh) scale(0.97); + } + 70.5882352941% { + transform: translateX(30vw) translateY(-6vh) scale(0.98); + } + 76.4705882353% { + transform: translateX(34vw) translateY(-24vh) scale(0.4); + } + 82.3529411765% { + transform: translateX(1vw) translateY(-47vh) scale(0.33); + } + 88.2352941176% { + transform: translateX(34vw) translateY(8vh) scale(0.5); + } + 94.1176470588% { + transform: translateX(30vw) translateY(-12vh) scale(0.69); + } + 100% { + transform: translateX(-36vw) translateY(33vh) scale(0.56); + } +} +.firefly:nth-child(5) { + animation-name: move5; +} +.firefly:nth-child(5)::before { + animation-duration: 18s; +} +.firefly:nth-child(5)::after { + animation-duration: 18s, 9042ms; + animation-delay: 0ms, 6757ms; +} + +@keyframes move5 { + 0% { + transform: translateX(36vw) translateY(13vh) scale(0.91); + } + 3.8461538462% { + transform: translateX(-49vw) translateY(-38vh) scale(0.69); + } + 7.6923076923% { + transform: translateX(-47vw) translateY(31vh) scale(0.48); + } + 11.5384615385% { + transform: translateX(-46vw) translateY(9vh) scale(0.28); + } + 15.3846153846% { + transform: translateX(-38vw) translateY(-39vh) scale(0.92); + } + 19.2307692308% { + transform: translateX(-38vw) translateY(-32vh) scale(0.92); + } + 23.0769230769% { + transform: translateX(34vw) translateY(-47vh) scale(0.26); + } + 26.9230769231% { + transform: translateX(4vw) translateY(42vh) scale(0.93); + } + 30.7692307692% { + transform: translateX(-45vw) translateY(19vh) scale(0.9); + } + 34.6153846154% { + transform: translateX(-49vw) translateY(-28vh) scale(0.55); + } + 38.4615384615% { + transform: translateX(-2vw) translateY(-45vh) scale(0.72); + } + 42.3076923077% { + transform: translateX(-27vw) translateY(-4vh) scale(0.44); + } + 46.1538461538% { + transform: translateX(-19vw) translateY(-1vh) scale(0.57); + } + 50% { + transform: translateX(-7vw) translateY(29vh) scale(0.4); + } + 53.8461538462% { + transform: translateX(-48vw) translateY(-41vh) scale(0.81); + } + 57.6923076923% { + transform: translateX(-40vw) translateY(-10vh) scale(0.65); + } + 61.5384615385% { + transform: translateX(23vw) translateY(23vh) scale(0.35); + } + 65.3846153846% { + transform: translateX(45vw) translateY(-10vh) scale(0.72); + } + 69.2307692308% { + transform: translateX(36vw) translateY(-48vh) scale(0.99); + } + 73.0769230769% { + transform: translateX(-22vw) translateY(-11vh) scale(0.27); + } + 76.9230769231% { + transform: translateX(15vw) translateY(30vh) scale(0.82); + } + 80.7692307692% { + transform: translateX(-5vw) translateY(12vh) scale(0.49); + } + 84.6153846154% { + transform: translateX(-45vw) translateY(29vh) scale(0.61); + } + 88.4615384615% { + transform: translateX(-32vw) translateY(3vh) scale(0.82); + } + 92.3076923077% { + transform: translateX(11vw) translateY(20vh) scale(0.54); + } + 96.1538461538% { + transform: translateX(-28vw) translateY(3vh) scale(0.91); + } + 100% { + transform: translateX(44vw) translateY(10vh) scale(0.33); + } +} +.firefly:nth-child(6) { + animation-name: move6; +} +.firefly:nth-child(6)::before { + animation-duration: 12s; +} +.firefly:nth-child(6)::after { + animation-duration: 12s, 6497ms; + animation-delay: 0ms, 7225ms; +} + +@keyframes move6 { + 0% { + transform: translateX(47vw) translateY(14vh) scale(0.92); + } + 4.1666666667% { + transform: translateX(-22vw) translateY(-10vh) scale(0.87); + } + 8.3333333333% { + transform: translateX(25vw) translateY(47vh) scale(0.61); + } + 12.5% { + transform: translateX(14vw) translateY(-21vh) scale(0.48); + } + 16.6666666667% { + transform: translateX(-42vw) translateY(38vh) scale(0.6); + } + 20.8333333333% { + transform: translateX(-20vw) translateY(-38vh) scale(0.34); + } + 25% { + transform: translateX(-7vw) translateY(-39vh) scale(0.86); + } + 29.1666666667% { + transform: translateX(-40vw) translateY(-11vh) scale(0.81); + } + 33.3333333333% { + transform: translateX(-47vw) translateY(5vh) scale(0.69); + } + 37.5% { + transform: translateX(42vw) translateY(50vh) scale(0.62); + } + 41.6666666667% { + transform: translateX(-1vw) translateY(41vh) scale(0.33); + } + 45.8333333333% { + transform: translateX(-22vw) translateY(48vh) scale(0.86); + } + 50% { + transform: translateX(48vw) translateY(-18vh) scale(0.57); + } + 54.1666666667% { + transform: translateX(-40vw) translateY(21vh) scale(0.86); + } + 58.3333333333% { + transform: translateX(38vw) translateY(33vh) scale(0.98); + } + 62.5% { + transform: translateX(35vw) translateY(28vh) scale(0.77); + } + 66.6666666667% { + transform: translateX(-12vw) translateY(17vh) scale(0.93); + } + 70.8333333333% { + transform: translateX(14vw) translateY(-4vh) scale(0.32); + } + 75% { + transform: translateX(-10vw) translateY(22vh) scale(0.67); + } + 79.1666666667% { + transform: translateX(-21vw) translateY(-23vh) scale(0.58); + } + 83.3333333333% { + transform: translateX(32vw) translateY(19vh) scale(0.38); + } + 87.5% { + transform: translateX(-5vw) translateY(-30vh) scale(0.92); + } + 91.6666666667% { + transform: translateX(-9vw) translateY(39vh) scale(0.98); + } + 95.8333333333% { + transform: translateX(37vw) translateY(-17vh) scale(0.81); + } + 100% { + transform: translateX(-26vw) translateY(-37vh) scale(0.43); + } +} +.firefly:nth-child(7) { + animation-name: move7; +} +.firefly:nth-child(7)::before { + animation-duration: 11s; +} +.firefly:nth-child(7)::after { + animation-duration: 11s, 6303ms; + animation-delay: 0ms, 8215ms; +} + +@keyframes move7 { + 0% { + transform: translateX(6vw) translateY(13vh) scale(0.33); + } + 3.7037037037% { + transform: translateX(-20vw) translateY(-40vh) scale(0.4); + } + 7.4074074074% { + transform: translateX(48vw) translateY(41vh) scale(0.6); + } + 11.1111111111% { + transform: translateX(49vw) translateY(-45vh) scale(0.81); + } + 14.8148148148% { + transform: translateX(37vw) translateY(-31vh) scale(0.63); + } + 18.5185185185% { + transform: translateX(28vw) translateY(1vh) scale(0.64); + } + 22.2222222222% { + transform: translateX(-9vw) translateY(-7vh) scale(0.26); + } + 25.9259259259% { + transform: translateX(-48vw) translateY(14vh) scale(0.46); + } + 29.6296296296% { + transform: translateX(38vw) translateY(-46vh) scale(0.31); + } + 33.3333333333% { + transform: translateX(-22vw) translateY(19vh) scale(0.55); + } + 37.037037037% { + transform: translateX(22vw) translateY(1vh) scale(0.49); + } + 40.7407407407% { + transform: translateX(42vw) translateY(-37vh) scale(0.87); + } + 44.4444444444% { + transform: translateX(-5vw) translateY(19vh) scale(0.43); + } + 48.1481481481% { + transform: translateX(15vw) translateY(-9vh) scale(0.3); + } + 51.8518518519% { + transform: translateX(47vw) translateY(22vh) scale(0.89); + } + 55.5555555556% { + transform: translateX(-16vw) translateY(37vh) scale(0.98); + } + 59.2592592593% { + transform: translateX(-38vw) translateY(-29vh) scale(0.79); + } + 62.962962963% { + transform: translateX(42vw) translateY(-35vh) scale(0.68); + } + 66.6666666667% { + transform: translateX(19vw) translateY(37vh) scale(0.77); + } + 70.3703703704% { + transform: translateX(-7vw) translateY(45vh) scale(0.31); + } + 74.0740740741% { + transform: translateX(43vw) translateY(-26vh) scale(0.95); + } + 77.7777777778% { + transform: translateX(-3vw) translateY(-41vh) scale(0.6); + } + 81.4814814815% { + transform: translateX(44vw) translateY(-20vh) scale(0.78); + } + 85.1851851852% { + transform: translateX(20vw) translateY(20vh) scale(0.96); + } + 88.8888888889% { + transform: translateX(41vw) translateY(-14vh) scale(0.53); + } + 92.5925925926% { + transform: translateX(-16vw) translateY(-37vh) scale(0.94); + } + 96.2962962963% { + transform: translateX(49vw) translateY(9vh) scale(0.74); + } + 100% { + transform: translateX(-41vw) translateY(-11vh) scale(0.98); + } +} +.firefly:nth-child(8) { + animation-name: move8; +} +.firefly:nth-child(8)::before { + animation-duration: 16s; +} +.firefly:nth-child(8)::after { + animation-duration: 16s, 10200ms; + animation-delay: 0ms, 6600ms; +} + +@keyframes move8 { + 0% { + transform: translateX(8vw) translateY(39vh) scale(0.77); + } + 4% { + transform: translateX(-35vw) translateY(48vh) scale(0.69); + } + 8% { + transform: translateX(16vw) translateY(38vh) scale(0.76); + } + 12% { + transform: translateX(28vw) translateY(-25vh) scale(0.72); + } + 16% { + transform: translateX(-22vw) translateY(-28vh) scale(0.92); + } + 20% { + transform: translateX(33vw) translateY(3vh) scale(0.82); + } + 24% { + transform: translateX(-18vw) translateY(-28vh) scale(0.8); + } + 28% { + transform: translateX(-49vw) translateY(20vh) scale(0.52); + } + 32% { + transform: translateX(-12vw) translateY(21vh) scale(0.47); + } + 36% { + transform: translateX(-30vw) translateY(48vh) scale(0.81); + } + 40% { + transform: translateX(-21vw) translateY(-29vh) scale(0.88); + } + 44% { + transform: translateX(25vw) translateY(-24vh) scale(0.5); + } + 48% { + transform: translateX(1vw) translateY(4vh) scale(0.77); + } + 52% { + transform: translateX(-13vw) translateY(3vh) scale(0.98); + } + 56% { + transform: translateX(-41vw) translateY(8vh) scale(0.86); + } + 60% { + transform: translateX(46vw) translateY(-18vh) scale(0.59); + } + 64% { + transform: translateX(-47vw) translateY(31vh) scale(0.77); + } + 68% { + transform: translateX(-38vw) translateY(-22vh) scale(0.92); + } + 72% { + transform: translateX(40vw) translateY(-7vh) scale(0.64); + } + 76% { + transform: translateX(33vw) translateY(1vh) scale(0.73); + } + 80% { + transform: translateX(-16vw) translateY(-42vh) scale(0.87); + } + 84% { + transform: translateX(22vw) translateY(-41vh) scale(0.38); + } + 88% { + transform: translateX(-36vw) translateY(-20vh) scale(0.27); + } + 92% { + transform: translateX(24vw) translateY(-14vh) scale(0.36); + } + 96% { + transform: translateX(-35vw) translateY(24vh) scale(0.41); + } + 100% { + transform: translateX(33vw) translateY(30vh) scale(0.77); + } +} +.firefly:nth-child(9) { + animation-name: move9; +} +.firefly:nth-child(9)::before { + animation-duration: 10s; +} +.firefly:nth-child(9)::after { + animation-duration: 10s, 8762ms; + animation-delay: 0ms, 2069ms; +} + +@keyframes move9 { + 0% { + transform: translateX(-4vw) translateY(-11vh) scale(0.47); + } + 4.5454545455% { + transform: translateX(45vw) translateY(8vh) scale(0.9); + } + 9.0909090909% { + transform: translateX(-21vw) translateY(4vh) scale(0.56); + } + 13.6363636364% { + transform: translateX(-8vw) translateY(5vh) scale(0.83); + } + 18.1818181818% { + transform: translateX(11vw) translateY(-34vh) scale(0.58); + } + 22.7272727273% { + transform: translateX(38vw) translateY(-4vh) scale(0.65); + } + 27.2727272727% { + transform: translateX(25vw) translateY(-47vh) scale(1); + } + 31.8181818182% { + transform: translateX(13vw) translateY(36vh) scale(0.85); + } + 36.3636363636% { + transform: translateX(10vw) translateY(43vh) scale(0.33); + } + 40.9090909091% { + transform: translateX(-11vw) translateY(-49vh) scale(0.37); + } + 45.4545454545% { + transform: translateX(25vw) translateY(-18vh) scale(0.76); + } + 50% { + transform: translateX(2vw) translateY(-17vh) scale(0.8); + } + 54.5454545455% { + transform: translateX(0vw) translateY(5vh) scale(0.57); + } + 59.0909090909% { + transform: translateX(18vw) translateY(-23vh) scale(0.32); + } + 63.6363636364% { + transform: translateX(8vw) translateY(50vh) scale(0.28); + } + 68.1818181818% { + transform: translateX(-10vw) translateY(-12vh) scale(0.31); + } + 72.7272727273% { + transform: translateX(-5vw) translateY(29vh) scale(1); + } + 77.2727272727% { + transform: translateX(-37vw) translateY(6vh) scale(0.52); + } + 81.8181818182% { + transform: translateX(47vw) translateY(18vh) scale(0.91); + } + 86.3636363636% { + transform: translateX(-6vw) translateY(11vh) scale(0.88); + } + 90.9090909091% { + transform: translateX(-31vw) translateY(33vh) scale(0.39); + } + 95.4545454545% { + transform: translateX(-9vw) translateY(-4vh) scale(0.64); + } + 100% { + transform: translateX(7vw) translateY(10vh) scale(0.78); + } +} +.firefly:nth-child(10) { + animation-name: move10; +} +.firefly:nth-child(10)::before { + animation-duration: 12s; +} +.firefly:nth-child(10)::after { + animation-duration: 12s, 7565ms; + animation-delay: 0ms, 1562ms; +} + +@keyframes move10 { + 0% { + transform: translateX(-25vw) translateY(-19vh) scale(0.47); + } + 5% { + transform: translateX(30vw) translateY(-30vh) scale(0.6); + } + 10% { + transform: translateX(-9vw) translateY(35vh) scale(0.57); + } + 15% { + transform: translateX(11vw) translateY(46vh) scale(0.72); + } + 20% { + transform: translateX(-11vw) translateY(-33vh) scale(0.3); + } + 25% { + transform: translateX(19vw) translateY(-3vh) scale(0.96); + } + 30% { + transform: translateX(-21vw) translateY(35vh) scale(0.63); + } + 35% { + transform: translateX(-30vw) translateY(12vh) scale(0.37); + } + 40% { + transform: translateX(-49vw) translateY(50vh) scale(0.61); + } + 45% { + transform: translateX(-15vw) translateY(42vh) scale(0.66); + } + 50% { + transform: translateX(-45vw) translateY(-16vh) scale(0.77); + } + 55% { + transform: translateX(43vw) translateY(29vh) scale(0.55); + } + 60% { + transform: translateX(-37vw) translateY(9vh) scale(0.74); + } + 65% { + transform: translateX(-21vw) translateY(-15vh) scale(0.61); + } + 70% { + transform: translateX(36vw) translateY(44vh) scale(0.5); + } + 75% { + transform: translateX(-49vw) translateY(-4vh) scale(0.78); + } + 80% { + transform: translateX(25vw) translateY(4vh) scale(0.94); + } + 85% { + transform: translateX(-19vw) translateY(-39vh) scale(0.95); + } + 90% { + transform: translateX(40vw) translateY(25vh) scale(0.94); + } + 95% { + transform: translateX(1vw) translateY(-28vh) scale(0.91); + } + 100% { + transform: translateX(-9vw) translateY(-2vh) scale(0.97); + } +} +.firefly:nth-child(11) { + animation-name: move11; +} +.firefly:nth-child(11)::before { + animation-duration: 12s; +} +.firefly:nth-child(11)::after { + animation-duration: 12s, 8233ms; + animation-delay: 0ms, 6970ms; +} + +@keyframes move11 { + 0% { + transform: translateX(-16vw) translateY(-10vh) scale(0.87); + } + 3.5714285714% { + transform: translateX(-22vw) translateY(22vh) scale(0.89); + } + 7.1428571429% { + transform: translateX(27vw) translateY(-32vh) scale(0.69); + } + 10.7142857143% { + transform: translateX(-33vw) translateY(33vh) scale(0.56); + } + 14.2857142857% { + transform: translateX(-7vw) translateY(-2vh) scale(0.45); + } + 17.8571428571% { + transform: translateX(-44vw) translateY(-1vh) scale(0.28); + } + 21.4285714286% { + transform: translateX(17vw) translateY(14vh) scale(0.53); + } + 25% { + transform: translateX(13vw) translateY(40vh) scale(0.53); + } + 28.5714285714% { + transform: translateX(-26vw) translateY(-22vh) scale(0.91); + } + 32.1428571429% { + transform: translateX(-32vw) translateY(15vh) scale(0.28); + } + 35.7142857143% { + transform: translateX(18vw) translateY(4vh) scale(0.96); + } + 39.2857142857% { + transform: translateX(16vw) translateY(-4vh) scale(0.81); + } + 42.8571428571% { + transform: translateX(35vw) translateY(-20vh) scale(0.81); + } + 46.4285714286% { + transform: translateX(-23vw) translateY(-10vh) scale(0.5); + } + 50% { + transform: translateX(-23vw) translateY(23vh) scale(0.38); + } + 53.5714285714% { + transform: translateX(22vw) translateY(0vh) scale(0.52); + } + 57.1428571429% { + transform: translateX(-9vw) translateY(47vh) scale(0.76); + } + 60.7142857143% { + transform: translateX(7vw) translateY(35vh) scale(0.88); + } + 64.2857142857% { + transform: translateX(40vw) translateY(24vh) scale(0.37); + } + 67.8571428571% { + transform: translateX(33vw) translateY(50vh) scale(0.39); + } + 71.4285714286% { + transform: translateX(22vw) translateY(35vh) scale(0.86); + } + 75% { + transform: translateX(-21vw) translateY(8vh) scale(0.73); + } + 78.5714285714% { + transform: translateX(43vw) translateY(3vh) scale(0.44); + } + 82.1428571429% { + transform: translateX(-42vw) translateY(26vh) scale(0.93); + } + 85.7142857143% { + transform: translateX(-10vw) translateY(45vh) scale(0.98); + } + 89.2857142857% { + transform: translateX(-10vw) translateY(43vh) scale(0.51); + } + 92.8571428571% { + transform: translateX(-43vw) translateY(-18vh) scale(0.28); + } + 96.4285714286% { + transform: translateX(-21vw) translateY(16vh) scale(0.68); + } + 100% { + transform: translateX(-35vw) translateY(-26vh) scale(0.34); + } +} +.firefly:nth-child(12) { + animation-name: move12; +} +.firefly:nth-child(12)::before { + animation-duration: 15s; +} +.firefly:nth-child(12)::after { + animation-duration: 15s, 5752ms; + animation-delay: 0ms, 2206ms; +} + +@keyframes move12 { + 0% { + transform: translateX(-35vw) translateY(8vh) scale(0.97); + } + 4.347826087% { + transform: translateX(-40vw) translateY(-37vh) scale(0.85); + } + 8.6956521739% { + transform: translateX(-7vw) translateY(15vh) scale(0.56); + } + 13.0434782609% { + transform: translateX(9vw) translateY(42vh) scale(0.7); + } + 17.3913043478% { + transform: translateX(-26vw) translateY(8vh) scale(0.93); + } + 21.7391304348% { + transform: translateX(-27vw) translateY(-12vh) scale(0.7); + } + 26.0869565217% { + transform: translateX(20vw) translateY(12vh) scale(0.77); + } + 30.4347826087% { + transform: translateX(22vw) translateY(-43vh) scale(0.59); + } + 34.7826086957% { + transform: translateX(46vw) translateY(26vh) scale(0.61); + } + 39.1304347826% { + transform: translateX(1vw) translateY(13vh) scale(0.29); + } + 43.4782608696% { + transform: translateX(-22vw) translateY(-26vh) scale(0.53); + } + 47.8260869565% { + transform: translateX(-19vw) translateY(-36vh) scale(0.63); + } + 52.1739130435% { + transform: translateX(37vw) translateY(-28vh) scale(0.79); + } + 56.5217391304% { + transform: translateX(-42vw) translateY(13vh) scale(0.28); + } + 60.8695652174% { + transform: translateX(-12vw) translateY(5vh) scale(0.28); + } + 65.2173913043% { + transform: translateX(35vw) translateY(-46vh) scale(0.5); + } + 69.5652173913% { + transform: translateX(15vw) translateY(40vh) scale(0.66); + } + 73.9130434783% { + transform: translateX(-42vw) translateY(-19vh) scale(0.33); + } + 78.2608695652% { + transform: translateX(17vw) translateY(-30vh) scale(0.93); + } + 82.6086956522% { + transform: translateX(7vw) translateY(21vh) scale(0.79); + } + 86.9565217391% { + transform: translateX(43vw) translateY(48vh) scale(0.42); + } + 91.3043478261% { + transform: translateX(16vw) translateY(-31vh) scale(0.63); + } + 95.652173913% { + transform: translateX(-31vw) translateY(3vh) scale(0.56); + } + 100% { + transform: translateX(10vw) translateY(33vh) scale(0.45); + } +} +.firefly:nth-child(13) { + animation-name: move13; +} +.firefly:nth-child(13)::before { + animation-duration: 13s; +} +.firefly:nth-child(13)::after { + animation-duration: 13s, 9291ms; + animation-delay: 0ms, 2221ms; +} + +@keyframes move13 { + 0% { + transform: translateX(-45vw) translateY(19vh) scale(0.84); + } + 4% { + transform: translateX(-24vw) translateY(-43vh) scale(0.78); + } + 8% { + transform: translateX(26vw) translateY(-3vh) scale(0.6); + } + 12% { + transform: translateX(12vw) translateY(44vh) scale(0.83); + } + 16% { + transform: translateX(31vw) translateY(-22vh) scale(0.93); + } + 20% { + transform: translateX(11vw) translateY(-11vh) scale(0.69); + } + 24% { + transform: translateX(-8vw) translateY(14vh) scale(0.61); + } + 28% { + transform: translateX(43vw) translateY(-46vh) scale(0.29); + } + 32% { + transform: translateX(16vw) translateY(-4vh) scale(0.42); + } + 36% { + transform: translateX(14vw) translateY(-16vh) scale(0.87); + } + 40% { + transform: translateX(-44vw) translateY(-8vh) scale(0.74); + } + 44% { + transform: translateX(34vw) translateY(-43vh) scale(0.91); + } + 48% { + transform: translateX(14vw) translateY(46vh) scale(0.39); + } + 52% { + transform: translateX(10vw) translateY(16vh) scale(0.92); + } + 56% { + transform: translateX(44vw) translateY(38vh) scale(0.59); + } + 60% { + transform: translateX(-4vw) translateY(17vh) scale(0.34); + } + 64% { + transform: translateX(-19vw) translateY(30vh) scale(0.37); + } + 68% { + transform: translateX(40vw) translateY(11vh) scale(0.96); + } + 72% { + transform: translateX(-21vw) translateY(-32vh) scale(0.31); + } + 76% { + transform: translateX(50vw) translateY(14vh) scale(0.55); + } + 80% { + transform: translateX(-27vw) translateY(27vh) scale(0.61); + } + 84% { + transform: translateX(19vw) translateY(30vh) scale(0.82); + } + 88% { + transform: translateX(-42vw) translateY(18vh) scale(0.6); + } + 92% { + transform: translateX(-18vw) translateY(-25vh) scale(0.49); + } + 96% { + transform: translateX(-47vw) translateY(47vh) scale(0.85); + } + 100% { + transform: translateX(-6vw) translateY(1vh) scale(0.71); + } +} +.firefly:nth-child(14) { + animation-name: move14; +} +.firefly:nth-child(14)::before { + animation-duration: 11s; +} +.firefly:nth-child(14)::after { + animation-duration: 11s, 9482ms; + animation-delay: 0ms, 4846ms; +} + +@keyframes move14 { + 0% { + transform: translateX(6vw) translateY(41vh) scale(0.99); + } + 5.8823529412% { + transform: translateX(-41vw) translateY(-48vh) scale(0.65); + } + 11.7647058824% { + transform: translateX(20vw) translateY(0vh) scale(0.65); + } + 17.6470588235% { + transform: translateX(25vw) translateY(12vh) scale(0.55); + } + 23.5294117647% { + transform: translateX(-8vw) translateY(-26vh) scale(0.29); + } + 29.4117647059% { + transform: translateX(-41vw) translateY(49vh) scale(0.98); + } + 35.2941176471% { + transform: translateX(-34vw) translateY(-10vh) scale(0.93); + } + 41.1764705882% { + transform: translateX(-34vw) translateY(4vh) scale(0.4); + } + 47.0588235294% { + transform: translateX(1vw) translateY(-34vh) scale(0.45); + } + 52.9411764706% { + transform: translateX(34vw) translateY(34vh) scale(0.95); + } + 58.8235294118% { + transform: translateX(25vw) translateY(44vh) scale(0.62); + } + 64.7058823529% { + transform: translateX(-43vw) translateY(-48vh) scale(0.78); + } + 70.5882352941% { + transform: translateX(-2vw) translateY(-42vh) scale(0.97); + } + 76.4705882353% { + transform: translateX(7vw) translateY(-40vh) scale(0.31); + } + 82.3529411765% { + transform: translateX(21vw) translateY(-16vh) scale(0.97); + } + 88.2352941176% { + transform: translateX(-15vw) translateY(15vh) scale(0.55); + } + 94.1176470588% { + transform: translateX(15vw) translateY(21vh) scale(0.7); + } + 100% { + transform: translateX(-35vw) translateY(2vh) scale(0.99); + } +} +.firefly:nth-child(15) { + animation-name: move15; +} +.firefly:nth-child(15)::before { + animation-duration: 11s; +} +.firefly:nth-child(15)::after { + animation-duration: 11s, 10734ms; + animation-delay: 0ms, 5943ms; +} + +@keyframes move15 { + 0% { + transform: translateX(44vw) translateY(-15vh) scale(0.75); + } + 5% { + transform: translateX(12vw) translateY(-46vh) scale(0.94); + } + 10% { + transform: translateX(-12vw) translateY(-37vh) scale(0.99); + } + 15% { + transform: translateX(-21vw) translateY(12vh) scale(0.87); + } + 20% { + transform: translateX(-23vw) translateY(-24vh) scale(0.94); + } + 25% { + transform: translateX(6vw) translateY(-41vh) scale(0.43); + } + 30% { + transform: translateX(47vw) translateY(-21vh) scale(0.43); + } + 35% { + transform: translateX(8vw) translateY(25vh) scale(0.79); + } + 40% { + transform: translateX(30vw) translateY(-34vh) scale(0.32); + } + 45% { + transform: translateX(42vw) translateY(48vh) scale(0.76); + } + 50% { + transform: translateX(2vw) translateY(-27vh) scale(0.58); + } + 55% { + transform: translateX(9vw) translateY(-48vh) scale(0.49); + } + 60% { + transform: translateX(25vw) translateY(39vh) scale(0.65); + } + 65% { + transform: translateX(-13vw) translateY(29vh) scale(0.55); + } + 70% { + transform: translateX(32vw) translateY(-34vh) scale(0.34); + } + 75% { + transform: translateX(49vw) translateY(-1vh) scale(0.46); + } + 80% { + transform: translateX(31vw) translateY(28vh) scale(0.92); + } + 85% { + transform: translateX(41vw) translateY(-30vh) scale(0.97); + } + 90% { + transform: translateX(43vw) translateY(-33vh) scale(0.81); + } + 95% { + transform: translateX(-42vw) translateY(17vh) scale(0.4); + } + 100% { + transform: translateX(12vw) translateY(23vh) scale(0.41); + } +} +@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; + } +} \ No newline at end of file diff --git a/fireflies/src/style.sass b/fireflies/src/style.sass new file mode 100755 index 0000000..b34b038 --- /dev/null +++ b/fireflies/src/style.sass @@ -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 \ No newline at end of file diff --git a/parallax-star/README.md b/parallax-star/README.md new file mode 100755 index 0000000..4f8fc78 --- /dev/null +++ b/parallax-star/README.md @@ -0,0 +1,15 @@ +# 🌌 Parallax Star Background + +Многослойный анимированный фон звездного неба с эффектом параллакса. Звезды разного размера движутся с разной скоростью, создавая ощущение полета сквозь глубокий космос. + +### Особенности + +- **Performance Optimized**: Сотни звезд генерируются как тени (`box-shadow`) одного элемента, что значительно экономит ресурсы процессора. +- **Parallax Effect**: Три слоя звезд (`#stars`, `#stars2`, `#stars3`) движутся с разной скоростью, создавая иллюзию объема. +- **Pure CSS**: Вся логика анимации и визуализации построена на стандартных свойствах CSS без использования тяжелых JS-библиотек. + +### Технические детали + +- **Background**: Используется `radial-gradient` для создания мягкого свечения у горизонта. +- **Keyframes**: Анимация `animStar` плавно перемещает слои снизу вверх, зацикливая движение. +- **Sass Origin**: Оригинальный код был сгенерирован функцией Sass для рандомизации координат, в текущем репозитории представлена чистая CSS-версия. diff --git a/parallax-star/src/index.html b/parallax-star/src/index.html new file mode 100755 index 0000000..acfd2c9 --- /dev/null +++ b/parallax-star/src/index.html @@ -0,0 +1,28 @@ + + + + + Parallax Star background in CSS + + + + + + +
+
+
+
+ + PURE CSS + +
+ + PARALLAX PIXEL STARS + +
+ + + + + diff --git a/parallax-star/src/style.css b/parallax-star/src/style.css new file mode 100755 index 0000000..64e4143 --- /dev/null +++ b/parallax-star/src/style.css @@ -0,0 +1,85 @@ +html { + height: 100%; + background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); + overflow: hidden; +} + +#stars { + width: 1px; + height: 1px; + background: transparent; + box-shadow: 791px 689px #FFF , 1793px 1755px #FFF , 1404px 922px #FFF , 1690px 1534px #FFF , 448px 1961px #FFF , 548px 1718px #FFF , 1880px 221px #FFF , 951px 2000px #FFF , 1842px 1157px #FFF , 1929px 1220px #FFF , 725px 895px #FFF , 1668px 625px #FFF , 845px 1456px #FFF , 1682px 1431px #FFF , 1945px 1666px #FFF , 607px 248px #FFF , 665px 398px #FFF , 74px 1511px #FFF , 775px 712px #FFF , 626px 1566px #FFF , 583px 59px #FFF , 628px 300px #FFF , 828px 1996px #FFF , 1202px 1612px #FFF , 866px 1350px #FFF , 959px 1048px #FFF , 434px 1811px #FFF , 939px 1614px #FFF , 1793px 1772px #FFF , 453px 764px #FFF , 241px 1210px #FFF , 962px 897px #FFF , 204px 753px #FFF , 505px 1888px #FFF , 467px 1895px #FFF , 1079px 85px #FFF , 88px 1217px #FFF , 1983px 284px #FFF , 207px 1348px #FFF , 732px 263px #FFF , 1421px 1444px #FFF , 293px 163px #FFF , 1070px 1909px #FFF , 1510px 1064px #FFF , 178px 1855px #FFF , 1842px 261px #FFF , 1812px 606px #FFF , 255px 44px #FFF , 486px 198px #FFF , 693px 1607px #FFF , 1848px 887px #FFF , 1638px 879px #FFF , 1144px 1975px #FFF , 1753px 932px #FFF , 710px 37px #FFF , 750px 738px #FFF , 1865px 1266px #FFF , 1503px 149px #FFF , 469px 1340px #FFF , 1951px 1295px #FFF , 1971px 1158px #FFF , 1801px 1381px #FFF , 229px 1030px #FFF , 1336px 514px #FFF , 1103px 576px #FFF , 1526px 1663px #FFF , 1480px 1530px #FFF , 264px 288px #FFF , 306px 1780px #FFF , 586px 1494px #FFF , 1781px 758px #FFF , 1313px 1087px #FFF , 1461px 293px #FFF , 938px 432px #FFF , 1727px 1090px #FFF , 919px 382px #FFF , 829px 1806px #FFF , 213px 1642px #FFF , 7px 362px #FFF , 1637px 718px #FFF , 1939px 1908px #FFF , 868px 351px #FFF , 1258px 657px #FFF , 237px 1442px #FFF , 1083px 655px #FFF , 527px 930px #FFF , 1077px 105px #FFF , 953px 37px #FFF , 1578px 668px #FFF , 1165px 14px #FFF , 69px 789px #FFF , 415px 1726px #FFF , 814px 811px #FFF , 1866px 1430px #FFF , 593px 1543px #FFF , 1238px 1842px #FFF , 359px 1630px #FFF , 1117px 1036px #FFF , 706px 790px #FFF , 551px 904px #FFF , 1684px 1586px #FFF , 1424px 1866px #FFF , 1276px 1001px #FFF , 1246px 1076px #FFF , 685px 1711px #FFF , 1566px 1080px #FFF , 5px 821px #FFF , 1507px 716px #FFF , 573px 1933px #FFF , 712px 1523px #FFF , 1221px 1303px #FFF , 1831px 1525px #FFF , 766px 825px #FFF , 1236px 387px #FFF , 1726px 1695px #FFF , 424px 129px #FFF , 514px 871px #FFF , 950px 1820px #FFF , 751px 982px #FFF , 1652px 409px #FFF , 347px 506px #FFF , 862px 316px #FFF , 1193px 623px #FFF , 768px 91px #FFF , 855px 724px #FFF , 505px 284px #FFF , 1485px 946px #FFF , 132px 134px #FFF , 1155px 1522px #FFF , 1058px 1392px #FFF , 544px 1625px #FFF , 142px 711px #FFF , 559px 1772px #FFF , 843px 1623px #FFF , 41px 553px #FFF , 802px 770px #FFF , 1237px 478px #FFF , 1497px 794px #FFF , 964px 1778px #FFF , 1614px 32px #FFF , 255px 1628px #FFF , 969px 410px #FFF , 67px 964px #FFF , 745px 474px #FFF , 536px 732px #FFF , 1568px 1510px #FFF , 360px 687px #FFF , 1779px 557px #FFF , 1180px 318px #FFF , 1837px 890px #FFF , 1127px 445px #FFF , 1801px 187px #FFF , 428px 1422px #FFF , 622px 241px #FFF , 360px 1620px #FFF , 1004px 618px #FFF , 1057px 205px #FFF , 678px 1832px #FFF , 235px 1529px #FFF , 791px 258px #FFF , 1844px 1333px #FFF , 989px 1278px #FFF , 138px 230px #FFF , 69px 1560px #FFF , 1226px 269px #FFF , 980px 1186px #FFF , 457px 1383px #FFF , 759px 107px #FFF , 1812px 306px #FFF , 1967px 1404px #FFF , 150px 1658px #FFF , 894px 314px #FFF , 1571px 1456px #FFF , 1921px 181px #FFF , 108px 1669px #FFF , 1296px 1233px #FFF , 1157px 1127px #FFF , 462px 672px #FFF , 1720px 625px #FFF , 1870px 1770px #FFF , 1603px 476px #FFF , 1963px 1137px #FFF , 979px 864px #FFF , 648px 170px #FFF , 1831px 1505px #FFF , 729px 1292px #FFF , 1024px 1683px #FFF , 200px 143px #FFF , 1566px 1202px #FFF , 772px 468px #FFF , 1198px 1677px #FFF , 1758px 535px #FFF , 232px 1233px #FFF , 1395px 935px #FFF , 1774px 1621px #FFF , 1424px 400px #FFF , 962px 1594px #FFF , 967px 981px #FFF , 580px 525px #FFF , 59px 1138px #FFF , 1736px 963px #FFF , 845px 568px #FFF , 1723px 1051px #FFF , 203px 1235px #FFF , 1718px 1458px #FFF , 309px 65px #FFF , 331px 1779px #FFF , 1963px 1340px #FFF , 819px 1710px #FFF , 255px 426px #FFF , 578px 1998px #FFF , 1537px 1626px #FFF , 766px 492px #FFF , 774px 312px #FFF , 475px 831px #FFF , 571px 1900px #FFF , 594px 723px #FFF , 212px 1872px #FFF , 423px 959px #FFF , 48px 506px #FFF , 275px 1617px #FFF , 1460px 1875px #FFF , 1614px 469px #FFF , 642px 1330px #FFF , 962px 902px #FFF , 355px 1904px #FFF , 825px 213px #FFF , 983px 774px #FFF , 828px 1154px #FFF , 698px 1564px #FFF , 637px 195px #FFF , 378px 1596px #FFF , 1485px 1901px #FFF , 878px 686px #FFF , 1964px 814px #FFF , 1356px 347px #FFF , 1334px 1607px #FFF , 90px 1490px #FFF , 1277px 1088px #FFF , 620px 1844px #FFF , 895px 154px #FFF , 1122px 532px #FFF , 1871px 1954px #FFF , 1901px 76px #FFF , 65px 1712px #FFF , 1788px 1947px #FFF , 130px 1569px #FFF , 1985px 735px #FFF , 362px 775px #FFF , 1835px 1515px #FFF , 392px 1635px #FFF , 1777px 433px #FFF , 381px 676px #FFF , 22px 76px #FFF , 1072px 1126px #FFF , 1328px 417px #FFF , 1947px 768px #FFF , 1900px 1240px #FFF , 629px 883px #FFF , 536px 579px #FFF , 1683px 1468px #FFF , 1232px 158px #FFF , 257px 595px #FFF , 1344px 1388px #FFF , 1430px 227px #FFF , 1192px 1796px #FFF , 1897px 370px #FFF , 181px 146px #FFF , 26px 148px #FFF , 1794px 314px #FFF , 588px 598px #FFF , 1909px 255px #FFF , 1176px 1649px #FFF , 1038px 682px #FFF , 1974px 1965px #FFF , 950px 971px #FFF , 1840px 1070px #FFF , 1706px 1508px #FFF , 787px 1576px #FFF , 1598px 1107px #FFF , 1741px 71px #FFF , 1972px 313px #FFF , 966px 223px #FFF , 2000px 636px #FFF , 1670px 861px #FFF , 1480px 1236px #FFF , 810px 1641px #FFF , 1847px 1751px #FFF , 1287px 1653px #FFF , 1335px 803px #FFF , 1316px 1235px #FFF , 1463px 1789px #FFF , 448px 755px #FFF , 1015px 1989px #FFF , 644px 1111px #FFF , 1528px 1422px #FFF , 1870px 345px #FFF , 1094px 709px #FFF , 159px 278px #FFF , 1134px 1248px #FFF , 1762px 755px #FFF , 1653px 65px #FFF , 1368px 1879px #FFF , 168px 368px #FFF , 1054px 268px #FFF , 1438px 773px #FFF , 641px 591px #FFF , 1221px 389px #FFF , 408px 355px #FFF , 821px 1411px #FFF , 346px 1162px #FFF , 1820px 1689px #FFF , 1995px 990px #FFF , 648px 346px #FFF , 1804px 322px #FFF , 1966px 416px #FFF , 1793px 1603px #FFF , 924px 188px #FFF , 1429px 1102px #FFF , 1162px 362px #FFF , 380px 950px #FFF , 172px 676px #FFF , 470px 1937px #FFF , 455px 986px #FFF , 890px 1071px #FFF , 1484px 1010px #FFF , 905px 1429px #FFF , 530px 484px #FFF , 156px 1614px #FFF , 548px 868px #FFF , 1879px 156px #FFF , 738px 1143px #FFF , 1841px 795px #FFF , 1997px 915px #FFF , 1156px 729px #FFF , 275px 1468px #FFF , 394px 1428px #FFF , 748px 1559px #FFF , 10px 1753px #FFF , 708px 166px #FFF , 1946px 1449px #FFF , 221px 172px #FFF , 938px 1257px #FFF , 1725px 255px #FFF , 412px 1165px #FFF , 960px 566px #FFF , 855px 1053px #FFF , 896px 748px #FFF , 1750px 917px #FFF , 235px 1799px #FFF , 940px 186px #FFF , 26px 729px #FFF , 1891px 1137px #FFF , 93px 1190px #FFF , 374px 1787px #FFF , 1438px 540px #FFF , 1489px 268px #FFF , 479px 1817px #FFF , 768px 226px #FFF , 1592px 441px #FFF , 806px 1344px #FFF , 1150px 442px #FFF , 1276px 254px #FFF , 52px 1948px #FFF , 471px 668px #FFF , 1242px 564px #FFF , 350px 1016px #FFF , 346px 80px #FFF , 1409px 781px #FFF , 1995px 147px #FFF , 680px 702px #FFF , 389px 24px #FFF , 308px 339px #FFF , 960px 1375px #FFF , 1438px 1616px #FFF , 638px 129px #FFF , 608px 297px #FFF , 1656px 1847px #FFF , 773px 936px #FFF , 563px 1793px #FFF , 1778px 227px #FFF , 197px 1369px #FFF , 842px 639px #FFF , 1652px 169px #FFF , 1753px 1082px #FFF , 644px 1617px #FFF , 1183px 642px #FFF , 1069px 1252px #FFF , 1351px 1102px #FFF , 1113px 898px #FFF , 1432px 635px #FFF , 1584px 748px #FFF , 1073px 1494px #FFF , 844px 615px #FFF , 855px 1478px #FFF , 1323px 1719px #FFF , 1479px 765px #FFF , 1433px 435px #FFF , 1524px 217px #FFF , 72px 1450px #FFF , 337px 1191px #FFF , 195px 967px #FFF , 1175px 55px #FFF , 1991px 1921px #FFF , 479px 1289px #FFF , 248px 1133px #FFF , 703px 1381px #FFF , 876px 1081px #FFF , 822px 1433px #FFF , 1599px 1863px #FFF , 1429px 48px #FFF , 1313px 532px #FFF , 1045px 1937px #FFF , 132px 1552px #FFF , 1976px 1594px #FFF , 223px 1395px #FFF , 155px 601px #FFF , 1200px 248px #FFF , 1482px 1617px #FFF , 1008px 759px #FFF , 1183px 1977px #FFF , 950px 411px #FFF , 398px 1731px #FFF , 1287px 120px #FFF , 131px 1885px #FFF , 885px 1841px #FFF , 1049px 638px #FFF , 640px 764px #FFF , 719px 586px #FFF , 59px 513px #FFF , 1287px 1084px #FFF , 979px 1055px #FFF , 1618px 319px #FFF , 1604px 460px #FFF , 324px 24px #FFF , 1721px 275px #FFF , 1491px 900px #FFF , 781px 1641px #FFF , 237px 1080px #FFF , 1395px 636px #FFF , 423px 1543px #FFF , 1748px 428px #FFF , 867px 233px #FFF , 1923px 618px #FFF , 1634px 1292px #FFF , 380px 1450px #FFF , 246px 1137px #FFF , 1244px 1512px #FFF , 562px 621px #FFF , 776px 855px #FFF , 312px 1665px #FFF , 1515px 1037px #FFF , 1118px 80px #FFF , 434px 1650px #FFF , 690px 1733px #FFF , 1863px 1302px #FFF , 870px 548px #FFF , 845px 1677px #FFF , 863px 197px #FFF , 585px 480px #FFF , 1280px 61px #FFF , 193px 1290px #FFF , 417px 1834px #FFF , 1804px 1931px #FFF , 126px 1180px #FFF , 1043px 893px #FFF , 809px 1342px #FFF , 941px 1251px #FFF , 714px 1456px #FFF , 1126px 129px #FFF , 756px 881px #FFF , 931px 597px #FFF , 1505px 853px #FFF , 1706px 1497px #FFF , 1725px 728px #FFF , 841px 938px #FFF , 1258px 142px #FFF , 1498px 632px #FFF , 1286px 256px #FFF , 420px 1852px #FFF , 335px 480px #FFF , 1471px 1934px #FFF , 1406px 1799px #FFF , 1247px 1933px #FFF , 115px 1666px #FFF , 1300px 1567px #FFF , 1262px 1899px #FFF , 191px 1501px #FFF , 1912px 1623px #FFF , 612px 369px #FFF , 1471px 1674px #FFF , 71px 1418px #FFF , 1389px 839px #FFF , 1135px 326px #FFF , 36px 1043px #FFF , 313px 389px #FFF , 636px 1155px #FFF , 1611px 282px #FFF , 1794px 1455px #FFF , 1960px 198px #FFF , 1629px 295px #FFF , 589px 466px #FFF , 1100px 241px #FFF , 1324px 593px #FFF , 1018px 895px #FFF , 679px 419px #FFF , 408px 1697px #FFF , 903px 1490px #FFF , 1715px 1378px #FFF , 1283px 758px #FFF , 334px 1004px #FFF , 1641px 798px #FFF , 578px 1280px #FFF , 47px 873px #FFF , 1401px 886px #FFF , 1502px 245px #FFF , 516px 859px #FFF , 1994px 969px #FFF , 664px 1295px #FFF , 533px 725px #FFF , 204px 1566px #FFF , 568px 1584px #FFF , 435px 494px #FFF , 197px 1840px #FFF , 363px 834px #FFF , 1551px 1552px #FFF , 1168px 555px #FFF , 1145px 273px #FFF , 458px 1430px #FFF , 1423px 1199px #FFF , 1375px 732px #FFF , 223px 1647px #FFF , 117px 808px #FFF , 389px 633px #FFF , 1413px 1537px #FFF , 428px 1498px #FFF , 1822px 1310px #FFF , 1250px 918px #FFF , 108px 1591px #FFF , 212px 889px #FFF , 56px 1149px #FFF , 756px 130px #FFF , 935px 1602px #FFF , 293px 1172px #FFF , 469px 741px #FFF , 1828px 825px #FFF , 1814px 297px #FFF , 1400px 190px #FFF , 3px 4px #FFF , 1600px 1079px #FFF , 277px 671px #FFF , 1023px 448px #FFF , 172px 995px #FFF , 1118px 939px #FFF , 6px 1592px #FFF , 1565px 1623px #FFF , 1766px 1110px #FFF , 1980px 949px #FFF , 2px 689px #FFF , 947px 1136px #FFF , 1542px 587px #FFF , 52px 1935px #FFF , 660px 1736px #FFF , 1317px 617px #FFF , 42px 1741px #FFF , 1568px 1327px #FFF , 919px 1858px #FFF , 1199px 696px #FFF , 1908px 322px #FFF , 1074px 1362px #FFF , 607px 523px #FFF , 511px 1620px #FFF , 643px 1273px #FFF , 171px 427px #FFF , 1412px 841px #FFF , 278px 1618px #FFF , 13px 687px #FFF , 1890px 940px #FFF , 676px 1837px #FFF , 657px 1070px #FFF , 1838px 153px #FFF , 1261px 321px #FFF , 1535px 1100px #FFF , 1053px 160px #FFF , 1529px 1278px #FFF , 899px 549px #FFF , 1453px 1724px #FFF , 203px 113px #FFF , 1579px 1438px #FFF , 274px 481px #FFF , 1015px 199px #FFF , 555px 1378px #FFF , 747px 872px #FFF , 276px 1929px #FFF , 1860px 580px #FFF , 435px 448px #FFF , 275px 8px #FFF , 269px 1745px #FFF , 1313px 1472px #FFF , 1598px 1443px #FFF , 1937px 706px #FFF , 1083px 417px #FFF , 121px 1544px #FFF , 1099px 87px #FFF , 1623px 353px #FFF , 882px 1680px #FFF , 89px 1622px #FFF , 44px 1327px #FFF , 502px 272px #FFF , 93px 468px #FFF , 1937px 1336px #FFF , 220px 281px #FFF , 935px 557px #FFF , 3px 1706px #FFF , 1225px 1302px #FFF , 1681px 1448px #FFF , 81px 721px #FFF , 1159px 462px #FFF , 1707px 1952px #FFF , 1667px 464px #FFF , 314px 695px #FFF , 1194px 1837px #FFF , 170px 580px #FFF , 641px 1049px #FFF , 1872px 337px #FFF , 1817px 1490px #FFF , 805px 139px #FFF , 1525px 1721px #FFF , 1447px 520px #FFF , 1161px 1494px #FFF , 474px 635px #FFF , 513px 883px #FFF , 651px 1997px #FFF , 12px 1657px #FFF , 1837px 482px #FFF , 1931px 751px #FFF , 494px 455px #FFF , 1540px 1080px #FFF , 869px 728px #FFF , 1677px 1529px #FFF , 350px 1994px #FFF , 330px 1781px #FFF , 352px 1460px #FFF , 1659px 1599px #FFF , 8px 264px #FFF , 171px 707px #FFF , 703px 1182px #FFF , 1193px 816px #FFF , 1718px 224px #FFF , 445px 1627px #FFF , 1495px 1825px #FFF , 1451px 1778px #FFF , 74px 1322px #FFF , 1001px 340px #FFF , 767px 1550px #FFF , 1697px 381px #FFF , 1282px 1997px #FFF , 1481px 921px #FFF , 1991px 129px #FFF , 1432px 781px #FFF , 923px 1275px #FFF , 1182px 1906px #FFF , 1908px 854px #FFF , 1354px 593px #FFF , 970px 301px #FFF , 1967px 1197px #FFF , 1828px 383px #FFF , 1289px 799px #FFF , 533px 1860px #FFF , 771px 480px #FFF , 1486px 784px #FFF , 835px 1184px #FFF , 1581px 970px #FFF , 255px 289px #FFF , 588px 1789px #FFF , 117px 1667px #FFF , 315px 1363px #FFF , 1190px 1113px #FFF , 916px 1783px #FFF , 1238px 10px #FFF , 1566px 43px #FFF , 388px 1952px #FFF , 491px 927px #FFF , 177px 1087px #FFF , 26px 1920px #FFF , 966px 411px #FFF , 1373px 579px #FFF , 463px 1101px #FFF , 254px 1911px #FFF , 1024px 1762px #FFF , 741px 1990px #FFF , 239px 672px #FFF , 1465px 1488px #FFF , 599px 575px #FFF , 722px 333px #FFF , 1370px 1988px #FFF , 1388px 1419px #FFF , 1502px 205px #FFF , 1385px 111px #FFF , 239px 1189px #FFF; + animation: animStar 50s linear infinite; +} +#stars:after { + content: " "; + position: absolute; + top: 2000px; + width: 1px; + height: 1px; + background: transparent; + box-shadow: 791px 689px #FFF , 1793px 1755px #FFF , 1404px 922px #FFF , 1690px 1534px #FFF , 448px 1961px #FFF , 548px 1718px #FFF , 1880px 221px #FFF , 951px 2000px #FFF , 1842px 1157px #FFF , 1929px 1220px #FFF , 725px 895px #FFF , 1668px 625px #FFF , 845px 1456px #FFF , 1682px 1431px #FFF , 1945px 1666px #FFF , 607px 248px #FFF , 665px 398px #FFF , 74px 1511px #FFF , 775px 712px #FFF , 626px 1566px #FFF , 583px 59px #FFF , 628px 300px #FFF , 828px 1996px #FFF , 1202px 1612px #FFF , 866px 1350px #FFF , 959px 1048px #FFF , 434px 1811px #FFF , 939px 1614px #FFF , 1793px 1772px #FFF , 453px 764px #FFF , 241px 1210px #FFF , 962px 897px #FFF , 204px 753px #FFF , 505px 1888px #FFF , 467px 1895px #FFF , 1079px 85px #FFF , 88px 1217px #FFF , 1983px 284px #FFF , 207px 1348px #FFF , 732px 263px #FFF , 1421px 1444px #FFF , 293px 163px #FFF , 1070px 1909px #FFF , 1510px 1064px #FFF , 178px 1855px #FFF , 1842px 261px #FFF , 1812px 606px #FFF , 255px 44px #FFF , 486px 198px #FFF , 693px 1607px #FFF , 1848px 887px #FFF , 1638px 879px #FFF , 1144px 1975px #FFF , 1753px 932px #FFF , 710px 37px #FFF , 750px 738px #FFF , 1865px 1266px #FFF , 1503px 149px #FFF , 469px 1340px #FFF , 1951px 1295px #FFF , 1971px 1158px #FFF , 1801px 1381px #FFF , 229px 1030px #FFF , 1336px 514px #FFF , 1103px 576px #FFF , 1526px 1663px #FFF , 1480px 1530px #FFF , 264px 288px #FFF , 306px 1780px #FFF , 586px 1494px #FFF , 1781px 758px #FFF , 1313px 1087px #FFF , 1461px 293px #FFF , 938px 432px #FFF , 1727px 1090px #FFF , 919px 382px #FFF , 829px 1806px #FFF , 213px 1642px #FFF , 7px 362px #FFF , 1637px 718px #FFF , 1939px 1908px #FFF , 868px 351px #FFF , 1258px 657px #FFF , 237px 1442px #FFF , 1083px 655px #FFF , 527px 930px #FFF , 1077px 105px #FFF , 953px 37px #FFF , 1578px 668px #FFF , 1165px 14px #FFF , 69px 789px #FFF , 415px 1726px #FFF , 814px 811px #FFF , 1866px 1430px #FFF , 593px 1543px #FFF , 1238px 1842px #FFF , 359px 1630px #FFF , 1117px 1036px #FFF , 706px 790px #FFF , 551px 904px #FFF , 1684px 1586px #FFF , 1424px 1866px #FFF , 1276px 1001px #FFF , 1246px 1076px #FFF , 685px 1711px #FFF , 1566px 1080px #FFF , 5px 821px #FFF , 1507px 716px #FFF , 573px 1933px #FFF , 712px 1523px #FFF , 1221px 1303px #FFF , 1831px 1525px #FFF , 766px 825px #FFF , 1236px 387px #FFF , 1726px 1695px #FFF , 424px 129px #FFF , 514px 871px #FFF , 950px 1820px #FFF , 751px 982px #FFF , 1652px 409px #FFF , 347px 506px #FFF , 862px 316px #FFF , 1193px 623px #FFF , 768px 91px #FFF , 855px 724px #FFF , 505px 284px #FFF , 1485px 946px #FFF , 132px 134px #FFF , 1155px 1522px #FFF , 1058px 1392px #FFF , 544px 1625px #FFF , 142px 711px #FFF , 559px 1772px #FFF , 843px 1623px #FFF , 41px 553px #FFF , 802px 770px #FFF , 1237px 478px #FFF , 1497px 794px #FFF , 964px 1778px #FFF , 1614px 32px #FFF , 255px 1628px #FFF , 969px 410px #FFF , 67px 964px #FFF , 745px 474px #FFF , 536px 732px #FFF , 1568px 1510px #FFF , 360px 687px #FFF , 1779px 557px #FFF , 1180px 318px #FFF , 1837px 890px #FFF , 1127px 445px #FFF , 1801px 187px #FFF , 428px 1422px #FFF , 622px 241px #FFF , 360px 1620px #FFF , 1004px 618px #FFF , 1057px 205px #FFF , 678px 1832px #FFF , 235px 1529px #FFF , 791px 258px #FFF , 1844px 1333px #FFF , 989px 1278px #FFF , 138px 230px #FFF , 69px 1560px #FFF , 1226px 269px #FFF , 980px 1186px #FFF , 457px 1383px #FFF , 759px 107px #FFF , 1812px 306px #FFF , 1967px 1404px #FFF , 150px 1658px #FFF , 894px 314px #FFF , 1571px 1456px #FFF , 1921px 181px #FFF , 108px 1669px #FFF , 1296px 1233px #FFF , 1157px 1127px #FFF , 462px 672px #FFF , 1720px 625px #FFF , 1870px 1770px #FFF , 1603px 476px #FFF , 1963px 1137px #FFF , 979px 864px #FFF , 648px 170px #FFF , 1831px 1505px #FFF , 729px 1292px #FFF , 1024px 1683px #FFF , 200px 143px #FFF , 1566px 1202px #FFF , 772px 468px #FFF , 1198px 1677px #FFF , 1758px 535px #FFF , 232px 1233px #FFF , 1395px 935px #FFF , 1774px 1621px #FFF , 1424px 400px #FFF , 962px 1594px #FFF , 967px 981px #FFF , 580px 525px #FFF , 59px 1138px #FFF , 1736px 963px #FFF , 845px 568px #FFF , 1723px 1051px #FFF , 203px 1235px #FFF , 1718px 1458px #FFF , 309px 65px #FFF , 331px 1779px #FFF , 1963px 1340px #FFF , 819px 1710px #FFF , 255px 426px #FFF , 578px 1998px #FFF , 1537px 1626px #FFF , 766px 492px #FFF , 774px 312px #FFF , 475px 831px #FFF , 571px 1900px #FFF , 594px 723px #FFF , 212px 1872px #FFF , 423px 959px #FFF , 48px 506px #FFF , 275px 1617px #FFF , 1460px 1875px #FFF , 1614px 469px #FFF , 642px 1330px #FFF , 962px 902px #FFF , 355px 1904px #FFF , 825px 213px #FFF , 983px 774px #FFF , 828px 1154px #FFF , 698px 1564px #FFF , 637px 195px #FFF , 378px 1596px #FFF , 1485px 1901px #FFF , 878px 686px #FFF , 1964px 814px #FFF , 1356px 347px #FFF , 1334px 1607px #FFF , 90px 1490px #FFF , 1277px 1088px #FFF , 620px 1844px #FFF , 895px 154px #FFF , 1122px 532px #FFF , 1871px 1954px #FFF , 1901px 76px #FFF , 65px 1712px #FFF , 1788px 1947px #FFF , 130px 1569px #FFF , 1985px 735px #FFF , 362px 775px #FFF , 1835px 1515px #FFF , 392px 1635px #FFF , 1777px 433px #FFF , 381px 676px #FFF , 22px 76px #FFF , 1072px 1126px #FFF , 1328px 417px #FFF , 1947px 768px #FFF , 1900px 1240px #FFF , 629px 883px #FFF , 536px 579px #FFF , 1683px 1468px #FFF , 1232px 158px #FFF , 257px 595px #FFF , 1344px 1388px #FFF , 1430px 227px #FFF , 1192px 1796px #FFF , 1897px 370px #FFF , 181px 146px #FFF , 26px 148px #FFF , 1794px 314px #FFF , 588px 598px #FFF , 1909px 255px #FFF , 1176px 1649px #FFF , 1038px 682px #FFF , 1974px 1965px #FFF , 950px 971px #FFF , 1840px 1070px #FFF , 1706px 1508px #FFF , 787px 1576px #FFF , 1598px 1107px #FFF , 1741px 71px #FFF , 1972px 313px #FFF , 966px 223px #FFF , 2000px 636px #FFF , 1670px 861px #FFF , 1480px 1236px #FFF , 810px 1641px #FFF , 1847px 1751px #FFF , 1287px 1653px #FFF , 1335px 803px #FFF , 1316px 1235px #FFF , 1463px 1789px #FFF , 448px 755px #FFF , 1015px 1989px #FFF , 644px 1111px #FFF , 1528px 1422px #FFF , 1870px 345px #FFF , 1094px 709px #FFF , 159px 278px #FFF , 1134px 1248px #FFF , 1762px 755px #FFF , 1653px 65px #FFF , 1368px 1879px #FFF , 168px 368px #FFF , 1054px 268px #FFF , 1438px 773px #FFF , 641px 591px #FFF , 1221px 389px #FFF , 408px 355px #FFF , 821px 1411px #FFF , 346px 1162px #FFF , 1820px 1689px #FFF , 1995px 990px #FFF , 648px 346px #FFF , 1804px 322px #FFF , 1966px 416px #FFF , 1793px 1603px #FFF , 924px 188px #FFF , 1429px 1102px #FFF , 1162px 362px #FFF , 380px 950px #FFF , 172px 676px #FFF , 470px 1937px #FFF , 455px 986px #FFF , 890px 1071px #FFF , 1484px 1010px #FFF , 905px 1429px #FFF , 530px 484px #FFF , 156px 1614px #FFF , 548px 868px #FFF , 1879px 156px #FFF , 738px 1143px #FFF , 1841px 795px #FFF , 1997px 915px #FFF , 1156px 729px #FFF , 275px 1468px #FFF , 394px 1428px #FFF , 748px 1559px #FFF , 10px 1753px #FFF , 708px 166px #FFF , 1946px 1449px #FFF , 221px 172px #FFF , 938px 1257px #FFF , 1725px 255px #FFF , 412px 1165px #FFF , 960px 566px #FFF , 855px 1053px #FFF , 896px 748px #FFF , 1750px 917px #FFF , 235px 1799px #FFF , 940px 186px #FFF , 26px 729px #FFF , 1891px 1137px #FFF , 93px 1190px #FFF , 374px 1787px #FFF , 1438px 540px #FFF , 1489px 268px #FFF , 479px 1817px #FFF , 768px 226px #FFF , 1592px 441px #FFF , 806px 1344px #FFF , 1150px 442px #FFF , 1276px 254px #FFF , 52px 1948px #FFF , 471px 668px #FFF , 1242px 564px #FFF , 350px 1016px #FFF , 346px 80px #FFF , 1409px 781px #FFF , 1995px 147px #FFF , 680px 702px #FFF , 389px 24px #FFF , 308px 339px #FFF , 960px 1375px #FFF , 1438px 1616px #FFF , 638px 129px #FFF , 608px 297px #FFF , 1656px 1847px #FFF , 773px 936px #FFF , 563px 1793px #FFF , 1778px 227px #FFF , 197px 1369px #FFF , 842px 639px #FFF , 1652px 169px #FFF , 1753px 1082px #FFF , 644px 1617px #FFF , 1183px 642px #FFF , 1069px 1252px #FFF , 1351px 1102px #FFF , 1113px 898px #FFF , 1432px 635px #FFF , 1584px 748px #FFF , 1073px 1494px #FFF , 844px 615px #FFF , 855px 1478px #FFF , 1323px 1719px #FFF , 1479px 765px #FFF , 1433px 435px #FFF , 1524px 217px #FFF , 72px 1450px #FFF , 337px 1191px #FFF , 195px 967px #FFF , 1175px 55px #FFF , 1991px 1921px #FFF , 479px 1289px #FFF , 248px 1133px #FFF , 703px 1381px #FFF , 876px 1081px #FFF , 822px 1433px #FFF , 1599px 1863px #FFF , 1429px 48px #FFF , 1313px 532px #FFF , 1045px 1937px #FFF , 132px 1552px #FFF , 1976px 1594px #FFF , 223px 1395px #FFF , 155px 601px #FFF , 1200px 248px #FFF , 1482px 1617px #FFF , 1008px 759px #FFF , 1183px 1977px #FFF , 950px 411px #FFF , 398px 1731px #FFF , 1287px 120px #FFF , 131px 1885px #FFF , 885px 1841px #FFF , 1049px 638px #FFF , 640px 764px #FFF , 719px 586px #FFF , 59px 513px #FFF , 1287px 1084px #FFF , 979px 1055px #FFF , 1618px 319px #FFF , 1604px 460px #FFF , 324px 24px #FFF , 1721px 275px #FFF , 1491px 900px #FFF , 781px 1641px #FFF , 237px 1080px #FFF , 1395px 636px #FFF , 423px 1543px #FFF , 1748px 428px #FFF , 867px 233px #FFF , 1923px 618px #FFF , 1634px 1292px #FFF , 380px 1450px #FFF , 246px 1137px #FFF , 1244px 1512px #FFF , 562px 621px #FFF , 776px 855px #FFF , 312px 1665px #FFF , 1515px 1037px #FFF , 1118px 80px #FFF , 434px 1650px #FFF , 690px 1733px #FFF , 1863px 1302px #FFF , 870px 548px #FFF , 845px 1677px #FFF , 863px 197px #FFF , 585px 480px #FFF , 1280px 61px #FFF , 193px 1290px #FFF , 417px 1834px #FFF , 1804px 1931px #FFF , 126px 1180px #FFF , 1043px 893px #FFF , 809px 1342px #FFF , 941px 1251px #FFF , 714px 1456px #FFF , 1126px 129px #FFF , 756px 881px #FFF , 931px 597px #FFF , 1505px 853px #FFF , 1706px 1497px #FFF , 1725px 728px #FFF , 841px 938px #FFF , 1258px 142px #FFF , 1498px 632px #FFF , 1286px 256px #FFF , 420px 1852px #FFF , 335px 480px #FFF , 1471px 1934px #FFF , 1406px 1799px #FFF , 1247px 1933px #FFF , 115px 1666px #FFF , 1300px 1567px #FFF , 1262px 1899px #FFF , 191px 1501px #FFF , 1912px 1623px #FFF , 612px 369px #FFF , 1471px 1674px #FFF , 71px 1418px #FFF , 1389px 839px #FFF , 1135px 326px #FFF , 36px 1043px #FFF , 313px 389px #FFF , 636px 1155px #FFF , 1611px 282px #FFF , 1794px 1455px #FFF , 1960px 198px #FFF , 1629px 295px #FFF , 589px 466px #FFF , 1100px 241px #FFF , 1324px 593px #FFF , 1018px 895px #FFF , 679px 419px #FFF , 408px 1697px #FFF , 903px 1490px #FFF , 1715px 1378px #FFF , 1283px 758px #FFF , 334px 1004px #FFF , 1641px 798px #FFF , 578px 1280px #FFF , 47px 873px #FFF , 1401px 886px #FFF , 1502px 245px #FFF , 516px 859px #FFF , 1994px 969px #FFF , 664px 1295px #FFF , 533px 725px #FFF , 204px 1566px #FFF , 568px 1584px #FFF , 435px 494px #FFF , 197px 1840px #FFF , 363px 834px #FFF , 1551px 1552px #FFF , 1168px 555px #FFF , 1145px 273px #FFF , 458px 1430px #FFF , 1423px 1199px #FFF , 1375px 732px #FFF , 223px 1647px #FFF , 117px 808px #FFF , 389px 633px #FFF , 1413px 1537px #FFF , 428px 1498px #FFF , 1822px 1310px #FFF , 1250px 918px #FFF , 108px 1591px #FFF , 212px 889px #FFF , 56px 1149px #FFF , 756px 130px #FFF , 935px 1602px #FFF , 293px 1172px #FFF , 469px 741px #FFF , 1828px 825px #FFF , 1814px 297px #FFF , 1400px 190px #FFF , 3px 4px #FFF , 1600px 1079px #FFF , 277px 671px #FFF , 1023px 448px #FFF , 172px 995px #FFF , 1118px 939px #FFF , 6px 1592px #FFF , 1565px 1623px #FFF , 1766px 1110px #FFF , 1980px 949px #FFF , 2px 689px #FFF , 947px 1136px #FFF , 1542px 587px #FFF , 52px 1935px #FFF , 660px 1736px #FFF , 1317px 617px #FFF , 42px 1741px #FFF , 1568px 1327px #FFF , 919px 1858px #FFF , 1199px 696px #FFF , 1908px 322px #FFF , 1074px 1362px #FFF , 607px 523px #FFF , 511px 1620px #FFF , 643px 1273px #FFF , 171px 427px #FFF , 1412px 841px #FFF , 278px 1618px #FFF , 13px 687px #FFF , 1890px 940px #FFF , 676px 1837px #FFF , 657px 1070px #FFF , 1838px 153px #FFF , 1261px 321px #FFF , 1535px 1100px #FFF , 1053px 160px #FFF , 1529px 1278px #FFF , 899px 549px #FFF , 1453px 1724px #FFF , 203px 113px #FFF , 1579px 1438px #FFF , 274px 481px #FFF , 1015px 199px #FFF , 555px 1378px #FFF , 747px 872px #FFF , 276px 1929px #FFF , 1860px 580px #FFF , 435px 448px #FFF , 275px 8px #FFF , 269px 1745px #FFF , 1313px 1472px #FFF , 1598px 1443px #FFF , 1937px 706px #FFF , 1083px 417px #FFF , 121px 1544px #FFF , 1099px 87px #FFF , 1623px 353px #FFF , 882px 1680px #FFF , 89px 1622px #FFF , 44px 1327px #FFF , 502px 272px #FFF , 93px 468px #FFF , 1937px 1336px #FFF , 220px 281px #FFF , 935px 557px #FFF , 3px 1706px #FFF , 1225px 1302px #FFF , 1681px 1448px #FFF , 81px 721px #FFF , 1159px 462px #FFF , 1707px 1952px #FFF , 1667px 464px #FFF , 314px 695px #FFF , 1194px 1837px #FFF , 170px 580px #FFF , 641px 1049px #FFF , 1872px 337px #FFF , 1817px 1490px #FFF , 805px 139px #FFF , 1525px 1721px #FFF , 1447px 520px #FFF , 1161px 1494px #FFF , 474px 635px #FFF , 513px 883px #FFF , 651px 1997px #FFF , 12px 1657px #FFF , 1837px 482px #FFF , 1931px 751px #FFF , 494px 455px #FFF , 1540px 1080px #FFF , 869px 728px #FFF , 1677px 1529px #FFF , 350px 1994px #FFF , 330px 1781px #FFF , 352px 1460px #FFF , 1659px 1599px #FFF , 8px 264px #FFF , 171px 707px #FFF , 703px 1182px #FFF , 1193px 816px #FFF , 1718px 224px #FFF , 445px 1627px #FFF , 1495px 1825px #FFF , 1451px 1778px #FFF , 74px 1322px #FFF , 1001px 340px #FFF , 767px 1550px #FFF , 1697px 381px #FFF , 1282px 1997px #FFF , 1481px 921px #FFF , 1991px 129px #FFF , 1432px 781px #FFF , 923px 1275px #FFF , 1182px 1906px #FFF , 1908px 854px #FFF , 1354px 593px #FFF , 970px 301px #FFF , 1967px 1197px #FFF , 1828px 383px #FFF , 1289px 799px #FFF , 533px 1860px #FFF , 771px 480px #FFF , 1486px 784px #FFF , 835px 1184px #FFF , 1581px 970px #FFF , 255px 289px #FFF , 588px 1789px #FFF , 117px 1667px #FFF , 315px 1363px #FFF , 1190px 1113px #FFF , 916px 1783px #FFF , 1238px 10px #FFF , 1566px 43px #FFF , 388px 1952px #FFF , 491px 927px #FFF , 177px 1087px #FFF , 26px 1920px #FFF , 966px 411px #FFF , 1373px 579px #FFF , 463px 1101px #FFF , 254px 1911px #FFF , 1024px 1762px #FFF , 741px 1990px #FFF , 239px 672px #FFF , 1465px 1488px #FFF , 599px 575px #FFF , 722px 333px #FFF , 1370px 1988px #FFF , 1388px 1419px #FFF , 1502px 205px #FFF , 1385px 111px #FFF , 239px 1189px #FFF; +} + +#stars2 { + width: 2px; + height: 2px; + background: transparent; + box-shadow: 200px 533px #FFF , 16px 1336px #FFF , 140px 1418px #FFF , 767px 1679px #FFF , 637px 372px #FFF , 462px 1026px #FFF , 285px 1837px #FFF , 1447px 283px #FFF , 690px 99px #FFF , 1528px 517px #FFF , 803px 1446px #FFF , 1601px 1443px #FFF , 708px 1714px #FFF , 381px 638px #FFF , 1477px 407px #FFF , 292px 1583px #FFF , 979px 374px #FFF , 1937px 239px #FFF , 807px 1013px #FFF , 1320px 1148px #FFF , 556px 782px #FFF , 1382px 598px #FFF , 560px 347px #FFF , 1750px 1075px #FFF , 777px 876px #FFF , 1184px 1914px #FFF , 1310px 1050px #FFF , 302px 179px #FFF , 673px 169px #FFF , 1206px 752px #FFF , 1377px 15px #FFF , 889px 1363px #FFF , 510px 149px #FFF , 1861px 975px #FFF , 911px 1304px #FFF , 653px 1786px #FFF , 1019px 1957px #FFF , 1449px 895px #FFF , 1755px 1162px #FFF , 575px 195px #FFF , 1916px 717px #FFF , 195px 1267px #FFF , 1545px 1445px #FFF , 637px 1795px #FFF , 1758px 1252px #FFF , 921px 1185px #FFF , 1019px 513px #FFF , 513px 23px #FFF , 187px 540px #FFF , 1219px 1090px #FFF , 1691px 451px #FFF , 1390px 771px #FFF , 458px 496px #FFF , 1073px 556px #FFF , 1367px 1491px #FFF , 1044px 663px #FFF , 173px 1480px #FFF , 1678px 79px #FFF , 1179px 770px #FFF , 551px 1330px #FFF , 104px 846px #FFF , 257px 422px #FFF , 874px 185px #FFF , 493px 1231px #FFF , 87px 979px #FFF , 1374px 844px #FFF , 1132px 687px #FFF , 754px 1958px #FFF , 645px 224px #FFF , 1757px 18px #FFF , 735px 918px #FFF , 329px 1011px #FFF , 1854px 1812px #FFF , 1191px 980px #FFF , 498px 834px #FFF , 592px 1114px #FFF , 1973px 1173px #FFF , 1092px 1308px #FFF , 326px 639px #FFF , 408px 387px #FFF , 1898px 1272px #FFF , 56px 1523px #FFF , 1755px 1376px #FFF , 1472px 439px #FFF , 1063px 88px #FFF , 1043px 567px #FFF , 1950px 817px #FFF , 1571px 1091px #FFF , 681px 1330px #FFF , 1002px 1167px #FFF , 1560px 1145px #FFF , 478px 841px #FFF , 588px 1593px #FFF , 1227px 1580px #FFF , 1027px 1800px #FFF , 97px 1481px #FFF , 1535px 261px #FFF , 1547px 674px #FFF , 1271px 1257px #FFF , 514px 285px #FFF , 1320px 1605px #FFF , 1166px 1941px #FFF , 1709px 1680px #FFF , 440px 1094px #FFF , 304px 340px #FFF , 933px 599px #FFF , 1763px 1799px #FFF , 1359px 1449px #FFF , 725px 390px #FFF , 1061px 337px #FFF , 1802px 1500px #FFF , 1157px 1560px #FFF , 1832px 1918px #FFF , 1296px 1093px #FFF , 1786px 1950px #FFF , 744px 1049px #FFF , 1178px 1932px #FFF , 631px 1776px #FFF , 1237px 558px #FFF , 1654px 450px #FFF , 402px 1757px #FFF , 253px 1703px #FFF , 1119px 1460px #FFF , 1999px 182px #FFF , 1896px 398px #FFF , 709px 1997px #FFF , 454px 19px #FFF , 1623px 1157px #FFF , 1118px 416px #FFF , 1791px 849px #FFF , 858px 1795px #FFF , 942px 647px #FFF , 710px 583px #FFF , 1742px 1652px #FFF , 446px 1232px #FFF , 520px 385px #FFF , 1294px 1975px #FFF , 1132px 1685px #FFF , 478px 1743px #FFF , 1877px 79px #FFF , 222px 1699px #FFF , 314px 710px #FFF , 106px 1669px #FFF , 111px 1510px #FFF , 685px 1052px #FFF , 978px 595px #FFF , 529px 1209px #FFF , 498px 138px #FFF , 303px 1408px #FFF , 1367px 323px #FFF , 1530px 1481px #FFF , 252px 444px #FFF , 602px 232px #FFF , 1727px 1102px #FFF , 72px 97px #FFF , 1194px 1068px #FFF , 1622px 604px #FFF , 483px 1436px #FFF , 435px 159px #FFF , 1087px 1891px #FFF , 136px 371px #FFF , 519px 988px #FFF , 319px 1715px #FFF , 70px 812px #FFF , 1804px 1027px #FFF , 1438px 488px #FFF , 1179px 919px #FFF , 1708px 1170px #FFF , 1578px 1229px #FFF , 703px 1828px #FFF , 1512px 44px #FFF , 895px 435px #FFF , 1993px 1009px #FFF , 1655px 37px #FFF , 1326px 1519px #FFF , 1213px 485px #FFF , 497px 1739px #FFF , 1616px 1294px #FFF , 1051px 1003px #FFF , 178px 1462px #FFF , 289px 1192px #FFF , 1338px 296px #FFF , 401px 751px #FFF , 254px 1271px #FFF , 184px 691px #FFF , 1730px 222px #FFF , 1311px 1853px #FFF , 873px 1029px #FFF , 1278px 1429px #FFF , 1916px 1420px #FFF , 595px 1678px #FFF , 1406px 762px #FFF , 127px 461px #FFF , 1348px 1314px #FFF , 979px 1641px #FFF , 1534px 1535px #FFF , 1386px 751px #FFF , 1724px 1519px #FFF , 1136px 1860px #FFF , 728px 705px #FFF; + animation: animStar 100s linear infinite; +} +#stars2:after { + content: " "; + position: absolute; + top: 2000px; + width: 2px; + height: 2px; + background: transparent; + box-shadow: 200px 533px #FFF , 16px 1336px #FFF , 140px 1418px #FFF , 767px 1679px #FFF , 637px 372px #FFF , 462px 1026px #FFF , 285px 1837px #FFF , 1447px 283px #FFF , 690px 99px #FFF , 1528px 517px #FFF , 803px 1446px #FFF , 1601px 1443px #FFF , 708px 1714px #FFF , 381px 638px #FFF , 1477px 407px #FFF , 292px 1583px #FFF , 979px 374px #FFF , 1937px 239px #FFF , 807px 1013px #FFF , 1320px 1148px #FFF , 556px 782px #FFF , 1382px 598px #FFF , 560px 347px #FFF , 1750px 1075px #FFF , 777px 876px #FFF , 1184px 1914px #FFF , 1310px 1050px #FFF , 302px 179px #FFF , 673px 169px #FFF , 1206px 752px #FFF , 1377px 15px #FFF , 889px 1363px #FFF , 510px 149px #FFF , 1861px 975px #FFF , 911px 1304px #FFF , 653px 1786px #FFF , 1019px 1957px #FFF , 1449px 895px #FFF , 1755px 1162px #FFF , 575px 195px #FFF , 1916px 717px #FFF , 195px 1267px #FFF , 1545px 1445px #FFF , 637px 1795px #FFF , 1758px 1252px #FFF , 921px 1185px #FFF , 1019px 513px #FFF , 513px 23px #FFF , 187px 540px #FFF , 1219px 1090px #FFF , 1691px 451px #FFF , 1390px 771px #FFF , 458px 496px #FFF , 1073px 556px #FFF , 1367px 1491px #FFF , 1044px 663px #FFF , 173px 1480px #FFF , 1678px 79px #FFF , 1179px 770px #FFF , 551px 1330px #FFF , 104px 846px #FFF , 257px 422px #FFF , 874px 185px #FFF , 493px 1231px #FFF , 87px 979px #FFF , 1374px 844px #FFF , 1132px 687px #FFF , 754px 1958px #FFF , 645px 224px #FFF , 1757px 18px #FFF , 735px 918px #FFF , 329px 1011px #FFF , 1854px 1812px #FFF , 1191px 980px #FFF , 498px 834px #FFF , 592px 1114px #FFF , 1973px 1173px #FFF , 1092px 1308px #FFF , 326px 639px #FFF , 408px 387px #FFF , 1898px 1272px #FFF , 56px 1523px #FFF , 1755px 1376px #FFF , 1472px 439px #FFF , 1063px 88px #FFF , 1043px 567px #FFF , 1950px 817px #FFF , 1571px 1091px #FFF , 681px 1330px #FFF , 1002px 1167px #FFF , 1560px 1145px #FFF , 478px 841px #FFF , 588px 1593px #FFF , 1227px 1580px #FFF , 1027px 1800px #FFF , 97px 1481px #FFF , 1535px 261px #FFF , 1547px 674px #FFF , 1271px 1257px #FFF , 514px 285px #FFF , 1320px 1605px #FFF , 1166px 1941px #FFF , 1709px 1680px #FFF , 440px 1094px #FFF , 304px 340px #FFF , 933px 599px #FFF , 1763px 1799px #FFF , 1359px 1449px #FFF , 725px 390px #FFF , 1061px 337px #FFF , 1802px 1500px #FFF , 1157px 1560px #FFF , 1832px 1918px #FFF , 1296px 1093px #FFF , 1786px 1950px #FFF , 744px 1049px #FFF , 1178px 1932px #FFF , 631px 1776px #FFF , 1237px 558px #FFF , 1654px 450px #FFF , 402px 1757px #FFF , 253px 1703px #FFF , 1119px 1460px #FFF , 1999px 182px #FFF , 1896px 398px #FFF , 709px 1997px #FFF , 454px 19px #FFF , 1623px 1157px #FFF , 1118px 416px #FFF , 1791px 849px #FFF , 858px 1795px #FFF , 942px 647px #FFF , 710px 583px #FFF , 1742px 1652px #FFF , 446px 1232px #FFF , 520px 385px #FFF , 1294px 1975px #FFF , 1132px 1685px #FFF , 478px 1743px #FFF , 1877px 79px #FFF , 222px 1699px #FFF , 314px 710px #FFF , 106px 1669px #FFF , 111px 1510px #FFF , 685px 1052px #FFF , 978px 595px #FFF , 529px 1209px #FFF , 498px 138px #FFF , 303px 1408px #FFF , 1367px 323px #FFF , 1530px 1481px #FFF , 252px 444px #FFF , 602px 232px #FFF , 1727px 1102px #FFF , 72px 97px #FFF , 1194px 1068px #FFF , 1622px 604px #FFF , 483px 1436px #FFF , 435px 159px #FFF , 1087px 1891px #FFF , 136px 371px #FFF , 519px 988px #FFF , 319px 1715px #FFF , 70px 812px #FFF , 1804px 1027px #FFF , 1438px 488px #FFF , 1179px 919px #FFF , 1708px 1170px #FFF , 1578px 1229px #FFF , 703px 1828px #FFF , 1512px 44px #FFF , 895px 435px #FFF , 1993px 1009px #FFF , 1655px 37px #FFF , 1326px 1519px #FFF , 1213px 485px #FFF , 497px 1739px #FFF , 1616px 1294px #FFF , 1051px 1003px #FFF , 178px 1462px #FFF , 289px 1192px #FFF , 1338px 296px #FFF , 401px 751px #FFF , 254px 1271px #FFF , 184px 691px #FFF , 1730px 222px #FFF , 1311px 1853px #FFF , 873px 1029px #FFF , 1278px 1429px #FFF , 1916px 1420px #FFF , 595px 1678px #FFF , 1406px 762px #FFF , 127px 461px #FFF , 1348px 1314px #FFF , 979px 1641px #FFF , 1534px 1535px #FFF , 1386px 751px #FFF , 1724px 1519px #FFF , 1136px 1860px #FFF , 728px 705px #FFF; +} + +#stars3 { + width: 3px; + height: 3px; + background: transparent; + box-shadow: 633px 1097px #FFF , 982px 1284px #FFF , 515px 709px #FFF , 859px 139px #FFF , 649px 229px #FFF , 1248px 1199px #FFF , 1468px 1956px #FFF , 1250px 1830px #FFF , 1135px 1406px #FFF , 712px 741px #FFF , 1016px 247px #FFF , 929px 1963px #FFF , 1397px 366px #FFF , 609px 661px #FFF , 1163px 417px #FFF , 1058px 1661px #FFF , 1749px 123px #FFF , 993px 209px #FFF , 851px 161px #FFF , 807px 940px #FFF , 296px 1582px #FFF , 1136px 613px #FFF , 1364px 1382px #FFF , 1993px 780px #FFF , 1151px 1854px #FFF , 1109px 617px #FFF , 1353px 626px #FFF , 1807px 1240px #FFF , 33px 904px #FFF , 1666px 1067px #FFF , 323px 1647px #FFF , 799px 476px #FFF , 1084px 1844px #FFF , 1157px 633px #FFF , 1611px 1947px #FFF , 919px 183px #FFF , 871px 1788px #FFF , 590px 864px #FFF , 1800px 934px #FFF , 1229px 443px #FFF , 161px 1398px #FFF , 899px 1458px #FFF , 1071px 661px #FFF , 1002px 135px #FFF , 1962px 1968px #FFF , 1865px 1534px #FFF , 1616px 599px #FFF , 529px 334px #FFF , 1910px 1093px #FFF , 206px 25px #FFF , 460px 388px #FFF , 1483px 1301px #FFF , 925px 474px #FFF , 1319px 1538px #FFF , 1842px 1759px #FFF , 165px 1865px #FFF , 1873px 198px #FFF , 1718px 1316px #FFF , 340px 1254px #FFF , 431px 40px #FFF , 1627px 342px #FFF , 168px 99px #FFF , 694px 238px #FFF , 1578px 708px #FFF , 1608px 1831px #FFF , 1357px 462px #FFF , 1214px 1066px #FFF , 1488px 291px #FFF , 1218px 1238px #FFF , 353px 785px #FFF , 1649px 649px #FFF , 1262px 1205px #FFF , 1040px 856px #FFF , 1313px 649px #FFF , 305px 798px #FFF , 1165px 1389px #FFF , 108px 12px #FFF , 45px 1452px #FFF , 302px 438px #FFF , 872px 1280px #FFF , 269px 898px #FFF , 422px 950px #FFF , 453px 1122px #FFF , 1107px 1168px #FFF , 585px 103px #FFF , 317px 1707px #FFF , 1003px 1356px #FFF , 1374px 160px #FFF , 756px 100px #FFF , 1677px 986px #FFF , 1001px 453px #FFF , 1062px 1968px #FFF , 1791px 441px #FFF , 734px 1341px #FFF , 1109px 1180px #FFF , 514px 1231px #FFF , 963px 1379px #FFF , 1203px 155px #FFF , 72px 546px #FFF , 533px 1629px #FFF; + animation: animStar 150s linear infinite; +} +#stars3:after { + content: " "; + position: absolute; + top: 2000px; + width: 3px; + height: 3px; + background: transparent; + box-shadow: 633px 1097px #FFF , 982px 1284px #FFF , 515px 709px #FFF , 859px 139px #FFF , 649px 229px #FFF , 1248px 1199px #FFF , 1468px 1956px #FFF , 1250px 1830px #FFF , 1135px 1406px #FFF , 712px 741px #FFF , 1016px 247px #FFF , 929px 1963px #FFF , 1397px 366px #FFF , 609px 661px #FFF , 1163px 417px #FFF , 1058px 1661px #FFF , 1749px 123px #FFF , 993px 209px #FFF , 851px 161px #FFF , 807px 940px #FFF , 296px 1582px #FFF , 1136px 613px #FFF , 1364px 1382px #FFF , 1993px 780px #FFF , 1151px 1854px #FFF , 1109px 617px #FFF , 1353px 626px #FFF , 1807px 1240px #FFF , 33px 904px #FFF , 1666px 1067px #FFF , 323px 1647px #FFF , 799px 476px #FFF , 1084px 1844px #FFF , 1157px 633px #FFF , 1611px 1947px #FFF , 919px 183px #FFF , 871px 1788px #FFF , 590px 864px #FFF , 1800px 934px #FFF , 1229px 443px #FFF , 161px 1398px #FFF , 899px 1458px #FFF , 1071px 661px #FFF , 1002px 135px #FFF , 1962px 1968px #FFF , 1865px 1534px #FFF , 1616px 599px #FFF , 529px 334px #FFF , 1910px 1093px #FFF , 206px 25px #FFF , 460px 388px #FFF , 1483px 1301px #FFF , 925px 474px #FFF , 1319px 1538px #FFF , 1842px 1759px #FFF , 165px 1865px #FFF , 1873px 198px #FFF , 1718px 1316px #FFF , 340px 1254px #FFF , 431px 40px #FFF , 1627px 342px #FFF , 168px 99px #FFF , 694px 238px #FFF , 1578px 708px #FFF , 1608px 1831px #FFF , 1357px 462px #FFF , 1214px 1066px #FFF , 1488px 291px #FFF , 1218px 1238px #FFF , 353px 785px #FFF , 1649px 649px #FFF , 1262px 1205px #FFF , 1040px 856px #FFF , 1313px 649px #FFF , 305px 798px #FFF , 1165px 1389px #FFF , 108px 12px #FFF , 45px 1452px #FFF , 302px 438px #FFF , 872px 1280px #FFF , 269px 898px #FFF , 422px 950px #FFF , 453px 1122px #FFF , 1107px 1168px #FFF , 585px 103px #FFF , 317px 1707px #FFF , 1003px 1356px #FFF , 1374px 160px #FFF , 756px 100px #FFF , 1677px 986px #FFF , 1001px 453px #FFF , 1062px 1968px #FFF , 1791px 441px #FFF , 734px 1341px #FFF , 1109px 1180px #FFF , 514px 1231px #FFF , 963px 1379px #FFF , 1203px 155px #FFF , 72px 546px #FFF , 533px 1629px #FFF; +} + +#title { + position: absolute; + top: 50%; + left: 0; + right: 0; + color: #FFF; + text-align: center; + font-family: "lato", sans-serif; + font-weight: 300; + font-size: 50px; + letter-spacing: 10px; + margin-top: -60px; + padding-left: 10px; +} +#title span { + background: -webkit-linear-gradient(white, #38495a); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +@keyframes animStar { + from { + transform: translateY(0px); + } + to { + transform: translateY(-2000px); + } +} \ No newline at end of file diff --git a/parallax-star/src/style.sass b/parallax-star/src/style.sass new file mode 100755 index 0000000..4230883 --- /dev/null +++ b/parallax-star/src/style.sass @@ -0,0 +1,95 @@ +@import compass + + +// n is number of stars required +@function multiple-box-shadow ($n) + $value: '#{random(2000)}px #{random(2000)}px #FFF' + @for $i from 2 through $n + $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF' + + @return unquote($value) + +$shadows-small: multiple-box-shadow(700) +$shadows-medium: multiple-box-shadow(200) +$shadows-big: multiple-box-shadow(100) + +html + height: 100% + background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) + overflow: hidden + +#stars + width: 1px + height: 1px + background: transparent + box-shadow: $shadows-small + animation : animStar 50s linear infinite + + &:after + content: " " + position: absolute + top: 2000px + width: 1px + height: 1px + background: transparent + box-shadow: $shadows-small + +#stars2 + width: 2px + height: 2px + background: transparent + box-shadow: $shadows-medium + animation : animStar 100s linear infinite + + &:after + content: " " + position: absolute + top: 2000px + width: 2px + height: 2px + background: transparent + box-shadow: $shadows-medium + +#stars3 + width: 3px + height: 3px + background: transparent + box-shadow: $shadows-big + animation : animStar 150s linear infinite + + &:after + content: " " + position: absolute + top: 2000px + width: 3px + height: 3px + background: transparent + box-shadow: $shadows-big + +#title + position: absolute + top: 50% + left: 0 + right: 0 + + color: #FFF + text-align: center + font-family: 'lato',sans-serif + font-weight: 300 + font-size: 50px + letter-spacing: 10px + + margin-top: -60px + padding-left: 10px + + span + background: -webkit-linear-gradient(white, #38495a) + -webkit-background-clip: text + -webkit-text-fill-color: transparent + +@keyframes animStar + from + transform: translateY(0px) + to + transform: translateY(-2000px) + \ No newline at end of file diff --git a/solar-system-orrery/README.md b/solar-system-orrery/README.md new file mode 100755 index 0000000..8bf26fc --- /dev/null +++ b/solar-system-orrery/README.md @@ -0,0 +1,15 @@ +# 🪐 Solar System Orrery + +Масштабная интерактивная модель Солнечной системы (Orrery), реализованная на чистом CSS3. Проект включает в себя Солнце и все планеты, вращающиеся по своим орбитам с реалистичным соотношением скоростей. + +### Особенности + +- **Pure CSS Motion**: Каждая планета использует уникальную анимацию `@keyframes` для вращения по орбите. +- **Visual Accuracy**: Соблюдены относительные размеры планет и периоды их обращения (от быстрого Меркурия до медленного Плутона). +- **Infinite Background**: Использование повторяющегося звездного фона для создания эффекта глубокого космоса. + +### Технические детали + +- **Orbital Mechanics**: Анимация реализована через двойную трансформацию (`rotate` -> `translateY` -> `rotate`), что позволяет планетам сохранять вертикальную ориентацию во время вращения. +- **Timing**: Значения `animation-duration` подобраны в соответствии с реальными астрономическими данными. +- **Layers**: Четкое разделение слоев (`z-index`) для планет и их орбитальных путей (`-path`). diff --git a/solar-system-orrery/src/index.html b/solar-system-orrery/src/index.html new file mode 100755 index 0000000..75eeb62 --- /dev/null +++ b/solar-system-orrery/src/index.html @@ -0,0 +1,54 @@ + + + + + Solar System Orrery + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/solar-system-orrery/src/style.css b/solar-system-orrery/src/style.css new file mode 100755 index 0000000..cc007b4 --- /dev/null +++ b/solar-system-orrery/src/style.css @@ -0,0 +1,696 @@ +body { + background-color: #012; + background-image: url("https://cssanimation.rocks/starwars/images/bg.jpg"); + background-size: 33%; + background-repeat: repeat; + min-height: 2025px; +} + +.system { + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: scale(0.75); +} + +.sun { + width: 144px; + height: 144px; + border-radius: 72px; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -72px; + background-image: url("http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg"); + background-size: 144px; + background-repeat: no-repeat; +} + +@-webkit-keyframes rot-mer { + from { + -webkit-transform: rotate(0deg) translatey(-84px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-84px) rotate(-360deg); + } +} +@-keyframes rot-mer { + from { + transform: rotate(0deg) translatey(-84px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-84px) rotate(-360deg); + } +} +.mer { + width: 3.5px; + height: 3.5px; + border-radius: 50%; + background-color: #888; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -1.75px; + -webkit-animation: rot-mer 0.88s infinite linear; + animation: rot-mer 0.88s infinite linear; + z-index: 200; +} + +.mer-path { + width: 168px; + height: 168px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -84px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-ven { + from { + -webkit-transform: rotate(0deg) translatey(-90px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-90px) rotate(-360deg); + } +} +@-keyframes rot-ven { + from { + transform: rotate(0deg) translatey(-90px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-90px) rotate(-360deg); + } +} +.ven { + width: 5.5px; + height: 5.5px; + border-radius: 50%; + background-color: #f5f9be; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -2.75px; + -webkit-animation: rot-ven 2.25s infinite linear; + animation: rot-ven 2.25s infinite linear; + z-index: 200; +} + +.ven-path { + width: 180px; + height: 180px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -90px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-ear { + from { + -webkit-transform: rotate(0deg) translatey(-102px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-102px) rotate(-360deg); + } +} +@-keyframes rot-ear { + from { + transform: rotate(0deg) translatey(-102px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-102px) rotate(-360deg); + } +} +.ear { + width: 7px; + height: 7px; + border-radius: 50%; + background-color: #4b94f9; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -3.5px; + -webkit-animation: rot-ear 3.65s infinite linear; + animation: rot-ear 3.65s infinite linear; + z-index: 200; +} + +.ear-path { + width: 204px; + height: 204px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -102px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-mar { + from { + -webkit-transform: rotate(0deg) translatey(-118px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-118px) rotate(-360deg); + } +} +@-keyframes rot-mar { + from { + transform: rotate(0deg) translatey(-118px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-118px) rotate(-360deg); + } +} +.mar { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #dd411a; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -3px; + -webkit-animation: rot-mar 6.87s infinite linear; + animation: rot-mar 6.87s infinite linear; + z-index: 200; +} + +.mar-path { + width: 236px; + height: 236px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -118px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-jup { + from { + -webkit-transform: rotate(0deg) translatey(-228px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-228px) rotate(-360deg); + } +} +@-keyframes rot-jup { + from { + transform: rotate(0deg) translatey(-228px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-228px) rotate(-360deg); + } +} +.jup { + width: 70px; + height: 70px; + border-radius: 50%; + background-color: #eaad3b; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -35px; + -webkit-animation: rot-jup 43.32s infinite linear; + animation: rot-jup 43.32s infinite linear; + z-index: 200; +} + +.jup-path { + width: 456px; + height: 456px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -228px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-sat { + from { + -webkit-transform: rotate(0deg) translatey(-362px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-362px) rotate(-360deg); + } +} +@-keyframes rot-sat { + from { + transform: rotate(0deg) translatey(-362px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-362px) rotate(-360deg); + } +} +.sat { + width: 58px; + height: 58px; + border-radius: 50%; + background-color: #d6cd93; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -29px; + -webkit-animation: rot-sat 107.59s infinite linear; + animation: rot-sat 107.59s infinite linear; + z-index: 200; +} + +.sat-path { + width: 724px; + height: 724px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -362px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-ura { + from { + -webkit-transform: rotate(0deg) translatey(-648px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-648px) rotate(-360deg); + } +} +@-keyframes rot-ura { + from { + transform: rotate(0deg) translatey(-648px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-648px) rotate(-360deg); + } +} +.ura { + width: 26px; + height: 26px; + border-radius: 50%; + background-color: #bfeef2; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -13px; + -webkit-animation: rot-ura 306.87s infinite linear; + animation: rot-ura 306.87s infinite linear; + z-index: 200; +} + +.ura-path { + width: 1296px; + height: 1296px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -648px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-nep { + from { + -webkit-transform: rotate(0deg) translatey(-972px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-972px) rotate(-360deg); + } +} +@-keyframes rot-nep { + from { + transform: rotate(0deg) translatey(-972px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-972px) rotate(-360deg); + } +} +.nep { + width: 24px; + height: 24px; + border-radius: 50%; + background-color: #363ed7; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -12px; + -webkit-animation: rot-nep 601.9s infinite linear; + animation: rot-nep 601.9s infinite linear; + z-index: 200; +} + +.nep-path { + width: 1944px; + height: 1944px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -972px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-plu { + from { + -webkit-transform: rotate(0deg) translatey(-1246px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-1246px) rotate(-360deg); + } +} +@-keyframes rot-plu { + from { + transform: rotate(0deg) translatey(-1246px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-1246px) rotate(-360deg); + } +} +.plu { + width: 3px; + height: 3px; + border-radius: 50%; + background-color: #963; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -1.5px; + -webkit-animation: rot-plu 904.65s infinite linear; + animation: rot-plu 904.65s infinite linear; + z-index: 200; +} + +.plu-path { + width: 2492px; + height: 2492px; + border-radius: 50%; + z-index: 100; + position: absolute; + top: 1066.6666666667px; + left: 50%; + margin: -1246px; + border: solid 1px #444; +} + +@-webkit-keyframes rot-lune { + from { + -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg); + } +} +@-keyframes rot-lune { + from { + transform: rotate(0deg) translatey(-7px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-7px) rotate(-360deg); + } +} +.lune { + width: 2px; + height: 2px; + background-color: #fff; + position: absolute; + top: 50%; + left: 50%; + margin: -1.5px; + -webkit-animation: rot-lune 0.27s infinite linear; + animation: rot-lune 0.27s infinite linear; +} + +.mar { + background-image: repeating-linear-gradient( + to bottom, + #fff, + #fff 1px, + transparent 1px, + transparent 5px + ); +} + +@-webkit-keyframes rot-pho { + from { + -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg); + } +} +@-keyframes rot-pho { + from { + transform: rotate(0deg) translatey(-7px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-7px) rotate(-360deg); + } +} +@-webkit-keyframes rot-dem { + from { + -webkit-transform: rotate(0deg) translatey(-9px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-9px) rotate(-360deg); + } +} +@-keyframes rot-dem { + from { + transform: rotate(0deg) translatey(-9px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-9px) rotate(-360deg); + } +} +.pho, +.dem { + width: 1px; + height: 1px; + background-color: #fff; + position: absolute; + top: 50%; + left: 50%; +} + +.pho { + margin: -1px; + -webkit-animation: rot-pho 0.15s infinite linear; + animation: rot-pho 0.15s infinite linear; +} + +.dem { + margin: -1px; + -webkit-animation: rot-dem 0.2s infinite linear; + animation: rot-dem 0.2s infinite linear; +} + +.jove { + width: 2px; + height: 2px; + background-color: #fff; + position: absolute; + top: 35px; + left: 50%; +} + +@-webkit-keyframes rot-io { + from { + -webkit-transform: rotate(0deg) translatey(-39px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-39px) rotate(-360deg); + } +} +@-keyframes rot-io { + from { + transform: rotate(0deg) translatey(-39px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-39px) rotate(-360deg); + } +} +@-webkit-keyframes rot-eur { + from { + -webkit-transform: rotate(0deg) translatey(-41px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-41px) rotate(-360deg); + } +} +@-keyframes rot-eur { + from { + transform: rotate(0deg) translatey(-41px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-41px) rotate(-360deg); + } +} +@-webkit-keyframes rot-gan { + from { + -webkit-transform: rotate(0deg) translatey(-45px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-45px) rotate(-360deg); + } +} +@-keyframes rot-gan { + from { + transform: rotate(0deg) translatey(-45px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-45px) rotate(-360deg); + } +} +@-webkit-keyframes rot-cal { + from { + -webkit-transform: rotate(0deg) translatey(-53px) rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) translatey(-53px) rotate(-360deg); + } +} +@-keyframes rot-cal { + from { + transform: rotate(0deg) translatey(-53px) rotate(0deg); + } + + to { + transform: rotate(360deg) translatey(-53px) rotate(-360deg); + } +} +.io { + -webkit-animation: rot-io 0.2s infinite linear; + animation: rot-io 0.2s infinite linear; +} + +.eur { + -webkit-animation: rot-eur 0.35s infinite linear; + animation: rot-eur 0.35s infinite linear; +} + +.gan { + -webkit-animation: rot-gan 0.7s infinite linear; + animation: rot-gan 0.7s infinite linear; +} + +.cal { + -webkit-animation: rot-cal 1.65s infinite linear; + animation: rot-cal 1.65s infinite linear; +} + +.jup { + background-image: repeating-linear-gradient( + 6deg, + #797663 22px, + #e1dcde 16px, + #c3a992 30px, + #e9ece2 30px + ); +} + +.spot { + position: absolute; + width: 16px; + height: 12px; + border-radius: 8px/6px; + top: 45px; + left: 50%; + background-color: #bc833b; + box-shadow: 0px 0px 5px #e1dcde; + border: solid 1px #e1dcde; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + z-index: 300; +} +.nep .spot { + background-color: #29319d; + border: 0; + box-shadow: none; + top: 50%; + left: 45%; + width: 10px; + height: 6px; + margin: -2px; + border-radius: 5px/3px; + border-left: solid 1px #7ed6fe; +} + +div[class$="-ring"] { + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + opacity: 0.7; + transform: rotatex(45deg); +} + +.a-ring { + border: solid 5px #96866f; + width: 119px; + height: 119px; + margin: -64.5px; +} + +.b-ring { + border: solid 10px #554c3c; + width: 104px; + height: 104px; + margin: -62px; +} + +.c-ring { + border: solid 9px #574f4a; + width: 95px; + height: 95px; + margin: -56.5px; +} + +.f-ring { + border: solid 2px #908e8d; + width: 133px; + height: 133px; + margin: -68.5px; +} + +.e-ring { + border: solid 7px #908e8d; + width: 76px; + height: 76px; + margin: -45px; + transform: rotatex(0deg) rotatey(89deg) !important; +} + +.plu, +.plu-path { + top: 1354.0666666667px; +} diff --git a/solar-system-orrery/src/style.scss b/solar-system-orrery/src/style.scss new file mode 100755 index 0000000..5a014e7 --- /dev/null +++ b/solar-system-orrery/src/style.scss @@ -0,0 +1,350 @@ +/** + * I was out the other evening looking at Venus with the setting sun and thought, I wonder where all the planets + * are in relation to each other right now. I knew what an Orrery was, but I'd never built one. So, given my mate + * Donovan's (@donovanh: http://cssanimation.rocks/) penchant for CSS animation, I thought I'd give it a go + * building one in pure CSS. + * + * Many thanks to @aidandore and @iandevlin too for suggestions and improvements + * + * Chin up Pluto. You'll always be a planet to me... + * + * Tady: http://tady.me + * @tadywankenobi + */ + +/** + * Move in a circle without wrapper elements + * Idea by Aryeh Gregor, simplified by Lea Verou, borrowed by me! + */ + +@mixin vp-anim($radius,$pname, $deg: 360deg) { + @-webkit-keyframes rot-#{$pname} { + from { + -webkit-transform: rotate(0deg) + translatey(-$radius) + rotate(0deg); + } + to { + -webkit-transform: rotate(360deg) + translatey(-$radius) + rotate(-$deg); + } + } + @-moz-keyframes rot-#{$pname} { + from { + -moz-transform: rotate(0deg) + translatey(-$radius) + rotate(0deg); + } + to { + -moz-transform: rotate(360deg) + translatey(-$radius) + rotate(-$deg); + } + } + @-keyframes rot-#{$pname} { + from { + transform: rotate(0deg) + translatey(-$radius) + rotate(0deg); + } + to { + transform: rotate(360deg) + translatey(-$radius) + rotate(-$deg); + } + } +} + +$baseUnit: 0.1; // Speed of Orrery. At 1, 1 sec = 1 day +$sunRad: 72px; // Radius of the sun, added to orbit radii +$rFactor: 2; // Adding a radius factor so orbit radii are easier to observe +$middleOffset: 800px; + +$scale: 0.75; // Play around with changing this to change the visible motion default: 0.75 + +$middle: $middleOffset*(1/$scale); + +$planets: ( + ('mer',8.8s*$baseUnit,(6px*$rFactor)+$sunRad,1.75px,#888), + ('ven',22.5s*$baseUnit,(9px*$rFactor)+$sunRad,2.75px,#f5f9be), + ('ear',36.5s*$baseUnit,(15px*$rFactor)+$sunRad,3.5px,#4b94f9), + ('mar',68.7s*$baseUnit,(23px*$rFactor)+$sunRad,3px,#dd411a), + ('jup',433.2s*$baseUnit,(78px*$rFactor)+$sunRad,35px,#eaad3b), + ('sat',1075.9s*$baseUnit,(145px*$rFactor)+$sunRad,29px,#d6cd93), + ('ura',3068.7s*$baseUnit,(288px*$rFactor)+$sunRad,13px,#bfeef2), + ('nep',6019s*$baseUnit,(450px*$rFactor)+$sunRad,12px,#363ed7), + ('plu',9046.5s*$baseUnit,(587px*$rFactor)+$sunRad,1.5px,#963) + ); + +body { + background-color: #012; + background-image: url('https://cssanimation.rocks/starwars/images/bg.jpg'); + background-size: 33%; + background-repeat: repeat; + min-height: 2700px * $scale; +} + + +.system { + position:relative; + top: 0; left: 0; + width:100%; + height:100%; + -webkit-transform: scale($scale); + -moz-transform: scale($scale); + transform: scale($scale); +} + +.sun { + width: $sunRad*2; + height:$sunRad*2; + border-radius: $sunRad; + position:absolute; + top: $middle; + left:50%; + margin: -$sunRad; + //background-color: yellow; + background-image: url('http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg'); + background-size:$sunRad*2; + background-repeat:no-repeat; +} + +@each $planet in $planets { + $name: nth($planet, 1); + $orb: nth($planet,2); + $rad: nth($planet,3); + $prad: nth($planet,4); + $col: nth($planet,5); + + @include vp-anim($rad,$name); + + .#{$name} { + width: $prad * 2; + height: $prad*2; + border-radius:50%; + background-color:$col; + position: absolute; + top: $middle; + left: 50%; + margin: -$prad; + -webkit-animation: rot-#{$name} $orb infinite linear; + -moz-animation: rot-#{$name} $orb infinite linear; + animation: rot-#{$name} $orb infinite linear; + z-index:200; + } + .#{$name}-path { + $orbitPath: $rad*2; + width: $orbitPath; + height: $orbitPath; + border-radius:50%; + z-index:100; + position:absolute; + top: $middle; + left:50%; + margin:-($orbitPath / 2); + border: solid 1px #444; + } +} + +@include vp-anim(7px,lune); + +.lune { + width:2px; + height:2px; + background-color: #fff; + position:absolute; + $lunOrb: 2.7s * $baseUnit; + top: 50%; + left:50%; + margin:-1.5px; + -webkit-animation: rot-lune $lunOrb infinite linear; + -moz-animation: rot-lune $lunOrb infinite linear; + animation: rot-lune $lunOrb infinite linear; +} + +.mar { + background-image: repeating-linear-gradient( + to bottom, + #fff, + #fff 1px, + transparent 1px, + transparent 5px + ); +} + +@include vp-anim(7px,pho); +@include vp-anim(9px,dem); + +.pho, .dem { + width:1px; + height:1px; + background-color: #fff; + position:absolute; + top: 50%; + left:50%; +} + +.pho { + $phoOrb: 1.5s * $baseUnit; // Should be 0.33s but spins like it's having a fit. + margin:-1px; + -webkit-animation: rot-pho $phoOrb infinite linear; + -moz-animation: rot-pho $phoOrb infinite linear; + animation: rot-pho $phoOrb infinite linear; +} + +.dem { + $demOrb: 2s * $baseUnit; // Should be 1.25s, spins too fast + margin:-1px; + -webkit-animation: rot-dem $demOrb infinite linear; + -moz-animation: rot-dem $demOrb infinite linear; + animation: rot-dem $demOrb infinite linear; +} + +$jupR: 35px; +.jove { + width:2px; + height:2px; + background-color: #fff; + position:absolute; + top: $jupR; + left:50%; +} + + +@include vp-anim($jupR + 4px,io); +@include vp-anim($jupR + 6px,eur); +@include vp-anim($jupR + 10px,gan); +@include vp-anim($jupR + 18px,cal); + +.io { + $jioOrb: 2s*$baseUnit; + -webkit-animation: rot-io $jioOrb infinite linear; + -moz-animation: rot-io $jioOrb infinite linear; + animation: rot-io $jioOrb infinite linear; +} + +.eur { + $jeurOrb: 3.5s*$baseUnit; + -webkit-animation: rot-eur $jeurOrb infinite linear; + -moz-animation: rot-eur $jeurOrb infinite linear; + animation: rot-eur $jeurOrb infinite linear; +} + +.gan { + $jganOrb: 7s*$baseUnit; + -webkit-animation: rot-gan $jganOrb infinite linear; + -moz-animation: rot-gan $jganOrb infinite linear; + animation: rot-gan $jganOrb infinite linear; +} + +.cal { + $jcalOrb: 16.5s*$baseUnit; + -webkit-animation: rot-cal $jcalOrb infinite linear; + -moz-animation: rot-cal $jcalOrb infinite linear; + animation: rot-cal $jcalOrb infinite linear; +} + +.jup { + background-image: repeating-linear-gradient( + 6deg, + #797663 22px, + #e1dcde 16px, + #c3a992 30px, + #e9ece2 30px + ); +} + +.spot { + position:absolute; + width:16px;height:12px; + border-radius: 8px / 6px; + top: $jupR+10; + left:50%; + background-color:#bc833b; + box-shadow: 0px 0px 5px #e1dcde; + border:solid 1px #e1dcde; + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + z-index:300; + .nep & { + background-color:darken(#343ec5, 10%); + border: 0; + box-shadow: none; + top: 50%; + left:45%; + width: 10px; + height: 6px; + margin: -2px; + border-radius: 5px / 3px; + border-left:solid 1px #7ed6fe; + } +} + +$satD: 29px * 2; +div[class$="-ring"] { + border-radius: 50%; + position:absolute; + top: 50%; + left:50%; + opacity: 0.7; + $tilt: 45deg; + -webkit-transform: rotatex($tilt); + -moz-transform: rotatex($tilt); + transform: rotatex($tilt); +} + +.a-ring { + $ringD: $satD + 61; + $ringW: 5px; + border:solid $ringW #96866f; + width: $ringD; + height: $ringD; + margin: -($ringD / 2) - $ringW; +} +.b-ring { + $ringD: $satD + 46; + $ringW: 10px; + border:solid $ringW #554c3c; + width: $ringD; + height: $ringD; + margin: -($ringD / 2) - $ringW; +} + +.c-ring { + $ringD: $satD + 37; + $ringW: 9px; + border:solid $ringW #574f4a; + width: $ringD; + height: $ringD; + margin: -($ringD / 2) - $ringW; +} + +.f-ring { + $ringD: $satD + 75; + $ringW: 2px; + border:solid $ringW #908e8d; + width: $ringD; + height: $ringD; + margin: -($ringD / 2) - $ringW; +} + +$uraD: 13px * 2; +.e-ring { + $ringD: $uraD + 50; + $ringW: 7px; + border:solid $ringW #908e8d; + width: $ringD; + height: $ringD; + margin: -($ringD / 2) - $ringW; + $tilt: 0deg; + $axis: 89deg; + -webkit-transform: rotatex($tilt) rotatey($axis) !important; + -moz-transform: rotatex($tilt) rotatey($axis) !important; + transform: rotatex($tilt) rotatey($axis) !important; +} + +.plu, .plu-path { + top: $middle + 287.4px; +} \ No newline at end of file diff --git a/steps-animation/README.md b/steps-animation/README.md new file mode 100755 index 0000000..0c4bba9 --- /dev/null +++ b/steps-animation/README.md @@ -0,0 +1,15 @@ +# 🏃 Steps Sprite Animation + +Интерактивная демонстрация покадровой анимации с использованием CSS-свойства `animation-timing-function: steps()`. Этот метод позволяет оживить спрайт-листы, превращая их в плавную анимацию персонажа. + +### Особенности + +- **Sprite Sheets**: Использование одного изображения (спрайта) для создания многокадровой анимации. +- **Steps Logic**: Применение функции `steps(10)`, которая разбивает движение фона на дискретные кадры, имитируя классическую мультипликацию. +- **Interactive Control**: Возможность изменять скорость анимации и просматривать полную ленту спрайта с помощью встроенных контроллов (JS/jQuery). + +### Технологии + +- **HTML5 / CSS3**: Основная логика анимации и стилизация элементов интерфейса. +- **jQuery**: Используется для управления скоростью (`animation-duration`) и переключения режимов отображения. +- **WebKit Optimization**: Специальные стили для кастомизации ползунков (range input) и чекбоксов в браузерах на движке WebKit. diff --git a/steps-animation/src/index.html b/steps-animation/src/index.html new file mode 100755 index 0000000..263e29a --- /dev/null +++ b/steps-animation/src/index.html @@ -0,0 +1,30 @@ + + + + + Steps Animation + + + + + +
+
+
+
+ + + + + + + diff --git a/steps-animation/src/script.js b/steps-animation/src/script.js new file mode 100755 index 0000000..a827cd9 --- /dev/null +++ b/steps-animation/src/script.js @@ -0,0 +1,26 @@ +if ($.browser.webkit) { + $("html").addClass("WebKit"); +} + +$("#show").change(function () { + $("#animation").toggleClass("showRoll"); +}); + +var labelSide = "right"; + +$("#duration-input").change(function () { + var val = $(this).val(); + var valRounded = Math.round(val * 10) / 10; + var mid = $(this).attr("max") / 2; + $("#frame").css("animation-duration", val + "s"); + $("#roll").css("animation-duration", val + "s"); + $("#duration-label").text(valRounded); + + if (val > mid && labelSide == "right") { + labelSide = "left"; + $("#duration-label").removeClass("isRight").addClass("isLeft"); + } else if (val <= mid && labelSide == "left") { + labelSide = "right"; + $("#duration-label").removeClass("isLeft").addClass("isRight"); + } +}); diff --git a/steps-animation/src/style.css b/steps-animation/src/style.css new file mode 100755 index 0000000..da9b9f1 --- /dev/null +++ b/steps-animation/src/style.css @@ -0,0 +1,226 @@ +/* -------------- Animation -------------- */ + +#animation { + display: inline-block; + position: relative; + text-align: center; +} + + + +/* -------------- Frame -------------- */ + +.showRoll #frame { + border-color: hsl(0,0%,70%); +} + +#frame { + width: 50px; + height: 72px; + border: 1px solid transparent; + background: url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top; + animation: frame-animation 1s steps(10) infinite; +} + +@keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } } + + + +/* -------------- Roll -------------- */ + +.showRoll #roll { + opacity: .2; +} + +#roll { + opacity: 0; + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 500px; + height: 72px; + border: 1px solid hsl(0,0%,70%); + background: hsl(0,0%,100%) url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top; + transition: opacity .3s linear; + animation: roll-animation 1s steps(10) infinite; +} + +@keyframes roll-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-500px); } +} + + + + +/* Global ------------------------------------------------------ */ + +html { + height: 100%; + font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + background: #f0f0f0 url(../img/bg.png); +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0; + width: 100%; + height: 100%; + padding: 50px; + -moz-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + overflow: hidden; + text-align: center; +} + +a { + text-decoration: none; + color: hsl(210,100%,60%); +} + +a:hover { + color: hsl(210,100%,70%); +} + +a:active { + color: hsl(210,100%,50%); +} + +p { + font-size: 11px; + line-height: 1.5; + color: hsl(0,0%,60%); +} + +.hl { + color: hsl(0,0%,20%); +} + +ul { + margin: 40px 0; + list-style: none; + text-align: center; + font-size: 14px; + color: hsl(0,0%,60%); +} +.WebKit ul { + text-align: left; +} + +li { + padding: 5px 0; +} + + +/* Show Sprite Checkbox ------------------------------------------------------ */ + +.WebKit #show { + -webkit-appearance: none; + outline: none; + border-radius: 20px; + width: 20px; + height: 20px; + margin: -2px 6px 0 0; + vertical-align: middle; + border: 10px solid hsl(0,0%,80%); + background: hsl(0,0%,40%); + box-shadow: 0 1px 0 hsla(0,0%,100%,.6); + -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1); +} + +.WebKit #show:checked:active, +.WebKit #show:active { + border: 0px solid hsl(0,0%,80%); + -webkit-transition-duration: .1; +} + +.WebKit #show:checked { + border: 5px solid hsl(0,0%,80%); + box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6); +} + + + + + +/* Animation Duration ------------------------------------------------------ */ + +#duration { + display: inline-block; + position: relative; + margin: -4px 6px 0 0; +} + + +/* Label */ + +#duration-label { + display: none; +} + +.WebKit #duration-label { + position: absolute; + display: block; + z-index: 1; + top: 6px; + font-size: 11px; + color: hsl(0,0%,60%); + text-shadow: 0 1px 0 hsla(0,0%,100%,.3); + pointer-events: none; + -webkit-transition: -webkit-transform .2s cubic-bezier(.26, .08, .15, 1), + color .6s .2s ease-out; +} + +.WebKit #duration-label.isRight { + right: 50%; + margin-right: -20px; + left: auto; + -webkit-transform: translate3d(20px,0,0); +} +.WebKit #duration-label.isLeft { + right: auto; + margin-left: -20px; + left: 50%; + -webkit-transform: translate3d(-20px,0,0); +} + +.WebKit #duration:active #duration-label { + color: hsl(0,0%,30%); + -webkit-transition-delay: 0; +} + + +/* Input */ + +.WebKit #duration-input { + -webkit-appearance: none; + position: relative; + vertical-align: middle; + width: 100px; + border-radius: 20px; + background: hsl(0,0%,80%); + box-shadow: 0 1px 0 hsla(0,0%,100%,.6); + overflow: hidden; + outline: none; +} + +.WebKit #duration-input::-webkit-slider-thumb { + -webkit-appearance: none; + border-radius: 20px; + width: 20px; + height: 20px; + border: 5px solid hsl(0,0%,80%); + background: hsl(0,0%,40%); + box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4); + -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1); +} + +.WebKit #duration-input:active::-webkit-slider-thumb { + border: 0px solid hsl(0,0%,80%); + -webkit-transition-duration: .1; +} \ No newline at end of file