Задать вопрос
Ответы пользователя по тегу JavaScript
  • HTML5 плавное повторение видео, есть ли способ?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Только зациклить в видео-редакторе таким образом, чтобы оно в конце приводилось к своему изначальному состоянию (первому кадру) как вам нужно. Это единственно правильный метод.

    Есть ещё вариант: сделать два видео, расположить друг над другом, одно запустить, другое стоп, отслеживать прогресс воспроизведения и за пару секунд до окончания видео его плавно скрыть, другое видео в этот момент стартуем, ну и такую карусель устраиваем.
    Но делать так настоятельно не рекомендую - это создание сложности на ровном месте, да и перфоманс такой себе получится.
    Ответ написан
    6 комментариев
  • Что нужно сделать чтобы плагин таблиц jQuery видел и сортировал элементы созданные динамически с помощью js?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    От решения зависит, тут мало данных.
    Хорошее решение повесит MutationObserver и сделает всё само (не ваш случай, видимо).
    Умеренно хорошее решение должно иметь метод .update() или что-то в таком духе.
    Такое себе решение имеет метод destroy(), который DOM возвращает к исходному состоянию, чтобы можно было вставить и инициализировать заново.
    Для всего остального - храним где-то наши данные, в случае необходимости убиваем узел целиком, формируем новый DOM, инициализируем плагин заново.
    Ответ написан
    Комментировать
  • Как быстро научится работать с DOM?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Это база, так что нарабатывается только многократным повторением и умением быстро загуглить.
    Конструкции, которые вы будете использовать каждый день, за какое-то время в памяти останутся (их не так много вообще). Ручками только набирайте, не копируйте со Стака.
    А те, что не используются каждый день - всегда можно быстро загуглить. Несколько раз пройдитесь по документации, просто чтобы иметь представление о том, что вообще существует - и практиковаться. :)
    Ответ написан
    Комментировать
  • Проверка кривоты скрипта?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    1. Класс .knopka - омерзительно, в работе должны использоваться только английские слова (хотя на сайте Сбербанка пару лет назад видел "telefon_batton", то было больнее).
    2. Если навешиваете события по селектору, то будет хорошей идеей добавить элементу дополнительный класс именно для JS с соответствующим префиксом (.js-button).
    3. Логика работы вашей функции такова, что вам проверка просто не нужна
      if (cont.classList.contains('text') ) {
        cont.classList.replace('text', 'text2');
      } else {
        cont.classList.replace('text2','text');
      }
      
      // Заменяется на 
      cont.classList.toggle('text');
      cont.classList.toggle('text2');


    Ответ написан
    1 комментарий
  • На что влияет p и чему оно равно в css?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    В CSS функции плавности описываются не формулами, а кривой Безье.
    Соответственно - ничему не равно, это просто разные сущности.
    Ну или равно одному из вариантов [sine, quad, cubic, etc] буквенного обозначения, если уж прям хочется определения.

    В вашем JS вы добротность (слово не совсем про это, но лучше не придумалось) воображаемой кривой регулируете с помощью параметра P (sine, quad, cubic и так далее), на CSS - только точки иначе поставить.

    Вот хороший сайт-шпаргалка, с него же можно перейти на вот такой, где можно самому покрутить.
    Ответ написан
    Комментировать
  • Аналог fullpage js на чистом js?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Я вас удивлю, но fullpage.js - давным-давно работает на ванильном js.
    Пользуйтесь и радуйтесь, скрипт не идеален, но остальные того хуже. :)
    Ответ написан
    Комментировать
  • Почему игнорируются функции "if" и "else if"?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Потому что prompt вам возвращает строку, а не целое число.

    parseInt(prompt('Введите значение "a"'), 10);
    Ответ написан
    Комментировать
  • Как сделать элемент выходящим за все границы страницы, при этом фиксируемым и по центру?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Зафиксируйте 2ой элемент по центру. Например так:
    .second {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }


    На JS посмотрите размер блока и рассчитайте коэффициент (K), на сколько его нужно увеличить, чтобы он оказался больше размеров окна браузера. Примените коэффициент через transform: scale(K) - тем более у вас SVG, что масштабируется без потери качества.

    На скролл повешайте событие, которое будет постепенно уменьшать коэффициент до единицы. Всё. :)
    Ответ написан
    Комментировать
  • Эффекты при наведении на элемент?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    По наведению на кнопку контентной части добавляется класс "interference", который запускает анимацию:
    .interference {
      animation: interference 0.5s linear;
    }

    Сама анимация простейшая:
    @keyframes interference {
      20% {
        filter: blur(2px);
        transform: skewY(-1.2deg)
      }
      30% {
        filter: blur(2px);
        transform: skewY(1.2deg)
      }
      100% {
        filter: blur(0px);
        transform: skewY(0)
      }
    }


    Заодно псевдоэлементом добавляется фиксированный фон, который мигает также с помощью свойства animation.
    Код форматировать лень, гуглите "css blink animation".
    Вот картинка: https://danieldefo.ru/styles/star/glitch-overlay.png

    Резюме: дизайнерская задумка ничего (хотя мне сама иконка больше нравится - есть что-то такое мистическое), а чисто технически это делать - скука смертная.

    Откройте консоль, добавьте класс сюда и изучайте инспектор.

    5e75480155473551632663.png
    Ответ написан
    1 комментарий
  • Как сделать тянущую анимации за курсором мышки без библеотек?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Вам нужно использовать функцию линейной интерполяции (да, у нас в веб-анимации есть немного математики).
    А также перестать использовать setInterval за этим делом, используйте requestAnimationFrame.
    Вот вам статья, которая натолкнёт на правильные мысли, а ещё больше информации можно получить в Гугле по запросу "js lerp animation".
    Ответ написан
  • Как при вводе текста, textarea прокручивать до конца?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Да просто у вас очень странные пляски с навешиванием событий.

    Уберите ваше
    document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize);
    document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);


    И поставьте вместо него:
    document.getElementById('textArea').addEventListener("input", updateSize);


    И будет работать как вам надо.

    Потом попробуйте вбивать текст, не отбивая его пробелом (просто зажмите символ и удивитесь, что всё сломалось).
    Осознайте, что единственный адекватный способ посчитать новую, необходимую высоту textarea - это скопировать её куда-то "out of bounds" вместе с контентом и узнать scrollHeight.

    Держите пример:

    Ответ написан
  • Как каждые 5 секунд исполнять код функции, обновляя её при повторном вызове?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    setInterval (а также setTimeout) вам отдаёт идентификатор таймера, запомните его и сбрасывайте при повторном вызове, а потом назначайте снова.

    var timer;
    function switchClasses() {
      div.classList.add("classTwo");
      div.classList.remove("classOne");
      clearTimeout(timer);
      timer = window.setTimeout(() => {
        div.classList.add("classOne");
        div.classList.remove("classTwo");
      }, 5000);
    }
    Ответ написан
    2 комментария
  • Как называется этот эффект?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Их много разных типов, гуглите "js particles animation" и открываете первые две страницы выдачи - где-то точно найдётся пример прям как в видео.
    Ответ написан
    4 комментария
  • Ошибка Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    А вы откройте в консоли (Ctrl+Shift+G в Chrome) вкладку "Network", найдите ваш запрос, и посмотрите что там приходит во вкладке "Response".

    5e736588b215e932457830.png
    Подсказка: приходит не JSON.
    Ответ написан
    Комментировать
  • Как сделать подобный canvas?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Да довольно просто.
    Весь канвас - это слегка переделанный "эффект из матрицы" (найдёте с десяток реализаций по запросу "js canvas matrix animation|effect", переделать готовый алгоритм не под символы, а под блоки чуть разного размера не должно стать проблемой).

    UPD:
    Да и что там перелопачено вебпаком? Вебпак - не обфускатор.
    Открываем файл "main.min.js", прогоняем через любой "js beautifier online", в редакторе ищем "drops", находим два метода, которые хоть и форматированы в строку, но тем не менее достаточно понятны.

    5e62192377585972779602.png
    Ответ написан
    Комментировать
  • Отложить загрузку скриптов, пока не загрузится весь сайт, как?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Отложите их загрузку через window.onload => setTimeout с задержкой 2-3 секунды. Это работает для того, чтобы не влияло на показатели PageSpeed.
    Достоверно известно, что при этом подходе Яндекс Метрика не показывает, что скрипт Метрики установлен на сайт. Данные нормально поступают, но в панели Метрики значок красный. :)
    Ответ написан
  • Как подставить значение data-id контейнера в код?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Вроде того:
    const containers = document.querySelectorAll('div[data-id]');
    containers.forEach(container => {
      const containerID = container.getAttribute('data-id');
      const innerDiv = container.firstElementChild;
      innerDiv.id = 'adfox_157047490239139771-' + containerID; 
    });

    Не проверял, но вроде негде ошибиться.

    Замечу, что очень ненадёжно делать выборку 'div[data-id]', в идеале - вам нужно контейнерам задать какой-то уникальный класс/атрибут и по нему выбирать, точно также выбирать и дочерний (в моём варианте просто берётся первый узел).
    Ну и ещё отмечу, что чтобы работало в ИЕ11 и всяких старых Сафарях, нужно const заменить на var и озаботиться подключением полифилла forEach для nodeList

    UPD:
    Это что касается изменения ID элемента. Что касательно свойства в коде... Изменить его не получится никак в таком виде. Можно всю структуру целиком собрать на JS и вызвать код. Вроде того:
    function createStructure(id) {
      const div = document.createElement('div');
      div.setAttribute('data-id', id);
      
      const innerDiv = document.createElement('div');
      innerDiv.id = 'adfox_157047490239139771-' + id;
      div.appendChild(innerDiv);
      
      document.body.appendChild(div);
      
      window.Ya.adfoxCode.createAdaptive({
        ownerId: 325119,
        containerId: 'adfox_157047490239139771-' + id,
        params: {
          pp: 'g',
          ps: 'dpmn',
          p2: 'gopy'
        }
      }, ['desktop', 'tablet'], {
        tabletWidth: 830,
        phoneWidth: 480,
        isAutoReloads: false
      });
    }
    
    createStructure('100');
    createStructure('200');
    Ответ написан
    Комментировать
  • Как выделять только один блок?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Проблема в том, что в обработчике hover вы выбираете не элемент внутри того, на который навели, а все элементы с указанным классом на странице.

    Вот так будет работать:
    $(this).hover(function(){
      $(this).find('.declar_item_bg').toggleClass('declar_item_bg_usual');
      $(this).find('.declar_item_bg').toggleClass('declar_item_bg_active'); 
    });
    Ответ написан
    Комментировать
  • Одно и тоже значение Math.random в переменной?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Вы result высчитываете на странице один раз, а потом каждый раз выводите одно и то же.
    В функцию запечатайте и вызывайте функцию, каждый раз генерируя новое значение:
    function myFunc() {
      var mass = ["I", "We",];
      var mass2 = ["love", "hate", "not", "return"];
      var math = mass[Math.floor(Math.random() * 2)];
      var math2 = mass2[Math.floor(Math.random() * 4)];
      return math + " " + math2;
    }
    myFunc();
    Ответ написан
    Комментировать