Ответы пользователя по тегу Анимация
  • Как сгенерировать простую анимацию в виде списка 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. Если нужно действительно что-то простое, на один раз, то как вариант. А можно и детям показать, как числа выглядят по-разному.
    Ответ написан
  • Как анимировать такой фон?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Неоднородные плавные искривления никак не получится сделать в рамках CSS или SVG. Плюс волна трехмерная, поэтому изобретать что-то в 2d-канвасе будет непрактично и скорее всего сложно в плане производительности. Поэтому использование WebGL - это естественный выбор. Конкретные библиотеки/фреймворки не имеют значения, в конечном счете все такие волны сводятся к простой схеме:

    1. Берем плоскость
    2. На плоскость накладываем какую-нибудь красивую текстуру
    3. Добавляем вершин побольше
    4. В вершинном шейдере делаем какой-то генератор шума и используем значения из него чтобы двигать вершины туда-сюда в направлении, перпендикулярном плоскости
    5. Опционально там же рассчитываем нормали для освещения
    6. Играемся с коэффициентами до посинения, пока результат не начнет нравиться


    Ответ написан
    Комментировать
  • Как реализовать подобную анимацию?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это реализуется с помощью свойств stroke-dasharray и stroke-dashoffset в SVG. Слушаем событие скролла - меняем значения. Подробнее в статье про пунктирные вау-эффекты. Вам нужна пятая демка - там как раз вот почти то же самое рисуется при скролле. На сайте Яндекс.Практикума эту линию поделили на небольшие части для удобства/оптимизации, но принцип тот же.
    Ответ написан
    Комментировать
  • Как реализовать подобную анимацию?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В соседнем ответе все верно написали. CSS-трансформации - это именно то, что нужно в такой ситуации. Технически вся красота возникает из-за параллакса - там несколько слоев движутся с разной скоростью. Так что здесь не обязательно именно слайдер использовать - это может быть любой инструмент для построения кастомного скролла (с инерцией). При желании можно свой написать, это не так сложно, нужен лишь школьный справочник по физике, но можно и готовый инструмент взять. Тот же Locomotive Scroll вполне сгодится.

    В этом примере как раз что-то похожее (только нужно открыть на CodePen - горизонтальный скролл не очень дружит с iframe-вставками):
    Ответ написан
    1 комментарий
  • Почему не запускается анимация?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    У вас неправильный синтаксис keyframes - двоеточия и лишние скобки. Должно быть как-то так:

    @keyframes load {
        0% {
            width: 0%;
            background: #f00;
        }
        50% {
            width: 70%;
            background: #00f;
        }
        100% {
            width: 100%;
            background: #0f0;
        }
    }
    Ответ написан
    2 комментария
  • Анимация аттрибута с animate не работает в codepen, jsfiddle?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Песочницы ни при чем, вы просто неправильно скопипастили изначальные атрибуты "d" у элементов с id="mund".
    Ответ написан
  • Не работает SVG handwriting анимация. Где ошибка?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Явно задайте элементу svg размер (width, height) в CSS. Проблема связана с тем, что браузеры могут по-разному определять размер элемента svg, когда он находится во flex-контейнере.
    Ответ написан
    Комментировать
  • Как сделать анимацию логотипа?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

    На CSS только плоская карта получится. Надпись можно было бы соорудить с помощью большого количества элементов и 3d-трансформаций, но результат будет очень грубым. Так что WebGL в таких задачах - наше все.

    Запустить крутиться планету

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

    запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

    Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

    P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.
    Ответ написан
    1 комментарий
  • Как сделать такую анимацию?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Эта штука нынче затмила по популярности particles.js. Постоянно все о ней спрашивают, в том числе и на тостере:
    Можно ли использовать чужой js код?
    Как правильно вытащить код? с этой страницы...
    Ответ написан
    3 комментария
  • Как реализовать анимацию одного элемента по мере прокрутки страницы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Задача разделяется на две:
    1. Анимировать саму линию
    2. Перемещать огонь по ней

    Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


    Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.
    Ответ написан
    1 комментарий
  • В чем может быть проблема анимации на mac OS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сразу бросается в глаза, что при скролле вы анимируете свойство top. При переходе между страницами в скриптах происходят постоянные обращения к свойствам inner*/outer*/offset*/client* (все минифицировано, не разобрать) а также изменения значений left, height и, возможно еще чего-то. Это все вызывает множественную перестройку макета страницы и проблемы с производительностью. Рекомендую почитать статью по теме.
    Ответ написан
    Комментировать
  • С чего начать изучение webgl, чтобы сделать так?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вся суть таких анимаций - много заранее заготовленных кадров, которые мы по очереди показываем. Чем больше кадров - тем плавнее анимация. Они могут быть в отдельных картинках или по много кадров в одной. На вашем сайте все это еще поделили - каждая часть бутылочки имеет свою последовательность кадров:
    Спойлер
    1ersu-v8gwpy6mxqyagwggfny0k.png

    Каких-то конкретных преимуществ этого подхода по сравнению с одним кадром на все я не вижу. Использовать ли для этого WebGL? Ну можно. Точно также, как и обычный canvas. Как выводить картинки на него вы легко загуглите, остается только посчитать координаты расположения кадров в картинке (по идее дизайнер должен их там аккуратно по сеточке расставлять) и выводить их по очереди.

    P.S.: По идее можно отрендерить видео и вместо ручного переключения кадров проматывать его в разные стороны с разной скоростью в зависимости от скролла. Но на практике что-то не видно, чтобы это массово делали, обычно используют именно отдельные кадры.
    Ответ написан
    1 комментарий
  • Как можно анимировать данные псевдоэллементы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    С квадратом еще можно было бы пошаманить с градиентами, но "нарисовать" круг из одного псевдоэлемента на CSS не получится. Так что вам стоит смотреть в сторону SVG и анимирования свойства stroke-dashoffset. Почитать про это можно в статье.
    Ответ написан
    Комментировать
  • Есть идеи как это реализовано?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сама линия делается по вот такому принципу с помощью SVG:

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

    По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


    С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
    Комментировать
  • Что лучше использовать для анимаций css или js? И почему?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    но которую можно реализовать и с помощью css, и с помощью javascript...
    ваше мнение хотел услышать

    Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

    В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
    Ответ написан
    Комментировать
  • Анимация пунктирной свг линии, возможно?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно поиграть с stroke-dasharray у этой линии (наводящий пример и статья вдогонку, чтобы понимать контекст).
    Ответ написан
    Комментировать
  • Как сделать анимацию жидкости с помощью SVG?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вот вам наглядный пример того, как все будет тормозить, вплоть до зависания страницы, если применить фильтры и все немного увеличить (и не говорите, что на вашем 12ядерномразогнанноммакпро не тормозит - у пользователя его не будет). Поэтому если выбор пал на SVG - анимируйте path, а потом заливайте его градиентом, как это и сделано на картинке. В простейшем виде можно сразу нарисовать десяток состояний каждой кляксы и последовать примерам из вот этой статьи.
    Ответ написан
    Комментировать
  • Как обеспечить такую анимацию в CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    ...реализовать анимацию кнопок виджета по "траекториям"?


    Как сделать такую анимацию css?
    Ответ написан
    Комментировать
  • Как сделать такую анимацию css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На чистом CSS такое делать слишком долго. Проще взять связку SVG+JS. Рисуете для каждой точки path - путь, по которому она двигается, а затем на JS ее двигаете по этому пути. Есть много готовых решений, например вот простое демо на чистом JS, да и в библиотеках вроде anime.js есть такая функция.
    Ответ написан
    Комментировать