/* ========================================================================== assets/kms-compat-glare.css KAN-197 Блик по ряду совместимости .kmscw. Вариант 03 "Эстафета": косая полоса света идёт по ряду слева направо, и каждая таблетка, пока полоса над ней, поднимает рамку в свой цвет марки. Зачем вообще. Ряд WORKS-WITH это единственное место в хиро, снимающее возражение "а с моим ИИ это работает?". Взгляд до него не доходит: он ниже поля поиска, мельче, приглушённого цвета, за разделителем. Приём показывает пальцем на строку, которую иначе не читают. ===================== ГДЕ ЧТО НАСТРАИВАЕТСЯ ===================== ЗДЕСЬ: КАК БЫСТРО идёт движение и как оно выглядит. В assets/kms-compat-glare.js: КОГДА и КАК ЧАСТО показывать (константы START и PERIOD), а также три паузы петли. Чисел частоты в этом файле НЕТ и быть не должно: иначе каждая правка частоты требует трогать два файла и описание расходится с кодом. ===================================================================== --------------------------------------------------------------------------- СКОРОСТЬ (редакция 2, по правке Kreal): всё движение замедлено РОВНО В ТРИ РАЗА от первой сборки. Замедлять надо было ЦЕЛИКОМ, а не только проезд полосы: время, за которое полоса проходит НАД ОДНОЙ таблеткой, тоже выросло втрое. Оставь мы подсветку на 430 мс - таблетка вспыхивала бы и гасла задолго до того, как свет с неё уйдёт, и связь "свет задел предмет" распалась бы. Поэтому x3 стоит на ТРЁХ величинах сразу: проезд, длительность подсветки, шаг эстафеты. Меняешь одно - пересчитываешь все три. --------------------------------------------------------------------------- ПРАВИЛА, КОТОРЫЕ НЕЛЬЗЯ НАРУШАТЬ - ПЕТЛЮ НЕ ПЕРЕНОСИТЬ СЮДА. animation-iteration-count:infinite выглядит как упрощение, но оставляет слой и will-change:transform на композиторе навсегда. Сейчас JS создаёт слой на каждый проход и удаляет его. - У анимации .kmscw__chip НЕТ fill-mode, и это не забывчивость. forwards или both заморозили бы border-color на значении ключевого кадра и убили :hover у ссылки навсегда. Кадры 0% и 100% дословно повторяют штатные значения из kms-compat-row.css, поэтому стыка не видно. При петле это важнее втройне: заморозка накапливалась бы от прохода к проходу. - pointer-events:none на слое обязателен. Таблетки это ссылки, и теперь слой появляется регулярно, а не один раз. - Ниже 750px эстафета выключена намеренно. Ряд там переносится на 2-3 строки (замерено на 375), порядок таблеток перестаёт совпадать с их положением на экране, и волна по индексу читается как случайное мигание. Полоса остаётся. ========================================================================== */ .kmscw{position:relative} .kmscw__glare{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2} /* Полоса. Ширина 15% ряда, проезд от -170% до 840% СОБСТВЕННОЙ ширины: -170% x 15% = -25,5% ряда (правый край на -10,5%, целиком за кадром слева), 840% x 15% = 126% ряда (левый край за кадром справа). Ни в одном кадре полоса не обрезана краем ряда. Геометрия при замедлении не менялась, менялось только время. top/bottom -30% это запас под наклон: при 14 градусах и высоте ряда 32px снос на краях около 6px, без запаса в углах видна ступенька. */ .kmscw__glare::before{ content:""; position:absolute; top:-30%;bottom:-30%;left:0; width:15%; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 32%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.05) 68%, rgba(255,255,255,0) 100%); transform:translate3d(-170%,0,0) skewX(-14deg); will-change:transform } /* ПРОЕЗД: 1050 мс x3 = 3150 мс. Это самая длинная анимация файла. Меняешь её - сверься с инвариантом в шапке kms-compat-glare.js: она обязана оставаться меньше LIFE. */ .kmscw.is-glaring .kmscw__glare::before{ animation:kmscw-sweep 3150ms cubic-bezier(.35,0,.25,1) forwards } @keyframes kmscw-sweep{ from{transform:translate3d(-170%,0,0) skewX(-14deg)} to {transform:translate3d( 840%,0,0) skewX(-14deg)} } /* Индекс таблетки. Через nth-child, а не инлайновым style: инлайновые style на элементах .kmscw__* запрещены правилами KAN-153. Ряд всегда шесть позиций, они захардкожены в kms-compat-row.liquid. */ .kmscw__item:nth-child(1){--kmscw-i:0} .kmscw__item:nth-child(2){--kmscw-i:1} .kmscw__item:nth-child(3){--kmscw-i:2} .kmscw__item:nth-child(4){--kmscw-i:3} .kmscw__item:nth-child(5){--kmscw-i:4} .kmscw__item:nth-child(6){--kmscw-i:5} /* Задержка выведена из скорости полосы, а не подобрана на глаз. Пересчёт под проезд 3150 мс: полоса проходит 151,5% ширины ряда за 3150 мс, её центр пересекает левый край ряда на 375-й мс и правый на 2454-й. Таблетки стоят примерно на 25-86% ширины, значит свет доходит до них с 894-й по 2160-ю мс, шаг 252 мс (было 84, то есть ровно x3). Пик подсветки наступает через 0,38 x 1290 = 490 мс после старта, поэтому старт = приход света минус 490, то есть 405 мс + i x 252 мс. */ .kmscw.is-glaring .kmscw__chip{ animation:kmscw-lift 1290ms ease-out; animation-delay:calc(var(--kmscw-i, 0) * 252ms + 405ms) } @keyframes kmscw-lift{ 0%{ border-color:rgba(var(--kmscw-t),.40); background-color:rgba(var(--kmscw-t),.09); color:#c4c4d4; box-shadow:0 0 0 0 rgba(var(--kmscw-t),0) } 38%{ border-color:rgba(var(--kmscw-t),.95); background-color:rgba(var(--kmscw-t),.18); color:#fff; box-shadow:0 0 16px -3px rgba(var(--kmscw-t),.62) } 100%{ border-color:rgba(var(--kmscw-t),.40); background-color:rgba(var(--kmscw-t),.09); color:#c4c4d4; box-shadow:0 0 0 0 rgba(var(--kmscw-t),0) } } /* На мобильном путь полосы короче, поэтому и время меньше: та же скорость на коротком ряду читается как "грузится". 700 мс x3 = 2100 мс. Эстафета снята, см. шапку. */ @media screen and (max-width:749px){ .kmscw.is-glaring .kmscw__glare::before{animation-duration:2100ms} .kmscw.is-glaring .kmscw__chip{animation:none} } /* Мигание в периферии это ровно тот класс движения, из-за которого эту настройку и включают. При петле тем более. Выключаем целиком. */ @media (prefers-reduced-motion:reduce){ .kmscw__glare{display:none} .kmscw.is-glaring .kmscw__chip{animation:none} }