Задать вопрос
Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (20)

Лучшие ответы пользователя

Все ответы (31)
  • Как в CSS остановить одну анимацию и сразу запустить вторую для одного элемента?

    @ImagineTables
    Если правильно понял вопрос, попробуйте это (придётся подписаться на событие focusin):

    // Resets CSS animation based on keyframes.
    System.resetAnimation = function (elements)
    {
    	elements.forEach(element =>
    	{
    		element.style.animation = 'none';
    		element.offsetHeight; // Trigger reflow.
    		element.style.animation = null;
    	});
    }


    Опять же, если я понял ваш вопрос правильно, можно обе анимации объединить на основе переменных, а в нужный момент задавать значение переменной, управляющее ходом анимации, и сбрасывать её. Примерно так:

    const map = $('.map');
    map
    	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
    	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
    	.css('--speed', Math.abs(position.y).toString());
    
    System.resetAnimation([map[0]]);


    @keyframes move-map-bg_map
    {
    	from
    	{
    		background-position-y: var(--current-position-y);
    	}
    
    	to
    	{
    		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
    	}
    }


    Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.
    Ответ написан
    Комментировать
  • Как настроить английскую раскладку для русскоязычного пользователя в Windows?

    @ImagineTables
    1. Качаете Microsoft Keyboard Layout Creator (MSKLC). В данный момент ссылка на него такая: https://www.microsoft.com/en-us/download/details.a...

    2. Создаёте абсолютно любую раскладку, какая нужна. Для каждого языка (ru, en) — нужна отдельная раскладка.

    3. Компилируете. На выходе получается exe'шник.

    4. Устанавливаете в системе свою раскладку как главную для русского/английского языков. Удалить базовую раскладку не выйдет — при удалении она восстанавливается. Как ни странно, даже в Windows 11 это не мешает её игнорировать и всё работает как надо.

    Бонус. Опыт показал, что удобно добавить на Ctrl + верхние цифры всякую типографику: ❤«»€©–—•←→↓↑. Кроме того, можно повесить на Ctrl + пробел nbsp (удобно добавлять его вокруг тире при печати), на Ctrl + точку — многоточие (…), а в русской раскладке заменить запятую в цифроблоке на точку (как в английской), чтобы было удобно вводить десятичные дроби.
    Ответ написан
    8 комментариев
  • Как в файлах формата mhtml запретить переход по ссылкам?

    @ImagineTables
    1. Сохранить страницу не как mhtml, а как HTML с изображениями.
    2. Открыть сохранённый файл .htm в текстовом редакторе, найти все вхождения <a href="сайт">текст</a>, заменить их на текст. Если трудно, можно открыть в визуальном редакторе HTML, но я бы не стал.
    3. Открыть сохранённый файл в браузере, потом его сохранить как mhtml.
    Ответ написан
    Комментировать
  • Как сделать подобную анимацию в JavaScript?

    @ImagineTables
    Не сильно долго думая:

    1. Рендерим чем-то типа https://github.com/niklasvh/html2canvas.

    2. Выводим картинку в верхнем слое.

    3. Снизу мгновенно меняем тему (через body.light).

    4. При помощи mask-image делаем для картинки из п. 2 радиальные градиенты с несколькими частично пересекающимися кругами (как в макете). Изначально значения альфа-канала во всех опорных точках должно быть 1.0

    5. Запускаем transition к таким значениям альфа-канала, чтобы был эффект распространения прозрачности по кругам от центра наружу. Круги при анимации начинают пересекаться, что даёт искомый эффект интерференции.

    6. Чтобы transition сработал с градиентной заливкой, нужно задать градиент кастомными свойствами, а переход делать для них, как показано тут: https://stackoverflow.com/a/63848864/14400772
    Ответ написан
    Комментировать
  • Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?

    @ImagineTables
    Как уже было сказано выше,

    1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
    2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.
    Ответ написан
    1 комментарий

Лучшие вопросы пользователя

Все вопросы (17)