Задать вопрос
maralov

maralov

фронт-джун
Лайки

  • Как сделать анимацию трансформирующую один элемент в другой?

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

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


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

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

  • JS include при сборке в gulp как реализовать?

    @kaktys123 Автор вопроса
    HTML, CSS, JS
    вот в общем сам нашел варианта два ну и думаю этого достаточно будет.
    1. gulp-include лучшее решение если не делаете прям крупных проектов или там плагины какие то. И можно в добавок к нему попробовать gulp-sourcemaps возможно им удастся еще и генерировать карты кому нужно. Но gulp-include можно не только js инклюдить но и любые файлы даже html.
    2. gulp-browserify для тех кто не хочет отказываться от gulp но тут есть много плющек и можно модульность организовать. Это уже для тех кто работает по крупному.

    Вот в общем может кому поможет это решение.
    Ответ написан
    Комментировать
    Комментировать

  • Wordpress не дружит с gulp browserSync, почему?

    @runprogr Автор вопроса
    Полтора дня перебора всех возможных вариантов дали результат.
    Проблема была в том, что
    1) В опенсервер не был добавлен домен с папкой галпа. Переместил папку галпа рядом с папкой localhost, добавил в настройки новый домен.
    2) Опенсервер не менял файл hosts, что нужно для корректной работы. Поставил галочку в настройках, отключил в антивирусе блокировку изменений hosts файла, все заработало.

    Надеюсь кому-то поможет и сэкономит время
    Ответ написан
    Комментировать
    Комментировать

  • Как мне расположить объект точно в центре, независимо от экрана пользователя?

    @DanKud 
    .btn-group-vertical {
    position: absolute;
    top: calc(50% - половина_высоты_блока);
    left: calc(50% - половина_ширины_блока);
}
    Ответ написан
    Комментировать
    Комментировать

  • Кто-нибудь может объяснить, как сделать для мобильной версии всплывающее окно меню слева(как на фотографиях)?

    @xonar
    А смысл?
    Это бургер меню. Делается такое меню на position: fixed, с left: -99999 или display:none. Затем на media запросах и js при клике на бургер меню у этого блока меняются параметры c left: -99999 на left: 0 или c display: none на display: block;

    Простая вещь, вариантов в сети полно.

    Вот пример, код разберёте и сразу будет понятно, только тут без медиа запросов о них вам к гуглу - https://codepen.io/ruslan-lysenko/pen/NZewwo

    То есть, меню изначально прячется с помощью css стилей, затем JS отслеживает клик на меню, дальше добавляется опеределённый класс, в котором указаны иные стили, что позволяет открыть меню.
    Ответ написан
    Комментировать
    Комментировать