• Как сделать такой слайдер с такими эффектами?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    В целом в других ответах все уже описали, я лишь проголосую за разработку этого на JS, а не на CSS, т.к. часто в таких переходах будут разные кривые траектории или рандомные значения, которые было бы неплохо генерировать каждый раз заново.

    Ну и простенький примерчик чего-то похожего по принципу действия:



    P.S.: Но вообще-то в плане производительности было бы уместно все эти геометрические штуки рисовать на канвасе, а не делать кучу одновременных изменений CSS-свойств у элементов.
    Ответ написан
    Комментировать
  • Что за библиотека используется, в данном коде?

    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
    Creative frontend developer
    0. Делим 360 градусов на N частей. Получаем N направлений.
    1. Делаем по картинке с коробкой для кажного из направлений. Сохраняем по порядку.
    2. Загружаем все картинки (по одной, или спрайт с ними) на клиента.
    3. Выводим на канвас по одной картинке, выбирая их в зависимости от позиции скролла.

    Альтернативно - то же самое, но вместо канваса меняем url у элемента img (именно так у них сделано).
    Альтернативно - сообразить 3D модель коробки, текстуру и загуглить, как делать презентации товаров на Three.js.
    Ответ написан
    4 комментария
  • Анимация на canvas/js?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На CSS вы это никак не сделаете - там неравномерное растяжение картинок присутствует. Тут "начальник отдела разработки" либо не шарит во фронтенде, либо пытается сбить цену. Но штука из разряда "ябзаверстал", а я тут как раз собираю коллекцию примеров с шейдерами, так что набросал похожий эффект для нее, только без кляксы в центре (там есть немного лишнего кода, но это издержки, чтобы серия примеров не сильно отличалась).


    * Если вдруг будете копировать себе, не забывайте про лицензию.
    Ответ написан
    8 комментариев
  • Что за эффект при скролле?

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

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


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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .main-header {
        overflow: hidden;
    }
    Ответ написан
    Комментировать
  • Gulp watch не отслеживает измения в стилях и .js файлах?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Кажется тут ./src/css/**/.css
    должна быть еще звездочка ./src/css/**/*.css.

    И вот тут ./src/js/**/.js
    тоже ее не хватает ./src/js/**/*.js.
    Ответ написан
  • Как правильно настроить внутреннюю тень SVG?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Тут все дело в том, что вы используете для создания тени не саму кривую штуку, а "прозрачность" вокруг нее. Это немного нелогично с точки зрения понятия "тень". То есть у вас тень отбрасывает "пустота" вокруг кривой штуки (и эта "пустота" еще и обрезается в неудачном месте). Тут нужно использовать обратный подход, когда именно кривая штука используется для создания тени. В вашем примере для этого нужно поменять tableValues в feFuncA с "1 0" на "0 1" и в первом feComposite заменить "in" на "out".

    Как альтернативный пример:


    Вобщем сделать это можно по-разному, главное в конце проверить кроссбраузерность на всякий случай.
    Ответ написан
    7 комментариев
  • Как уменьшить svg код?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Пример километрового SVG


    Это не SVG. Это обычная растровая png картинка, которую закодировали в base64 и вставили в SVG. Сжать никак не получится (ну то есть насколько вы растровую картинку сожмете?). Вам нужно эту штуку нарисовать изначально в векторе, тогда она будет маленькая и аккуратненькая.
    Ответ написан
    3 комментария
  • Где тут ошибка?

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    GitHub Pages предоставляет только хостинг для статики, никаких серверных скриптов там не запустить. Так что да, если вам нужен PHP, то этот вариант не подойдет.
    Ответ написан
    Комментировать
  • Почему сафари сжимает SVG?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У Safari есть проблемы с отображением SVG-картинок внутри flex-контейнеров. Стандартное решение - сделать непосредственным родительским элементам этих картинок display:block или inline-block.
    Ответ написан
    Комментировать
  • Как создать снимок с помощью html2canvas?

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    ЧТО ДЕЛАТЬ ???

    По указанному в деталях ошибки адресу 185.27.134.11 я смог доконнектиться только через VPN. А напрямую или через обычный прокси-сервер - connection refused. Интуиция подсказывает, что тут не обошлось без роскомнадзора. Вариантов решения два - либо организовать себе туннель через пока еще незаблокированные места в интернете, либо заводить трактор. Если вы уже, то есть еще вариант, что у вас там какой-то свой локальный firewall есть и не пускает, но это лечится в большинстве случаев тем же туннелем.
    Ответ написан
    Комментировать
  • Как создать сайт на GitHub Pages, в адресе которого нет репозитория?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Если я правильно понял вопрос, то вам нужно сделать репозиторий с названием username.github.io, где username - это ваш ник на гитхабе. Ветка master в нем будет хоститься по адресу вида https://username.github.io/ , без каких-либо дополнений в конце.
    Ответ написан
    Комментировать
  • Как работают ошибки в 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 работать не будет (там что-то с безопасностью связано). Если страница открыта в браузере просто как файл, то по идее браузер может считать каждый скрипт, подключаемый к ней, как лежащий на другом домене, и тоже ничего работать не будет.
    Ответ написан
  • Как создать несколько репозиториев-хостингов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Создавайте в каждом своем репозитории ветку "gh-pages". Ее содержимое захостится по адресу https://username.github.io/repository-name/ , вне зависимости от содержимого репозитория с названием "username.github.io".

    Таким образом можно в репозитории с названием "username.github.io" иметь личный сайт-визитку, а сами проекты будут жить сами по себе в отдельных репозиториях.
    Ответ написан
    Комментировать
  • Интерактивная карта с svg и css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Подскажите как реализовать SVG интерактивную карту без использования обычной картинки. У многих в уроках используют картинку и поверх уже прописывают svg элементы. Я же хочу сделать полностью на svg фон и элементы к нему но вот не знаю как правильно сделать это...

    Если взять интерактивную карту, состоящую из картинки и SVG поверх нее (как в этой статье), и убрать картинку, то останется интерактивная карта, состоящая только из SVG. Это вроде как очевидно. Вы можете дорисовывать или раскрашивать элементы в SVG на свой вкус, но принцип работы интерактивной части останется тем же.
    Ответ написан
    Комментировать