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

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

Все теги (8)

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

Все ответы (15)
  • Как сделать подобную анимацию в 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 комментарий
  • Как имитировать клик по кнопке в момент переключения табов?

    @ImagineTables
    Дисклеймер: не уверен, что правильно понял проблему, но попытка не пытка. Попробуйте первый раз инициализировать контролы внутри бутстраповских табов (т.е., в данном случае, делать вызов .slick()) из события shown.bs.tab (ну и запоминать, что инициализация состоялась, чтобы при повторном выборе таба её не делать повторно, либо unslick'ать всё на парное событие hidden.bs.tab).

    Событие shown.bs.tab генерирует контрол, который переключает табы. Т.е.

    $('button[role="tab"]')
    	.on('shown.bs.tab', function (e) { … } );


    Из e достаёте таб (см. бутстраповскую документацию на событие), и для его содержимого уже делаете инициализацию.
    Ответ написан
    Комментировать
  • Как эффективно перейти на c++ при опыте работе с php?

    @ImagineTables
    Этот язык меня самого вгоняет в тоску, хотя я пишу на нём много лет.

    Лучше всего определиться с предметной областью, а потом уже спрашивать совета. WinAPI это одно. Qt-мультиплатформа — другое. Веб-сервера — третье.

    Если Qt лезет в вашу предметную область, используйте Qt. Не то, что Qt хорошая библиотека, но она больше всего похожа на человеческую (из того, что есть).

    И помните, что не всё, чем гордятся плюсовики, это правильные вещи. По типичному соотношению «качество кода / самоуверенность автора» это самый ужасный ЯП.

    Так что, лучше всего начните с парадигмы «Си с классами».
    Ответ написан
    Комментировать
  • Как добиться срабатывания transition для checkbox?

    @ImagineTables
    для маркера checkbox навешен transition для плавного появления


    Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

    Но если приспичило, можно:

    Первый вариант
    1. Описать галку в начале файла:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
    	<defs>
    		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
    			<path fill="currentColor" … />
    		</symbol>
    	</defs>
    </svg>


    2. Вставить в кнопку:
    <svg width="32" height="32"><use href="#checkmark"></use></svg>


    3. Анимировать прозрачность.

    Второй вариант

    Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

    @property --my-color-1
    {
    	syntax: '<color>';
    	initial-value: #000;
    	inherits: false;
    }
    Ответ написан
    Комментировать

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

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