• Почему возникает Ошибка синтаксического анализа XML в браузере firefox?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Между фактами
    Как видно, на первой позиции в первой строке находится {

    и
    Ошибка синтаксического анализа XML

    есть противоречие. То ли речь идет про XML, то ли про JSON. Надо определиться. Вполне вероятно, что у вас сервер левые заголовки отдает и браузер думает, что там XML, а на самом деле там JSON. Отсюда и ошибка.
    Ответ написан
    Комментировать
  • Почему не добавляется класс следующему элементу после 2 клика?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Метод querySelector возвращает первый элемент, который соответствует селектору. В вашем конкретном случае querySelector('.btn') - это всегда первая кнопка. Тут вопрос не в количестве кликов, а в том, что логика действий завязана на первую кнопку.
    Ответ написан
    Комментировать
  • Как использовать в clip-path: path() проценты (ну и calc)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Весь затык у нас тут в том, что CSS не позволяет в рамках path жонглировать единицами измерения. Почему? Люди задавались этим вопросом с самого момента появления path в CSS. Но этот функционал всегда был в SVG. Так что можно добавить маску в SVG (тут у нас размер элемента, условные 100% на 100%, считается за 1 на 1):

    <svg width='0' height='0'>
        <defs>
            <clipPath id='example' clipPathUnits='objectBoundingBox'>
                <path d="M 0 0 a 1 1 0 0 0 1 1 h -1 v -1z"/>
            </clipPath>
        </defs>
    </svg>

    И тогда в CSS уже будет все просто:

    .example {
        clip-path: url(#example);
    }

    Это не идеальный вариант, хотелось бы на чистом CSS, но имеем, что имеем.
    Ответ написан
  • Как реализована анимация SVG элементов (персонажей) в web app?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Могу предположить что что-то на подобии gsap

    Если рассматривать эту задачу в целом, без привязки к конкретному сайту, то это задача по созданию мультиков, в больших количествах, на потоке, в рамках сформированной дизайнерской системы. Делать это за счет фронтендеров - такая себе идея. Сложно всех синхронизировать, очень много накладных расходов. Это будет реально дорогая разработка. И разработчики нужны очень прошаренные по части анимаций, чтобы они были со всей командой дизайнеров на одной волне. Таких днем с огнем не найдешь. Более простой и дешевый подход состоит в том, чтобы этим всем занимались моушен-дизайнеры в рамках экосистемы Lottie. А со стороны разработки мы только интегрировали готовые сценки в сайт или приложение. В последние годы обычно все так и делают. Наш стек здесь не имеет значения, равно как и умения разработчиков.
    Ответ написан
    5 комментариев
  • Можно ли вставить в сайт сделанный на Tilda игру сделанную на Unity Webgl?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    я так понимаю, что встраивать нужно будет с помощью JS. Можно ли такое сделать?

    Официальный help в разделе "for developers" говорит, что вам нужен блок T123. Он позволяет интегрировать HTML, CSS и JS код в страницу.
    Ответ написан
  • Как изменить переменную SCSS, которой нет?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    с SCSS не знаком. Странная ситуация. Переменная есть в DevTools. В коде ее нет.

    Потому что --bs-body-bg к SCSS отношения не имеет. Это нативная CSS custom property, которую в вашем случае устанавливает Bootstrap.
    Ответ написан
    3 комментария
  • Какие возможные варианты сделать такую кнопку, чтобы границы кнопок подстраивались под размер текста внутри?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Где-то в светлом будущем у нас будет CSS Painting API, с помощью которого можно будет рисовать какие угодно бордеры. А пока можно его сымитировать обычным канвасом (правда придется отступы подгонять под особенности шрифта, но это уже детали, один раз можно сделать):



    Рисование таких штуковин в реальном времени требует определенных вычислительных мощностей. Но если сравнивать с заранее заготовленными картинками, то мы получаем широкие возможности для кастомизации и рандомизации, что в каких-то случаях может быть очень кстати.
    Ответ написан
    Комментировать
  • Как пустить элементы по кругу с помощью скролла?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    порядок действий

    1. Сделать 12 элементов.
    2. Расположить элементы по кругу. Тут абсолютное позиционирование В текущих реалиях вечнозеленых браузеров мы можем использовать нативные функции sin() и cos(), чтобы рассчитать, где какие из них должны быть расположены на окружности не покидая мир CSS. Тут никакой магии, геометрия за 7 класс школы.
    3. Естественным образом в расчетах координат появится угол, который можно менять, тем самым поворачивая всю эту карусель. Его можно уже из скриптов менять по той логике, которая нужна для взаимодействия с пользователем.
    4. Обрезать все штатным clip-path.




    Это если говорить про HTML+CSS подход. Он легко делается, но он не идеальный внутри. Есть две проблемы, которые не решатся заменой свойств на другие. Первая - это дергающиеся элементы. В каких-то браузерах это будет проявляться меньше, в каких-то больше. Как ни крути положения элементов округляются до целого количества пикселей по неведомой для нас логике и в движении будут заметны сдвиги в 1px туда-сюда. И производительность - это вторая потенциальная проблема. Двигать много элементов одновременно, особенно если они большие - не всегда хорошо. Не факт, что это будет проблемой в вашем случае, но в теории может стать с учетом всего остального, что будет на странице. Более производительным в теории вариантом будет нарисовать все это на канвасе. Там же можно будет взять под контроль все округления. По крайней мере до какой-то степени. Это следующий шаг, куда можно все это развивать. Логика будет той же самой, но уже на других технологиях. Вероятно вам будет проще начать с варианта на CSS.
    Ответ написан
    5 комментариев
  • Как создать такую фигуру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Я думал через clip-path но там нет такой плавности... даже чат джипити не понимает...

    Если уж говорить про clip-path, то там есть clip-source, с помощью которого мы можем поиспользовать clipPath из мира SVG, а в рамках SVG уже можно нарисовать себе любую форму. В разделе синтаксиса и на MDN, и в стандарте, это буквально первый предлагаемый вариант использования clip-path. Не доверяйте вашей чатгопоте. Читайте документацию самостоятельно. Там много интересного.
    Ответ написан
    4 комментария
  • Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    С точки зрения производительности в CSS анимациях почти всегда имеет смысл сразу смотреть на свойство transform, а не на width или height. А в терминах трансформаций у нас для изменения размеров используются вариации функции scale():

    50% {
        transform: scaleX(0.9) scaleY(1.1);
    }

    Если у вас действительно логика завязана на проценты от изначального размера, то это именно то, что доктор прописал, и не нужно ничего дополнительно придумывать.
    Ответ написан
    6 комментариев
  • Как повторить такую же анимацию?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Для начала можно посмотреть в их исходники. Беглый просмотр кода показывает основной план действий:

    • Создать плоскость с кастомным материалом. Вершинный шейдер стандартный нейтральный, который ничего необычного не делает, только сохраняет координаты UV, чтобы их во фрагментном использовать. Фрагментный будет содержать в себе всю логику. Это частенько так делается в 2D-эффектах.
    • Во фрагментный шейдер передать две текстуры. Одна обычная, для фона. Вторая - карта смещений для пикселей. Displacement map по-нашему. Берем пиксели из фона, смещаем по данным из карты смещений - получаем результат.
    • Нарисовать текстуру для фона. В их случае она делается из кадров видео, т.е. вот этот бултыхающийся градиент на фоне в их случае заранее заготовлен. И, к слову, видно, что он шакалится. Но с точки зрения производительности видео тут - это хорошая идея. Генерирование клякс-градиентов - требовательная в вычислительном плане задача.
    • Нарисовать displacement map по какой-то логике, завязанной на положение мыши. Тут большой простор для экспериментов. В их случае они используют отдельную сцену с кучей объектов, у которых меняются расположение и прозрачность в зависимости от положения мыши и просто со временем. Там много магических чисел. Вероятно все подбиралось наугад. Как это обычно и происходит. И потом они рендерят эту сцену в текстуру, которая передается в уже упомянутый шейдер. Можно было бы на 2D канвасе ее рисовать. Но с трехмерной сценой в таких задачах проще работать, хотя это поначалу кажется контринтуитивным.

    Все остальное в коде - обвязка, чтобы это организовать в рамках Three.js. В этом конкретном сценарии этот инструмент выглядит слегка избыточными. Можно было бы взять какую-нибудь альтернативную легковесную библиотеку, но по сути делать пришлось бы то же самое.

    От этого вполне можно оттолкнуться и сделать что-то подобное в рамках своих инструментов/требований/дизайнов.
    Ответ написан
    Комментировать
  • Three.js объект сзади не виден при повороте к нему лицом?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Без полноценого примера в песочнице это будет гадание на кофейной гуще, но что видно сейчас - для такой простой сцены у вас используется очень много вещей, которые потенциально могут что-то сделать c видимостью объектов. Обычно мы их используем для очень опасных оптимизаций, когда нужно все сделать нестандартным образом, где-то что-то сломать, но за счет этого что-то другое выиграть. Тут такие оптимизации явно преждевременны. Стоит пройтись по ним и убрать все. Если сцена будет работать, то потом можно будет вернуть назад по очереди, наблюдая за происходящим.

    Параметры depthWrite у материала и sortObjects у рендерера - первые кандидаты на то, чтобы их убрать. И определенно стоит вместо BoxGeometry нулевой толщины взять PlaneGeometry. Нулевая толщина тоже может давать разные сложности, с определением видимости в том числе.
    Ответ написан
    3 комментария
  • Почему заливка картинки больше самой заливки?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    как решить?

    .img img {
        display: block;
    }

    Всё это нужно для затемнения фотографии

    Можно рассмотреть еще вариант без отдельного элемента с фоном:
    img {
        filter: brightness(0.6);
    }
    Ответ написан
    Комментировать
  • Допустимо ли использование midjourney, шедеврум и тп в комерческих целях?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Шедеврум

    Условия использования сервиса «Шедеврум»:

    3.3. Пользователь вправе использовать Изображения, Видео и Тексты, созданные им или другими Пользователями с использованием Сервиса, в личных некоммерческих целях с соблюдением пунктов 2.5. и 3.6. настоящего Соглашения и действующего законодательства. Любое коммерческое использование Изображений, Видео и/или Текстов возможно только при условии предварительного согласования с Яндексом.

    Вы можете обратиться за получением согласия на коммерческое использование Изображений, Видео и/или Текстов через форму обратной связи.

    ...

    В таких вопросах не нужно слушать никого в интернете, нужно идти и читать условия использования. При необходимости связываться с компанией или своим юристом. Конечно найдутся персонажи, которые скажут "да что такого", что вами лично никто не заинтересуется, если вы миллионы на этом не зарабатываете, но потом эти же персонажи пишут жалобные статьи, как их нагрели за коммерческое использование изображений, на которое у них не было прав. У Midjourney соглашение более гибкое, но тоже с оговорками. И тоже стоит самому почитать.
    Ответ написан
    1 комментарий
  • Как сделать плавную анимацию при смене значений через js?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вероятно вам нужен обычный transition, он будет срабатывать каждый раз, когда значения будут меняться:

    .items {
        .single-chart {
            .circular-chart {
                .circle {
                    /* animation: progress 1s ease-out forwards; */
                    transition: stroke-dasharray 1s ease-out;
                }
            }
        }
    }
    Ответ написан
    1 комментарий
  • Как сделать чтобы у меня 3д анимация вращения не плавала в дополнительной плоскости?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    У нас три координаты - XYZ. Для CSS все элементы на странице - плоские, у них нет толщины, и их размеры по оси Z нулевые. Поэтому CSS за нас не угадает, куда должен смещаться transform-origin по оси Z для кирпичика, который существует исключительно в нашем воображении. Вы смещаете грани кирпичика в отрицательные значения по оси Z, но точка transform-origin, через которую проходит ось вращения, остается в плоскости Z = 0.

    Получается, что вам нужно как-то вручную совместить ось вращения и центр кирпичика. Тут два пути - либо сместить точку transform-origin на пол кирпичика вглубь по Z:

    .cube {
        transform-origin: 50% 50% -25px;
    }

    Так ось вращения будет проходить через его текущий центр. Либо сместить грани кирпичика, чтобы он изначально собирался не "весь вглубь экрана", а "половина вглубь, половина к нам". Его центр сразу будет в плоскости Z = 0, где по умолчанию находится transform origin, и не нужно будет ничего дополнительно двигать.
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы prettier не переносил каждый метод на новую строчку в JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Prettier использует определенную логику для определения ситуаций, когда такие вещи должны быть разделены. Ее нельзя выключить. Этот инструмент в целом имеет очень мало настроек, он изначально очень строгий и нацелен на то, чтобы навязать свой стиль форматирования везде. В этом его философия. Не нужно спорить, как лучше форматировать. Робот все решит за нас.

    Можно игнорировать какие-то конкретные штуки с помощью комментария // prettier-ignore. Но нужно ли?
    Ответ написан
    1 комментарий
  • Как максимально просто создать фигуру как на изображении для последующей анимации?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вариант с градиентами - сложный для анимирования. Рисование линий со stroke-dasharray - это стандартный выбор. Но dash array может быть длинным, им можно описать самые разные последовательности линий и пробелов, так что если вам не нужны разные цвета, то можно сделать одну линию:

    Ответ написан
    5 комментариев
  • Как через css сделать такие блики на bk сайта?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Формально можно взять фильтр blur с большим радиусом и размыть абсолютно расположенные на фоне элементы. В SVG есть аналогичный фильтр. Но лучше так не делать. Для таких размытий используется вычислительно сложный алгоритм и можно существенно увеличить нагрузку на устройства пользователей на ровном месте. Это просто сложно рендерить в реальном времени.

    Производительнее будет это размытое нечто картинкой вставить. Тоже не идеально, грузиться будет дольше, но выбирая между тормозами всего или слегка более долгой загрузкой ни на что не влияющей кляксы на фоне - в 99% случаев стоит выбрать второе.

    Есть, конечно, еще более развитый вариант - взять canvas, отрендерить эту штуку на нем один раз в фоновом режиме, а потом использовать результат как картинку. Так оно не будет требовать загрузки картинки по сети, и мы не будем грузить устройства пользователей постоянно. Но это уже другой вопрос, про другие инструменты.

    P.S.: Добавлю еще такой момент, что при использовании картинки может возникнуть такая мысль, что в CSS есть еще градиенты - и это ведь тоже как картинки, может быть их использовать? Но собрать такое из градиентов гораздо сложнее, чем кажется. Сложение полупрозрачных градиентов - это не тот же алгоритм, что размытие. При взаимном наложении клякс друг на друга результат будет отличаться. Чтобы иметь такое же красивое размытие - придется иметь много градиентов, что сведет на нет саму идею снижения нагрузки на железо через них.
    Ответ написан
    Комментировать
  • Как сгенерировать простую анимацию в виде списка WORD/DWORD?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я максимально далек от программирования контроллеров, но поделюсь идеей, что у нас в javascript можно делать вот так (вероятно и в других языках, более близких к вашим задачам, есть похожая возможность):

    const frames = [
        [
            0b0000001100000000,
            0b0000001100100000,
            0b0001111111100000,
            0b0001001100000000,
            0b0000010010000000,
            0b0000100001000000,
        ],
        [
            0b0000001100000000,
            0b0001001100000000,
            0b0001111111100000,
            0b0000001100100000,
            0b0000010010000000,
            0b0000100001000000,
        ],
    ];
    
    console.log(frames);
    // -->
    // [
    //     [ 768, 800, 8160, 4864, 1152, 2112 ],
    //     [ 768, 4864, 8160, 800, 1152, 2112 ]
    // ]

    Мне кажется, что имея моноширинный шрифт натыкать единичек в виде каких-нибудь картинок вполне можно. Запустить этот скрипт можно в любом интерпретаторе js. Если нужно действительно что-то простое, на один раз, то как вариант. А можно и детям показать, как числа выглядят по-разному.
    Ответ написан