Ответы пользователя по тегу Анимация
  • Как сделать такой эффект слайдера?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    А чего тут непонятного? Кликнули, ненужные блоки разлетелись по сторонам, у нужного увеличилась ширина, чтобы он стал фуллскрин. Внутри лежит картинка которая автоматом растянута на большую ширину. Ну и всякие там движения туда сюда. В целом эффект раскрытия в этом слайдере выглядит довольно таки некрасиво и топорно, слишком резкий прыжок слайда с последующим отскакиванием, халтурная работа.

    Я почти 2 недели назад сделал такую демку - codepen.io/suez/pen/AXQaEg, тут все намного плавнее и красивее, да еще и все реализовано с помощью css, js лишь 2 класса добавляет, но у меня правда отсутствует функционал слайдера, ибо концепт другой. Но можете изучить css чтобы понять как это дело работает.
    Ответ написан
    1 комментарий
  • Как сделать такой эффект при скроле?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Обычный one page scroll. Причем весьма уныло реализованный.
    Ответ написан
    Комментировать
  • Как создается такая анимация?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Обычные 3д трансформации. Каждая буква вложена в свой контейнер с перспективой. Каждая буква смещена влево (translateX), вдаль (translateZ) и повернута по оси Y.
    Вот за 5 минут сделал пример на css - codepen.io/suez/pen/e6645538303dc17bb6f9953bba72e43b
    Ответ написан
    Комментировать
  • Как заставить transition работать?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    1) Не стоит точка с запятой после min-width: 300px, это даже тостер подсвечивает.
    2) Нет такого изинга easy-out, есть ease-out.
    Ответ написан
    6 комментариев
  • Как реализовать такую анимацию?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    У них это реализовано с помощью множества DOM-элементов. Я бы советовал делать с помощью канваса. Производительность точно будет на высоте, ибо эффект простой и не требует интеракций с юзером.
    Ответ написан
    Комментировать
  • Как лучше анимировать svg?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Зависит от того, что именно вы хотите анимировать в svg. Кому то трансформаций хватит, а кому-то нужны сложные анимации для path со всякими кастомными приблудами.
    Универсальные варианты - GSAP и D3. Гсап чисто заточен под анимации, и там имеется большое количество готовых решений/плагинов для свг. Если вам необходимо сделать крутую и комплексную анимацию, то это наверное самый оптимальный вариант. D3 тоже хорош, но он больше рассчитан на работу с данными, и для всяких красивяшек-анимашек не особо подойдет.
    Есть еще velocityJS и подобные либы, но они все по сути дела являются лайт-версиями Гсапа (при том что у самого гсапа есть более легкие его версии).
    CSS умеет многое, с ним можно даже анимировать отрисовку path и подобные штуки, но он вообще не дружит ни с какими ИЕ, когда дело касается работы с path (+ в ФФ имеются проблемы с transform-origin). Примеры баловства с svg лоадерами на чистом css:
    codepen.io/suez/pen/myvgdg
    codepen.io/suez/pen/ogmMOM
    codepen.io/suez/pen/MwJdRy

    Если вам необходимо сделать что-то совсем уж кастомное и крутое, и при этом вы совершенно не уверены что либы в этом вам помогут (либо нет такого функционала, либо пока научитесь его юзать - сойдете с ума), то придется писать велосипеды на js. requestAnimationFrame и в бой. Вот два велосипеда для примера - codepen.io/suez/pen/oXLroX и codepen.io/suez/pen/emjwvP

    Ах да, еще есть SMIL анимации (которые прямо внутри SVG описываются) и они умеют очень многое (во многом даже удобнее js получаются, без потери в функциональности), но от них уже медленно отказываются современные браузеры (да и к тому же они никогда не поддерживались в IE). Так что их можете обходить стороной.
    Ответ написан
  • Что лучше для svg-анимаций snap.svg или velocity.js,?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Velocity это по сути дела лайтовая надстройка над jQuery. В плане фич/производительности она с лихвой проигрывает Snap/GSAP. Лучше всего юзать GSAP, ибо эта либа подходит для анимации вообще всего, а не только svg.
    Ответ написан
    1 комментарий
  • Как правильно сделать анимацию?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Без гифки анимации тяжело понять, как именно должен выглядеть сам эффект. Если у вас имеются отдельные картинки для этих двух букв, то можно легко анимировать с помощью transform: translateY + opacity.
    Если анимация должна быть более "красивой" и сложной, вам поможет свг. В любом случае ваше текущее описание мало о чем говорит.
    Ответ написан
  • Через что делать анимацию при наведении курсора (hover): transition или @keyframes?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Кейфреймы нужны для цикличной , "односторонней" или сложной (множество шагов с множеством изменений разных свойств) анимации. Например shine эффект для кнопки, когда проносится полупрозрачный элемент под наклоном, создающий эффект сияния. Если делать транзишеном - после убирания мыши с элемента, сияющий блок поедет обратно. А с кейфреймом он при каждом наведении будет 1 раз проезжать слева направо. https://cssanimation.rocks/pseudo-elements/ - вот собственно пример.
    Транзишены соответственно юзаются когда, например, надо поменять свойства элемента при наведении или добавлении класса. При этом при добавлении/убирании разных классов можно настраивать везде свои удобные тайминги/задержки на то, как свойства будут меняться. В общем удобная декларативность во по всем фронтам.
    Ах да, еще кейфреймы нужны когда необходимо врубить анимацию на старте страницы, не прибегая при этом к js.
    https://cssanimation.rocks/transition-vs-animation/ - вот это еще можете чекнуть.
    Ответ написан
    Комментировать
  • Как создать такой эффект?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Это сделано на Canvas'е. Обращаться надо к тем, кто с ним дружит. Даже не знаю как по другому еще и сказать то.
    Ответ написан