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

Достижения

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

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

Все теги (28)

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

Все ответы (38)
  • Как в 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.
    Ответ написан
    Комментировать
  • Какую операционную систему можно поставить на старый нетбук?

    @ImagineTables
    Как вариант, можно поставить на него RDP и сделать тонкий клиент. Если готовы держать обычный комп включённым и выведенным в Интернет.
    Ответ написан
    Комментировать
  • Как сделать подобную анимацию в 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
    Ответ написан
    Комментировать

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

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