diff --git a/README.md b/README.md index dd7d762..7085bb0 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,16 @@ ## Обзор коллекции -| Превью | Компонент | Стиль | Особенности | -| :----- | :----------------------------------- | :----------- | :------------------------------------------ | -| 🎰 | [`Rolling Letters`](./rolling-text/) | Текстовый | Эффект барабана и каскадное выпадение букв. | -| 🧬 | [`Helix DNA`](./helix-dna/) | 3D / Научный | Сложная анимация вращения двойной спирали. | -| ⚔️ | [`Lightsaber Fight`](./lightsaber/) | Креатив | Мини-сюжет сражения на мечах с искрами. | -| 🥞 | [`Pancake Cooking`](./pancake/) | Сюжетный | Детальная анимация подбрасывания блинчика. | -| 🎾 | [`Pong Game`](./pong-game/) | Ретро | Минималистичный геймплей легендарной игры. | +| Превью | Компонент | Стиль | Особенности | +| :----- | :------------------------------------ | :----------- | :------------------------------------------- | +| 🎰 | [`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 | ## Технологии diff --git a/dna/README.md b/dna/README.md new file mode 100755 index 0000000..f9225f5 --- /dev/null +++ b/dna/README.md @@ -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**: Включены префиксы для стабильной работы в старых версиях браузеров. diff --git a/dna/src/index.html b/dna/src/index.html new file mode 100755 index 0000000..d04ac41 --- /dev/null +++ b/dna/src/index.html @@ -0,0 +1,26 @@ + + + + + DNA + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/dna/src/style.css b/dna/src/style.css new file mode 100755 index 0000000..f144429 --- /dev/null +++ b/dna/src/style.css @@ -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); + } +} \ No newline at end of file diff --git a/dna/src/style.scss b/dna/src/style.scss new file mode 100755 index 0000000..3fe9a9b --- /dev/null +++ b/dna/src/style.scss @@ -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);} +} \ No newline at end of file diff --git a/dots-pulsating/README.md b/dots-pulsating/README.md new file mode 100755 index 0000000..3ad6727 --- /dev/null +++ b/dots-pulsating/README.md @@ -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`. diff --git a/dots-pulsating/src/index.html b/dots-pulsating/src/index.html new file mode 100755 index 0000000..15ce5dc --- /dev/null +++ b/dots-pulsating/src/index.html @@ -0,0 +1,19 @@ + + + + + Dots Pulsating Loader + + + + + +
+ + + +
+ + + + diff --git a/dots-pulsating/src/style.css b/dots-pulsating/src/style.css new file mode 100755 index 0000000..6e903ba --- /dev/null +++ b/dots-pulsating/src/style.css @@ -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); } +} \ No newline at end of file diff --git a/rotating-text/README.md b/rotating-text/README.md new file mode 100755 index 0000000..19c347a --- /dev/null +++ b/rotating-text/README.md @@ -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**. diff --git a/rotating-text/src/index.html b/rotating-text/src/index.html new file mode 100755 index 0000000..d996a27 --- /dev/null +++ b/rotating-text/src/index.html @@ -0,0 +1,25 @@ + + + + + CodePen - Rotating Text + + + + + +
+

CSS Animation is

+

+ awesome. + beautiful. + creative. + fabulous. + interesting. +

+
+ + + + + diff --git a/rotating-text/src/script.js b/rotating-text/src/script.js new file mode 100755 index 0000000..623e078 --- /dev/null +++ b/rotating-text/src/script.js @@ -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); \ No newline at end of file diff --git a/rotating-text/src/style.css b/rotating-text/src/style.css new file mode 100755 index 0000000..2a93c07 --- /dev/null +++ b/rotating-text/src/style.css @@ -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; +} \ No newline at end of file