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

Ivan Bogachev

Creative frontend developer
Ответы пользователя по тегу JavaScript

  • Как сделать 3D анимацию такого плана как на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Саму птицу, как уже верно заметили, можно соорудить на WebGL. Как пример подобной штуки, только без частиц вокруг и без ядреного шума на самих крыльях:
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать эффект волны картинке на gsap?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Поскольку мы видим неравномерные искажения картинки - варианты реализации этого на CSS и SVG отпадают. Единственный вариант - canvas и манипуляции с пикселями. С точки зрения производительности - лучше сразу смотреть в сторону WebGL и шейдеров. В этом контексте задача разделяется на четыре:

    • Отобразить картинку на плоскости в WebGL контексте, оставив по краям немного прозрачности (чтобы был простор для искажений).
    • Волны - это смещения пикселей. Характер может быть разным, но скорее всего будет что-то в духе "смещение пикселя = синус(положение пикселя + время)". Похожий пример есть вот в этой статье.
    • Покраснение - при задании цвета пикселя во фрагментном шейдере увеличиваем значение R в рамках RGBA (в зависимости от времени).
    • Дальше заменяем время на нужный нам параметр (скролл с верха страницы например, ну или что там вам нужно).


    И да, GSAP к шейдерам не имеет никакого отношения. Он может быть применен для изменения упомянутого параметра (который заменяет время), но саму анимацию этот инструмент вам не сделает.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как создать переменную со значением, которое будет обернуто в кавычки?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Есть три варианта:
    const a = '"#512534"';   // <-- Другие кавычки
const b = "\"#512534\""; // <-- Экранизация
const c = `"#512534"`;   // <-- Шаблонные строки
    Ответ написан
    3 комментария
    3 комментария

  • Почему данный пример не работает?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы забыли подключить jQuery UI. На CodePen библиотеку можно легко подключить введя ее название в поле "search CDNs..." в окошке для подключения скриптов - она есть на cdnjs, так что вы сразу увидите ее в выпадающем списке.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как вставить 3д модель с помощью three.js?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В сети есть множество примеров. Есть официальный пример из документации самой Three.js. Или вот, например, другой вариант, с дополнением в виде статьи.
    Ответ написан
    Комментировать
    Комментировать

  • GreenSock или anime.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    очень сложный с анимационной части сайт

    Ну "очень сложный" - понятие растяжимое. Если нужен сложный морфинг или физика в 2d - однозначано берите GSAP, у него есть готовые плагины для этого (а значит не нужно думать об интегрировании чего-то со стороны). А так в большинстве повседневных задач вы разницы между этими инструментами не заметите, тут скорее на вкус и цвет: GSAP - это более "энтерпрайзно-замороченный" инструмент с кучей кнопок, а anime.js скорее ближе к unix-way - маленький и решающий одну задачу.
    Ответ написан
    4 комментария
    4 комментария

  • Какие замечания к JS слайдеру?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    По функционалу:
    • Иногда подвисают кнопки "влево" и "вправо", не реагируют по несколько секунд.
    • При переходе с последнего слайда к первому мелькают они все. Было бы круто, чтобы был просто переход, как между остальными.
    • С клавиатуры нельзя попользоваться, свайпы тоже не поддерживаются.
    • В начале есть что-то вроде document.querySelectorAll в большом количестве. Это намекает на то, что два слайдера на одной странице работать не будут (все смешается в кучу).


    По коду:
    • Код ужасно отформатирован. Читать сложно (читай поддерживать сложно). Ознакомьтесь хотя бы с Airbnb JavaScript Style Guide и поймите, зачем делать код читаемым. Также там мешанина из ES6+ и каких-то древних хаков с that=this, самовызывающимися функциями и.т.д. Вы же уже используете современный язык - так используйте только его. Код будет в разы проще по структуре. Сейчас там черт ногу сломит. И очень очень очень очень очень очень длинные функции тоже мешают ориентироваться в происходящем.
    • Бессмысленные комментарии. Они просто дублируют код.
    • Сторонний код лучше загружать через NPM и подключать из node_modules, а не копироваать себе, и тем более не стоит руками смешивать разные инструменты в один файл. И да, они там вообще используются или просто лежат?
    • В репозитории отсутствуют конфиги и инструкция по сборке. Все это должно быть. Без них непонятно, как вообще это пересобрать.


    Рекомендации:
    • Почитайте про стиль кода, про то, как писать просто и понятно. Лучше этому сразу научиться.
    • Загуглите, как и зачем писать комментарии (и как из них генерировать документацию).
    • Поймите, зачем нужны все стандартные инструменты - сборщики, препроцессоры, линтеры, пакетные менеджеры, системы контроля версий и.т.д. Это понимание поднимет на новый уровень ваши поделки в плане их дальнейшего переиспользования. Да и вам поможет в работе.
    • Тестируйте. Хотя бы вручную.
    Ответ написан
    3 комментария
    3 комментария

  • Undefined, в чем причина?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Я же делал проверку на Element, значит у объекта точно должно быть это свойство html

    if (value instanceof Element) {
    value = getHtml(key);
}

    Ну value может быть и является "instanceof Element", но дальше вы вызываете функцию getHTML, передавая в качестве параметра строку. А никакого свойства html у нее, разумеется, нет.
    Ответ написан
    2 комментария
    2 комментария

  • Почему не могу в браузере запустить react приложение?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Uncaught SyntaxError: Cannot use import statement outside a module

    Скрипту нужно явно задать type="module", чтобы браузер знал, что этот скрипт - модуль, и в нем можно использовать импорты и экспорты. А по умолчанию скрипт за модуль не считается.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать шар?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
    Комментировать

  • Как для современных браузеров выводить анимацию, а для старых картинку?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Можно сходить на Browserhacks.com, взять проверки на нужные вам браузеры и запускать анимацию в зависимости от их результата. Но это костыль, конечно. Тем более, что Safari - это не "старый браузер".
    Ответ написан
    Комментировать
    Комментировать

  • Что за библиотека используется, в данном коде?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Непонятно что за синтаксис использования переменных через $somename

    Тут что-то все про PHP говорят, но вообще-то в JS (а вопрос про него судя по тегу) всегда имена переменных можно было начинать не только с буквы, но и с символов "_" и "$". Это не какой-то "специальный синтаксис".

    Я еще помню времена, когда таким образом разделяли в коде "обычные" элементы, например полученные через стандартные querySelectorAll, getElementById и.т.д., и "необычные" элементы, полученные через обертку в виде jQuery. В наше время более частый кейс для такого именования - сокращения для имен переменных при отладке, например в Chrome Dev Tools у нас есть переменные с именами $0, $1 и.т.д. Или можно использовать доллар прям в виде одного символа - вот есть библиотека lodash, методы из нее загоняют в переменную-контейнер с именем "_", а есть еще набор своих утилит, краткое имя "_" уже занято, но можно загнать свои утилиты в переменную "$". И будет все аккуратно и удобно.
    Ответ написан
    Комментировать
    Комментировать

  • Эффект движения изображений при scroll?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть очень прикольная штука - Locomotive Scroll.
    Ответ написан
    Комментировать
    Комментировать

  • Что за эффект при скролле?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Все это строится на шейдерах в WebGL.

    Первый пример очень похож на вот эту демку (лучше открыть в отдельном окне):


    А вот найти готовое решение один в один как на какой-то гифке из сети очень сложно. Часто его не будет. Дизайнер концепт нарисовал, а на практике никто такое еще не запрограммировал. В такой ситуации - только руками писать. Советую почитать введение в программирование шейдеров для верстальщиков и посмотреть стримы Юрия Артюха (меня терзают смутные сомнения, что он когда-то делал эффект, как во втором вашем примере).
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему не работает js в сафари браузерах?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    modal.show(...);

    Скорее всего проблема тут. На SO много вопросов в стиле "jquery show/hide не работает в safari". В общем случае можно дать рекомендацию не использовать функции show/hide, а добавлять свои CSS-классы к элементу в зависимости от его состояния.
    Ответ написан
    4 комментария
    4 комментария

  • Где тут ошибка?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Набор id у элементов в html: 1, 2, 6, 4, 5, 6.
    Набор id у элементов в js: 1, 2, 3, 4, 5, 3.

    Итого: третий и последний элемент, которые добавляются в массив, отсутствуют в html.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как создать снимок с помощью html2canvas?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Почему в примере не получается создать снимок

    Потому что параметры windowWidth и windowHeight в данном случае задавать не нужно. Уберите их и все заработает.
    Ответ написан
    Комментировать
    Комментировать

  • Как работают ошибки в JavaScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Возможно, что проблема даже не в js, а в сервере. Если взять страницу такого вида:
    <!DOCTYPE html>
<html>
    <head>
        <script src='./s1.js'></script>
        <!-- s1.js:
            window.onerror = function(message, filename, line, col, error) {
                console.log('Oops: %s', error.stack);
                return false;
            };
        -->
    </head>
    <body>
        <script src='./s2.js'></script>
        <!-- s2.js:
            $(function() {

            });
         -->
    </body>
</html>

    И захостить ее вместе со скриптами на одном сервере, на одном домене, то все будет работать. Если домены у страницы и скриптов разные - onerror работать не будет (там что-то с безопасностью связано). Если страница открыта в браузере просто как файл, то по идее браузер может считать каждый скрипт, подключаемый к ней, как лежащий на другом домене, и тоже ничего работать не будет.
    Ответ написан
    4 комментария
    4 комментария

  • Как импортировать 3D модель и крутить ее в three.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.
    Ответ написан
    6 комментариев
    6 комментариев

  • Как работает async js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

    Также, если у вас уже есть много скриптов, да еще и месиво из инлайново вставленных и асинхронно подгружаемых, причем все друг от друга зависят и оперативно это не починить, то можно организовать маленькую систему событий, которая будет в себе хранить информацию о том, кто загрузился, а кто - нет (чтобы не получился классический callback-hell). Она должна быть первым скриптом на странице. А загрузившиеся потом скрипты будут ей сообщать "я загрузился", а потом у нее спрашивать "ну что, вон тот уже загрузился?" а она такая "да", и они будут выполняться сразу, или "нет, пока нет", а они такие "ну ок, когда загрузится, скажи". Что-нибудь в таком духе. Также эта штука может помогать при отладке, чтобы понимать, что реально произошло на странице, а что еще нет.
    Ответ написан
    7 комментариев
    7 комментариев