Подскажите как можно реализовать данную задачу

Тема в разделе "JavaScript", создана пользователем AlexGood, 30 июл 2019.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Подскажите как можно реализовать данную задачу: https://web.archive.org/web/20160206132423/https://laragon.org/
    Или может есть где-то пример. При движении мышки, на заднем фоне рандомно рисуются объекты по точкам и совсем непонятно как это реализовано. Не уверен, но возможно это js. :Help::Help::Help:
     
  2. pasha-b

    pasha-b

    Регистрация:
    9 янв 2013
    Сообщения:
    186
    Симпатии:
    104
    Там там же все есть. Код в файле
    подключается и в нужном месте вставляется
    Код:
    <canvas id="constellationel"></canvas>
    Или еще так можно

    Или найти, по запросу Constellation effect или particles effect, примеров много.
     
    AlexGood и $iD нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    я вообще не там смотрел...
    копирую то что в codepen себе и у меня ничего не пашет
    почему такое может быть?
    --- Добавлено, 30 июл 2019 ---
    Я вот закинул с другого ресурса: http://particles.bestcard.dtraduga.vh55.hosterby.com/
    Вот сам ресурс: https://vincentgarreau.com/particles.js/#default
    Но не могу понять как сделать чтобы линии всегда были четкими а не плавно пропадали и появлялись
    Мне нужно чтобы они резко появлялись и пропадали как тут: https://web.archive.org/web/20160206132423/https://laragon.org/
    --- Добавлено, 30 июл 2019 ---
    А можно ли particles как-то повесить на body?
    --- Добавлено, 30 июл 2019 ---
    Я к тому, что нужно получить такой результат: http://prntscr.com/om1fyd
    По центру страницы вебплеер, а под ним партиклс... только вот как?
    Родителю плеера text-align: center и плеер центрируется, но партикл под ним ниже,
    position: absolute и партикл под ним как положено, но тогда центрирование плеера улетает.... ух.... что-то я сегодня туплю ((
    --- Добавлено, 30 июл 2019 ---
    Вот что у мня по итогу получилось: http://particles.bestcard.dtraduga.vh55.hosterby.com/
    Но при таком раскладе плеер не центрируется (((
     
    Последнее редактирование: 30 июл 2019
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    А что я говорил про абсолютное позиционирование?
    Уберите с .areelle абсолютное позиционирование и добавьте его на канвас. Раз канвас - фон, то именно у него должно оно быть.

    А у .areelle вот это:
    Код:
    .areelle {   
       position: relative;
       z-index: 1;
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    
    И видео будет по центру страницы.
     
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Да, все правильно, видимо меня надо пару раз ткнуть носом в одно и тоже:Mocking:
    Единственное непонятно тогда, что делать если нельзя использовать абсолютное позиционирование и добиться вот такого результата? чтобы все было вокруг плеера: http://prntscr.com/ombacj
    На данный момент у мня так получается: http://prntscr.com/omb6a2
    Когда вешаешь на ариэль абсолют, то все как надо: http://prntscr.com/ombbtu
    Но это неправильно...
    И получается если неправильно делать и вешать абсолют на ариэль то естественно на движение мыши партиклс уже не реагирует
     
    Последнее редактирование: 31 июл 2019
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Тогда нужно вообще убрать areelle. Мне изначально было не очень понятно зачем эта лишняя обёртка.

    На #particles-js уже есть правильные стили. Надо туда добавить только это:
    Код:
    display: flex;
    align-items: center;
    justify-content: center;
    И на video это:
    Код:
    position: relative;
    z-index: 1;
    И как я уже писал выше:
     
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    что-то я немного не понял... сейчас попробую повторить
    --- Добавлено, 31 июл 2019 ---
    Вроде все норм как сказали так и сделал, но канва реагировать перестала
    --- Добавлено, 31 июл 2019 ---
    Вроде разобрался
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Вижу, что уже всё правильно. Правда, вместо видео теперь картинка.

    И обратите внимание на эти стили:
    Именно они центрируют сейчас картинку. В былые времена могли понадобиться танцы с бубном, но сейчас есть флексбокс.
    Первая строка его включает, вторая центрирует содержимое блока по вертикали, а третья - по горизонтали.
     
    AlexGood нравится это.