Ответы пользователя по тегу JavaScript
  • Очень медленно прогружается анимация в Яндекс браузере, как исправить?

    RomanTRS
    @RomanTRS
    Рывки анимации наблюдаются и в Firefox и в Chrome.

    Lighthouse говорит:
    Некомбинированные анимации могут пропускать кадры и увеличивать совокупное смещение макета.


    А в этой статье говорится:
    Анимация, выполняемая за пределами этапа компоновки, может выглядеть «рваной» (т. е. не быть плавной) на медленных телефонах или во время выполнения ресурсоемких задач в основном потоке. Дергающиеся анимации могут увеличивать показатель Cumulative Layout Shift (совокупное смещение макета, CLS) вашей страницы. Снижение CLS помогает улучшить оценку производительности в Lighthouse.


    Если перевести на человечий, то - переделывайте стили анимации, так чтобы она не использовала свойства вызывающие перерисовку, т.е. никаких width.

    ЗЫ. Если пройти дальше, по ссылкам, то можно получить более развернутый ответ.

    Набросал код

    .home-slider__carousel.animate {
      display: block;
      padding-bottom: 82px;
      position: relative;
    }
    
    .animate__body {
      width: calc(100% - 1px);
      display: flex;
      align-items: start;
      transform: skew(-35deg);
      position: relative;
      height: 26px;
      overflow: hidden;
    
    }
    
    .animate__body::before,
    .animate__body::after {
      content: '';
      height: 100%;
      width: 50%;
      flex: 1 1;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .animate__body::before {
      background: #0d0087;
      animation: anima1 3s linear forwards infinite;
      z-index: 1;
    }
    
    .animate__body::after {
      background: #e34126;
      height: 65.39%;
      animation: anima2 3s linear forwards infinite;
    }
    
    @keyframes anima1 {
      0% {
        transform: translateX(-100%);
      }
    
      33.33% {
        transform: translateX(0);
      }
    
      100% {
        transform: translateX(0);
      }
    }
    
    @keyframes anima2 {
      0% {
        transform: translateX(-100%);
      }
    
      33.33% {
        transform: translateX(0);
      }
    
      66.66% {
        transform: translateX(100%);
      }
    
      100% {
        transform: translateX(100%);
      }
    }

    Ответ написан
    Комментировать
  • Как сделать обратный отcчёт на 12 часов?

    RomanTRS
    @RomanTRS
    countdown(720, 0);
    Если не помогло, то -> go to youtube.
    Ответ написан
    Комментировать
  • Вставить переменную в gulpfile.js?

    RomanTRS
    @RomanTRS
    Вы используете неправильные кавычки. Из-за этого, src воспринимается как строка, без подстановки значения переменной.
    А вам нужен шаблон, который будет преобразован в строку!

    Замените обычные кавычки на обратные:
    `assets/${gPREPROCESSOR}/main.{scss,less}`
    Это клавиша ~, на клавиатуре.
    Ответ написан
    Комментировать
  • Как сделать пагинацию slick уникальной?

    RomanTRS
    @RomanTRS
    appendDots:
    	string
    	$(element)
    	Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
    
    dotsClass: 
    	string
    	'slick-dots'
    	Class for slide indicator dots container
    Ответ написан
    Комментировать
  • Кнопка темы на сайте?

    RomanTRS
    @RomanTRS
    1. тегу html добавляете параметр data-theme
    2. в стилях задаете цвета через переменные в :root
    :root[data-theme="mytheme"] {
      --color-primary: $fff;
      --color-secondary: $000;
      --color-accent: $0f0;
      ...
    }

    3. Через JS меняете значение для data-theme
    Ответ написан
    Комментировать