mirror of
https://github.com/wasrusgen/zov-tech.git
synced 2026-06-03 16:24:50 +00:00
splash: убрал wobble, 16 опилок, добавил вращающийся диск-кольцо
- Убрана анимация sawWobble — пила больше не качается - Опилки расширены с 8 до 16 (8 влево + 8 вправо от пилы) - Новый saw-rotor SVG поверх саблона: · кольцо с пунктиром (stroke-dasharray «3 4.5») · внутреннее тонкое кольцо (opacity 0.35) · вращается 3.5s/оборот линейно · позиция top:22% left:50% width:36% — над диском пилы Cache bust v=20260513zl.
This commit is contained in:
wasrusgen
parent
e5c51a844b
commit
ec3929ae94
@ -222,8 +222,6 @@ button { font: inherit; cursor: pointer; border: none; background: none; color:
|
||||
.brand-logo-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
animation: sawWobble 5.5s ease-in-out infinite;
|
||||
transform-origin: 50% 35%; /* центр диска пилы */
|
||||
}
|
||||
.brand-logo {
|
||||
width: 70%;
|
||||
@ -235,10 +233,28 @@ button { font: inherit; cursor: pointer; border: none; background: none; color:
|
||||
filter: drop-shadow(0 6px 16px rgba(44, 62, 80, 0.18));
|
||||
}
|
||||
|
||||
/* Опилки — точки летают вокруг пилы */
|
||||
/* Вращающийся диск-кольцо поверх саблона.
|
||||
Позиция и размер подобраны под расположение диска пилы в лого. */
|
||||
.saw-rotor {
|
||||
position: absolute;
|
||||
top: 22%; /* центр диска пилы примерно тут */
|
||||
left: 50%;
|
||||
width: 36%;
|
||||
aspect-ratio: 1 / 1;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
opacity: 0.55;
|
||||
animation: rotorSpin 3.5s linear infinite;
|
||||
}
|
||||
@keyframes rotorSpin {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Опилки — 16 точек летают вокруг пилы */
|
||||
.splash-dust {
|
||||
position: absolute;
|
||||
inset: -10% -20% -10% -20%;
|
||||
inset: -10% -25% -10% -25%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.splash-dust .dust {
|
||||
@ -250,26 +266,29 @@ button { font: inherit; cursor: pointer; border: none; background: none; color:
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
/* 8 точек с разными траекториями */
|
||||
.splash-dust .d1 { left: 30%; top: 50%; animation: dustFly 3.6s ease-out 0s infinite; --dx:-30px; --dy:-50px; }
|
||||
.splash-dust .d2 { left: 35%; top: 45%; animation: dustFly 4.2s ease-out 0.4s infinite; --dx:-50px; --dy:-30px; }
|
||||
.splash-dust .d3 { left: 25%; top: 55%; animation: dustFly 3.2s ease-out 0.8s infinite; --dx:-60px; --dy:20px; }
|
||||
.splash-dust .d4 { left: 40%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx:-20px; --dy:50px; }
|
||||
.splash-dust .d5 { left: 65%; top: 55%; animation: dustFly 3.8s ease-out 0.6s infinite; --dx: 50px; --dy: 30px; }
|
||||
.splash-dust .d6 { left: 60%; top: 50%; animation: dustFly 4.6s ease-out 1.0s infinite; --dx: 60px; --dy:-20px; }
|
||||
.splash-dust .d7 { left: 70%; top: 45%; animation: dustFly 3.4s ease-out 0.3s infinite; --dx: 40px; --dy:-50px; }
|
||||
.splash-dust .d8 { left: 75%; top: 60%; animation: dustFly 4.0s ease-out 0.9s infinite; --dx: 70px; --dy: 40px; }
|
||||
/* 16 точек с разными траекториями (8 влево, 8 вправо) */
|
||||
.splash-dust .d1 { left: 30%; top: 45%; animation: dustFly 3.6s ease-out 0.0s infinite; --dx:-30px; --dy:-55px; }
|
||||
.splash-dust .d2 { left: 35%; top: 50%; animation: dustFly 4.2s ease-out 0.4s infinite; --dx:-55px; --dy:-30px; }
|
||||
.splash-dust .d3 { left: 25%; top: 55%; animation: dustFly 3.2s ease-out 0.8s infinite; --dx:-65px; --dy: 15px; }
|
||||
.splash-dust .d4 { left: 32%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx:-25px; --dy: 55px; }
|
||||
.splash-dust .d5 { left: 38%; top: 40%; animation: dustFly 4.5s ease-out 0.6s infinite; --dx:-40px; --dy:-70px; }
|
||||
.splash-dust .d6 { left: 20%; top: 50%; animation: dustFly 3.8s ease-out 1.1s infinite; --dx:-70px; --dy:-15px; }
|
||||
.splash-dust .d7 { left: 28%; top: 65%; animation: dustFly 4.4s ease-out 0.5s infinite; --dx:-50px; --dy: 40px; }
|
||||
.splash-dust .d8 { left: 22%; top: 38%; animation: dustFly 3.5s ease-out 0.9s infinite; --dx:-60px; --dy:-65px; }
|
||||
.splash-dust .d9 { left: 70%; top: 45%; animation: dustFly 3.4s ease-out 0.3s infinite; --dx: 40px; --dy:-55px; }
|
||||
.splash-dust .d10 { left: 65%; top: 50%; animation: dustFly 4.0s ease-out 0.7s infinite; --dx: 60px; --dy:-25px; }
|
||||
.splash-dust .d11 { left: 75%; top: 55%; animation: dustFly 3.2s ease-out 1.0s infinite; --dx: 70px; --dy: 15px; }
|
||||
.splash-dust .d12 { left: 68%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx: 25px; --dy: 55px; }
|
||||
.splash-dust .d13 { left: 62%; top: 40%; animation: dustFly 4.5s ease-out 0.6s infinite; --dx: 45px; --dy:-65px; }
|
||||
.splash-dust .d14 { left: 80%; top: 50%; animation: dustFly 3.8s ease-out 0.1s infinite; --dx: 75px; --dy:-15px; }
|
||||
.splash-dust .d15 { left: 72%; top: 65%; animation: dustFly 4.4s ease-out 0.4s infinite; --dx: 55px; --dy: 40px; }
|
||||
.splash-dust .d16 { left: 78%; top: 38%; animation: dustFly 3.5s ease-out 0.8s infinite; --dx: 65px; --dy:-65px; }
|
||||
|
||||
@keyframes dustFly {
|
||||
0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
|
||||
0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
|
||||
15% { opacity: 0.55; }
|
||||
60% { opacity: 0.35; }
|
||||
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes sawWobble {
|
||||
0%, 100% { transform: rotate(-1deg); }
|
||||
50% { transform: rotate(1.5deg); }
|
||||
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
|
||||
}
|
||||
.brand-tagline-gold {
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
|
||||
@ -12,37 +12,42 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Caveat:wght@500;700&display=swap">
|
||||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||
<link rel="stylesheet" href="assets/styles.css?v=20260513zk">
|
||||
<link rel="stylesheet" href="assets/podbor.css?v=20260513zk">
|
||||
<link rel="stylesheet" href="assets/styles.css?v=20260513zl">
|
||||
<link rel="stylesheet" href="assets/podbor.css?v=20260513zl">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Splash — лого @wasrusgen1 + опилки + wobble -->
|
||||
<!-- Splash — лого @wasrusgen1 + опилки (16) + вращающийся диск -->
|
||||
<div class="loader splash" id="splash">
|
||||
<div class="brand-logo-wrap">
|
||||
<img class="brand-logo" src="assets/wasrusgen-logo.svg?v=20260513zk" alt="@wasrusgen1">
|
||||
<img class="brand-logo" src="assets/wasrusgen-logo.svg?v=20260513zl" alt="@wasrusgen1">
|
||||
<!-- Вращающийся диск-кольцо поверх саблона -->
|
||||
<svg class="saw-rotor" viewBox="-50 -50 100 100" aria-hidden="true">
|
||||
<circle r="40" cx="0" cy="0" fill="none" stroke="#2C3E50" stroke-width="3.2" stroke-dasharray="3 4.5"/>
|
||||
<circle r="33" cx="0" cy="0" fill="none" stroke="#2C3E50" stroke-width="1" opacity="0.35"/>
|
||||
</svg>
|
||||
<div class="splash-dust" aria-hidden="true">
|
||||
<span class="dust d1"></span>
|
||||
<span class="dust d2"></span>
|
||||
<span class="dust d3"></span>
|
||||
<span class="dust d4"></span>
|
||||
<span class="dust d5"></span>
|
||||
<span class="dust d6"></span>
|
||||
<span class="dust d7"></span>
|
||||
<span class="dust d8"></span>
|
||||
<span class="dust d1"></span> <span class="dust d2"></span>
|
||||
<span class="dust d3"></span> <span class="dust d4"></span>
|
||||
<span class="dust d5"></span> <span class="dust d6"></span>
|
||||
<span class="dust d7"></span> <span class="dust d8"></span>
|
||||
<span class="dust d9"></span> <span class="dust d10"></span>
|
||||
<span class="dust d11"></span> <span class="dust d12"></span>
|
||||
<span class="dust d13"></span> <span class="dust d14"></span>
|
||||
<span class="dust d15"></span> <span class="dust d16"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loader-bar"></div>
|
||||
<div class="brand-tagline-gold">CRM</div>
|
||||
</div>
|
||||
<main id="app"></main>
|
||||
<script src="assets/icons.js?v=20260513zk"></script>
|
||||
<script src="assets/podbor.config.js?v=20260513zk"></script>
|
||||
<script src="assets/podbor.picts.js?v=20260513zk"></script>
|
||||
<script src="assets/podbor.js?v=20260513zk"></script>
|
||||
<script src="assets/clients.js?v=20260513zk"></script>
|
||||
<script src="assets/zamer-picts.js?v=20260513zk"></script>
|
||||
<script src="assets/measurements.js?v=20260513zk"></script>
|
||||
<script src="assets/request.js?v=20260513zk"></script>
|
||||
<script src="assets/app.js?v=20260513zk"></script>
|
||||
<script src="assets/icons.js?v=20260513zl"></script>
|
||||
<script src="assets/podbor.config.js?v=20260513zl"></script>
|
||||
<script src="assets/podbor.picts.js?v=20260513zl"></script>
|
||||
<script src="assets/podbor.js?v=20260513zl"></script>
|
||||
<script src="assets/clients.js?v=20260513zl"></script>
|
||||
<script src="assets/zamer-picts.js?v=20260513zl"></script>
|
||||
<script src="assets/measurements.js?v=20260513zl"></script>
|
||||
<script src="assets/request.js?v=20260513zl"></script>
|
||||
<script src="assets/app.js?v=20260513zl"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user