feat: добавить лоадеры Dots, Rotating Text и DNA Strain
— Добавлен dots-pulsating (минимализм на CSS-переменных) — Добавлен rotating-text (эффект переворота букв с использованием JS) — Добавлен dna-strain (научная анимация цепочки ДНК) — Обновлен общий README.md: коллекция расширена до 8 элементов
This commit is contained in:
@@ -6,12 +6,15 @@
|
||||
## Обзор коллекции
|
||||
|
||||
| Превью | Компонент | Стиль | Особенности |
|
||||
| :----- | :----------------------------------- | :----------- | :------------------------------------------ |
|
||||
| :----- | :------------------------------------ | :----------- | :------------------------------------------- |
|
||||
| 🎰 | [`Rolling Letters`](./rolling-text/) | Текстовый | Эффект барабана и каскадное выпадение букв. |
|
||||
| 🧬 | [`Helix DNA`](./helix-dna/) | 3D / Научный | Сложная анимация вращения двойной спирали. |
|
||||
| ⚔️ | [`Lightsaber Fight`](./lightsaber/) | Креатив | Мини-сюжет сражения на мечах с искрами. |
|
||||
| 🥞 | [`Pancake Cooking`](./pancake/) | Сюжетный | Детальная анимация подбрасывания блинчика. |
|
||||
| 🎾 | [`Pong Game`](./pong-game/) | Ретро | Минималистичный геймплей легендарной игры. |
|
||||
| ⚪ | [`Dots Pulsating`](./dots-pulsating/) | Минимализм | Настройка через CSS Variables, эффект волны. |
|
||||
| 🔄 | [`Rotating Text`](./rotating-text/) | Текстовый | 3D-переворот букв, выбор цветов. |
|
||||
| 🧬 | [`DNA Strain`](./dna/) | Научный | Плоская анимация вращения цепочки. Pure CSS |
|
||||
|
||||
## Технологии
|
||||
|
||||
|
||||
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# 🧬 DNA Strain Loader
|
||||
|
||||
Элегантная двумерная анимация цепочки ДНК, реализованная на чистом CSS. Имитирует вращение за счет динамического изменения ширины соединительных линий и масштабирования узлов.
|
||||
|
||||
### Особенности
|
||||
|
||||
- **Pure CSS**: Вся логика вращения построена на `@keyframes` без использования сторонних скриптов.
|
||||
- **Pseudo-elements**: Узлы цепочки реализованы через `:before` и `:after`, что минимизирует количество HTML-разметки.
|
||||
- **Cascading Delay**: Эффект плавной волны достигается за счет точечной настройки `animation-delay` для 12 последовательных элементов.
|
||||
|
||||
### Технические детали
|
||||
|
||||
- **Rotation Illusion**: Анимация `rotate-strain` циклически меняет ширину линии от 155px до 0.
|
||||
- **Sync Scaling**: Узлы меняют размер (`scale`) и положение синхронно с линией, создавая иллюзию объема.
|
||||
- **Webkit Support**: Включены префиксы для стабильной работы в старых версиях браузеров.
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DNA</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<div class="strain"></div>
|
||||
<!-- partial -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+228
@@ -0,0 +1,228 @@
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #292929;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.strain {
|
||||
width: 155px;
|
||||
height: 1px;
|
||||
background-color: #dbdbdb;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
margin-top: 28px;
|
||||
margin-bottom: 28px;
|
||||
-webkit-animation-name: rotate-strain;
|
||||
animation-name: rotate-strain;
|
||||
-webkit-animation-duration: 1.7s;
|
||||
animation-duration: 1.7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.strain:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: #13b6e2;
|
||||
left: 0;
|
||||
margin-top: -9px;
|
||||
margin-left: -9px;
|
||||
-webkit-animation-name: strain-size-left;
|
||||
animation-name: strain-size-left;
|
||||
-webkit-animation-duration: 1.7s;
|
||||
animation-duration: 1.7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.strain:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: #13b6e2;
|
||||
right: 0;
|
||||
margin-top: -9px;
|
||||
margin-right: -9px;
|
||||
-webkit-animation-name: strain-size-right;
|
||||
animation-name: strain-size-right;
|
||||
-webkit-animation-duration: 1.7s;
|
||||
animation-duration: 1.7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.strain:nth-child(1), .strain:nth-child(1):before, .strain:nth-child(1):after {
|
||||
-webkit-animation-delay: 0.15s;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.strain:nth-child(2), .strain:nth-child(2):before, .strain:nth-child(2):after {
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.strain:nth-child(3), .strain:nth-child(3):before, .strain:nth-child(3):after {
|
||||
-webkit-animation-delay: 0.45s;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
.strain:nth-child(4), .strain:nth-child(4):before, .strain:nth-child(4):after {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.strain:nth-child(5), .strain:nth-child(5):before, .strain:nth-child(5):after {
|
||||
-webkit-animation-delay: 0.75s;
|
||||
animation-delay: 0.75s;
|
||||
}
|
||||
.strain:nth-child(6), .strain:nth-child(6):before, .strain:nth-child(6):after {
|
||||
-webkit-animation-delay: 0.9s;
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
.strain:nth-child(7), .strain:nth-child(7):before, .strain:nth-child(7):after {
|
||||
-webkit-animation-delay: 1.05s;
|
||||
animation-delay: 1.05s;
|
||||
}
|
||||
.strain:nth-child(8), .strain:nth-child(8):before, .strain:nth-child(8):after {
|
||||
-webkit-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
.strain:nth-child(9), .strain:nth-child(9):before, .strain:nth-child(9):after {
|
||||
-webkit-animation-delay: 1.35s;
|
||||
animation-delay: 1.35s;
|
||||
}
|
||||
.strain:nth-child(10), .strain:nth-child(10):before, .strain:nth-child(10):after {
|
||||
-webkit-animation-delay: 1.5s;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
.strain:nth-child(11), .strain:nth-child(11):before, .strain:nth-child(11):after {
|
||||
-webkit-animation-delay: 1.65s;
|
||||
animation-delay: 1.65s;
|
||||
}
|
||||
.strain:nth-child(12), .strain:nth-child(12):before, .strain:nth-child(12):after {
|
||||
-webkit-animation-delay: 1.8s;
|
||||
animation-delay: 1.8s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate-strain {
|
||||
0% {
|
||||
width: 155px;
|
||||
}
|
||||
25% {
|
||||
width: 0;
|
||||
}
|
||||
50% {
|
||||
width: 155px;
|
||||
}
|
||||
75% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-strain {
|
||||
0% {
|
||||
width: 155px;
|
||||
}
|
||||
25% {
|
||||
width: 0;
|
||||
}
|
||||
50% {
|
||||
width: 155px;
|
||||
}
|
||||
75% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes strain-size-left {
|
||||
0% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1) translateX(155px);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
}
|
||||
@keyframes strain-size-left {
|
||||
0% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1) translateX(155px);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes strain-size-right {
|
||||
0% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1) translateX(-155px);
|
||||
}
|
||||
75% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
}
|
||||
@keyframes strain-size-right {
|
||||
0% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1) translateX(-155px);
|
||||
}
|
||||
75% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
}
|
||||
Executable
+101
@@ -0,0 +1,101 @@
|
||||
$bg: #292929;
|
||||
$blue: #13b6e2;
|
||||
$gray: #dbdbdb;
|
||||
|
||||
@mixin animation-delay($time) {
|
||||
animation-delay: $time;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $bg;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.strain {
|
||||
width: 155px;
|
||||
height: 1px;
|
||||
background-color: $gray;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
margin-top: 28px;
|
||||
margin-bottom: 28px;
|
||||
animation-name: rotate-strain;
|
||||
animation-duration: 1.7s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-play-state: running;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: $blue;
|
||||
left: 0;
|
||||
margin-top: -9px;
|
||||
margin-left: -9px;
|
||||
animation-name: strain-size-left;
|
||||
animation-duration: 1.7s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: $blue;
|
||||
right: 0;
|
||||
margin-top: -9px;
|
||||
margin-right: -9px;
|
||||
animation-name: strain-size-right;
|
||||
animation-duration: 1.7s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
&:nth-child(#{$i}), &:nth-child(#{$i}):before, &:nth-child(#{$i}):after {
|
||||
@include animation-delay((.15s * $i));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-strain {
|
||||
0% {width: 155px;}
|
||||
25% {width: 0;}
|
||||
50% {width: 155px;}
|
||||
75% {width: 0;}
|
||||
100% {width: 155px;}
|
||||
}
|
||||
|
||||
@keyframes strain-size-left {
|
||||
0% {transform: scale(1) translateX(0px);}
|
||||
25% {transform: scale(.5);}
|
||||
50% {transform: scale(1) translateX(155px);}
|
||||
75% {transform: scale(1.5);}
|
||||
100% {transform: scale(1) translateX(0px);}
|
||||
}
|
||||
|
||||
@keyframes strain-size-right {
|
||||
0% {transform: scale(1) translateX(0px);}
|
||||
25% {transform: scale(1.5);}
|
||||
50% {transform: scale(1) translateX(-155px);}
|
||||
75% {transform: scale(.5);}
|
||||
100% {transform: scale(1) translateX(0px);}
|
||||
}
|
||||
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# ⚪ Dots Pulsating Loader
|
||||
|
||||
Лаконичный и легкий индикатор загрузки из трех пульсирующих точек. Реализован на чистом CSS с использованием переменных для быстрой настройки.
|
||||
|
||||
### Особенности
|
||||
|
||||
- **Pure CSS**: Работает без JavaScript, используя стандартные `@keyframes`.
|
||||
- **CSS Variables**: Цвет фона, цвет точек и их размер легко меняются через `:root` (переменные `--main-color`, `--point-color`, `--size`).
|
||||
- **Smooth Animation**: Эффект «волны» достигается за счет последовательной задержки (`animation-delay`) для каждой точки.
|
||||
|
||||
### Технические детали
|
||||
|
||||
- **Scale Effect**: Анимация плавно увеличивает размер точек в 2 раза (`transform: scale(2)`).
|
||||
- **Flexbox Layout**: Идеальное центрирование по вертикали и горизонтали на весь экран.
|
||||
- **Fixed Position**: Лоадер перекрывает весь контент за счет `position: fixed` и высокого `z-index`.
|
||||
Executable
+19
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dots Pulsating Loader</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div class="loader">
|
||||
<span class="loader__element"></span>
|
||||
<span class="loader__element"></span>
|
||||
<span class="loader__element"></span>
|
||||
</div>
|
||||
<!-- partial -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+40
@@ -0,0 +1,40 @@
|
||||
:root {
|
||||
--main-color: #ecf0f1;
|
||||
--point-color: #555;
|
||||
--size: 5px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
background-color: var(--main-color);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.loader__element {
|
||||
border-radius: 100%;
|
||||
border: var(--size) solid var(--point-color);
|
||||
margin: calc(var(--size)*2);
|
||||
}
|
||||
|
||||
.loader__element:nth-child(1) {
|
||||
animation: preloader .6s ease-in-out alternate infinite;
|
||||
}
|
||||
.loader__element:nth-child(2) {
|
||||
animation: preloader .6s ease-in-out alternate .2s infinite;
|
||||
}
|
||||
|
||||
.loader__element:nth-child(3) {
|
||||
animation: preloader .6s ease-in-out alternate .4s infinite;
|
||||
}
|
||||
|
||||
@keyframes preloader {
|
||||
100% { transform: scale(2); }
|
||||
}
|
||||
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# 🔄 Rotating Text 3D
|
||||
|
||||
Продвинутая анимация смены слов с эффектом 3D-вращения каждой отдельной буквы. Идеально подходит для динамических заголовков или креативных загрузочных экранов.
|
||||
|
||||
### Особенности
|
||||
|
||||
- **3D Letter Flip**: Буквы переворачиваются по оси X, создавая объемный эффект «барабана».
|
||||
- **Dynamic JS**: Скрипт автоматически разбивает слова на отдельные символы (`span`), что позволяет использовать любые слова без ручной правки HTML.
|
||||
- **Color Themes**: Предусмотрено 5 ярких цветовых схем (Emerald, Peter River, Wisteria и др.).
|
||||
|
||||
### Технологии
|
||||
|
||||
- **CSS3 Transforms**: Использование `rotateX` и `transform-origin` для глубины.
|
||||
- **Vanilla JS**: Чистый JavaScript для управления таймингами и переключения слов.
|
||||
- **Google Fonts**: Подключен современный шрифт **Lato**.
|
||||
Executable
+25
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CodePen - Rotating Text</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div class="rotating-text">
|
||||
<p>CSS Animation is</p>
|
||||
<p>
|
||||
<span class="word alizarin">awesome.</span>
|
||||
<span class="word wisteria">beautiful.</span>
|
||||
<span class="word peter-river">creative.</span>
|
||||
<span class="word emerald">fabulous.</span>
|
||||
<span class="word sun-flower">interesting.</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- partial -->
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+37
@@ -0,0 +1,37 @@
|
||||
"use strict";
|
||||
let words = document.querySelectorAll(".word");
|
||||
words.forEach(word => {
|
||||
let letters = word.textContent.split("");
|
||||
word.textContent = "";
|
||||
letters.forEach(letter => {
|
||||
let span = document.createElement("span");
|
||||
span.textContent = letter;
|
||||
span.className = "letter";
|
||||
word.append(span);
|
||||
});
|
||||
});
|
||||
let currentWordIndex = 0;
|
||||
let maxWordIndex = words.length - 1;
|
||||
words[currentWordIndex].style.opacity = "1";
|
||||
let rotateText = () => {
|
||||
let currentWord = words[currentWordIndex];
|
||||
let nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
|
||||
// rotate out letters of current word
|
||||
Array.from(currentWord.children).forEach((letter, i) => {
|
||||
setTimeout(() => {
|
||||
letter.className = "letter out";
|
||||
}, i * 80);
|
||||
});
|
||||
// reveal and rotate in letters of next word
|
||||
nextWord.style.opacity = "1";
|
||||
Array.from(nextWord.children).forEach((letter, i) => {
|
||||
letter.className = "letter behind";
|
||||
setTimeout(() => {
|
||||
letter.className = "letter in";
|
||||
}, 340 + i * 80);
|
||||
});
|
||||
currentWordIndex =
|
||||
currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
|
||||
};
|
||||
rotateText();
|
||||
setInterval(rotateText, 4000);
|
||||
Executable
+59
@@ -0,0 +1,59 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:600);
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.rotating-text {
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
.rotating-text p {
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rotating-text p .word {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
}
|
||||
.rotating-text p .word .letter {
|
||||
transform-origin: center center 25px;
|
||||
}
|
||||
.rotating-text p .word .letter.out {
|
||||
transform: rotateX(90deg);
|
||||
transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
|
||||
}
|
||||
.rotating-text p .word .letter.in {
|
||||
transition: 0.38s ease;
|
||||
}
|
||||
.rotating-text p .word .letter.behind {
|
||||
transform: rotateX(-90deg);
|
||||
}
|
||||
|
||||
.alizarin {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.wisteria {
|
||||
color: #8e44ad;
|
||||
}
|
||||
|
||||
.peter-river {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.emerald {
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.sun-flower {
|
||||
color: #f1c40f;
|
||||
}
|
||||
Reference in New Issue
Block a user