Ответы пользователя по тегу JavaScript
  • 3D "window" в браузере?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    ...там работал обычный CSS, но был 3D объектом на который смотрит камера... Да, я видел всякие Three.js...

    Как раз в Three.js есть такая штука как CSS 3D Renderer. Можно расположить условные div елементы в пространстве и работать с ними "в 3D".
    Ответ написан
  • На каких технологиях создан сайт сериала тьма?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Крайне любопытен с точки зрения визуальной составляющей.
    Мне бы хотелось понимать, посредством каких технологий он был сделан.


    Не глядя в код, можно предположить использование следующих технологий:
    1. Волны абстрактные и на фотографиях, шум на фоне - WebGL, шейдеры. Вода на первом экране - скорее всего моделируется как идеальная жидкость, волны на фотографиях - чисто геометрические.
    2. Обведение текста в овал, трилистник с пунктиром, стрелки на карте - SVG, рисование линии по такому принципу.
    3. Плавные переходы между экранами можно делать по-разному, даже забытый модными фронтендерами pjax будет к месту. Можно познакомиться с barba.js - это если не самый популярный, то один из популярных инструментов для работы с плавными переходами. Можно использовать роутеры из SPA-фреймворков, не принципиально. Самое сложное здесь - все синхронизировать.
    4. Карта с персонажами - это может быть обычная верстка, подложенная под канвас с шумом. Самый простой вариант.
    5. Есть небольшое покачивание элементов вслед за мышкой, логично предположить, что это банальная CSS-трансформация на mousemove.
    6. Рисование дуг из точек - это может быть либо SVG, как в п.2, только эта линия будет маской, либо можно это строить как графики.
    7. Ну и немного стандартных CSS-анимаций там тоже есть.


    Дополнительные библиотеки здесь - дело вкуса, можно и на ванильном JS все сделать, разве что роутер я бы взял готовый. Вся соль в визуальных эффектах, а для них готовых решений не будет, если работа будет строиться по принципу "сначала придумать, потом сделать".
    Ответ написан
  • Как сделать 3D анимацию такого плана как на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Саму птицу, как уже верно заметили, можно соорудить на WebGL. Как пример подобной штуки, только без частиц вокруг и без ядреного шума на самих крыльях:
    Ответ написан
  • Как сделать эффект волны картинке на gsap?

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

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


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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    очень сложный с анимационной части сайт

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

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


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


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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Голосую за не указанный вариант №7: использовать классы (по одному на модуль) и никогда не шаманить ничего на прототипах вручную. Это позволит дольше сохранять понимание того, что вообще в коде происходит.

    export default class Person {
        constructor(name) {
            this.name = name;
        }
    
        getName() {
            return `My name is ${this.name}`;
        }
    }
    
    // Если нужен singleton, немного меняем экспорт:
    //
    // const PERSON = new Person();
    // export default PERSON;
    Ответ написан
  • Undefined, в чем причина?

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

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

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Uncaught SyntaxError: Cannot use import statement outside a module

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Ответ написан
  • Как для современных браузеров выводить анимацию, а для старых картинку?

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Есть очень прикольная штука - Locomotive Scroll.
    Ответ написан
  • Почему не работает js в сафари браузерах?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    modal.show(...);

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

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

    Итого: третий и последний элемент, которые добавляются в массив, отсутствуют в html.
    Ответ написан
  • Как создать снимок с помощью html2canvas?

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

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI 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 работать не будет (там что-то с безопасностью связано). Если страница открыта в браузере просто как файл, то по идее браузер может считать каждый скрипт, подключаемый к ней, как лежащий на другом домене, и тоже ничего работать не будет.
    Ответ написан