Задать вопрос
  • Как через JavaScript транслировать видео на TV?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Создаете html:
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

    поднимаете сервер на html://localhost:8080. Открываете на телевизоре адрес своего комьютера(что-то тип 192.168.0.240:8080 - смотреть настройки роутера). Смотрите.

    А если серьезно, то Вам, очевидно, нужен сервер, который будет отдавать файлы(это делают стандартные библиотеки в nodeJS):
    const http = require('http');
    const fs = require('fs');
    
    http.createServer(function(req, res) {
    	res.writeHead(200, {'Content-Type': 'video/mp4'});
    	var rs = fs.createReadStream('video.mp4');
    	rs.pipe(res);
    }).listen(8080);

    Запускаете сервер. Открываете на телевизоре адрес своего компьютера(что-то тип 192.168.0.240:8080 - смотреть настройки роутера). Смотрите.

    Теперь добавляете свой функционал: библиотека\кодировка\сортировка и тд
    Зачем это самому делать? Есть на php - Plex, есть на js(почти как у меня пример выше:) ) - куча своих велосипедов или классика

    ps сервис Youtube написан на python
    Ответ написан
    Комментировать
  • Как взять значения элемента?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Aleksandr_Markelov, если Вам нужно по клику взять значение у след. за ним блока, то все блоки в массив , а значение получаем у this index + 1
    Вариант 2: через jq метод .next()
    Вариант 3: добавить какой-то data-* и по нему определять нужный блок

    Ps но мне кажется, что вы изначально придумали какую-то "чудную"(матом нельзя) структуру и теперь пытаетесь с ней как-то/что-то делать.... ну или по простому - не надо гланды через ж**у вырезать

    Начинайте изучать проектирование или так и будете какой-то бред делать... мое имхо
    Ответ написан
    Комментировать
  • Как сверстать главный экран лендинга полукруглой области?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    https://stackoverflow.com/questions/34354770/curve...
    В ответе представлены наиболее популярные способы реализовать сей круг.

    Я бы нарисовал svg и поместил прижатой к низу ибо кросбраузерно и больше контроля
    Ответ написан
    Комментировать
  • Как сделать сей декоративный элемент?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Куча способов есть от плевдо-элементов до background...
    Пусть будет самый тупорный: https://jsfiddle.net/aovpdwvz/2/
    Ответ написан
    Комментировать
  • Как удалить все одинаковые элементы из массива?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    var newArr = arr.filter( function(i) {if(i!==8) return i} );
    //  или arr = arr.filter( function(i) {if(i!==8) return i} );
    console.log(newArr); // [20, 60, 40]
    Ответ написан
    4 комментария
  • Как сделать такое приложение?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    А в чем проблема? Как Вы пытались решить эту проблему(написать в интернете "Решите мне задача" не считается)?

    Разделите конечную цель на маленькие:
    1. Создаете/рисуете точки
    2. Добавляете обработчик движения мыши
    3. Определяете дистанцию от мышки до точки ( теорема Пифагора )
    4. Увеличиваете/уменьшаете значение радиуса точки в зависимости от положения мыши

    Все! Самое сложное это теорема Пифагора(5-6 класс).
    Остается все разбросать по методам....

    Вот "наговнокодил" пример на коленках(использовал class поэтому поддержку браузера смотрите сами): https://codepen.io/janeRivas/full/NMGBvG/ (если лагает у Вас, то удалите функцию на строке 116 и 120 или поменяйте кол. точек на строке 18 )

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

    ps если как-то по-другому надо соединить линии между собой, то у нас на каждом кадре есть координаты точек this.pos.x и this.pos.y. Ну и меняй метод lineTo как тебе надо...

    psps наверно начинать надо с простого, но если делать нормально, то я бы делал на three.js или pixi.js. Логика точно такая же, только перфоманс будет в разы лучше + сможем избежать кучу проблем с картинками и тп...
    Ответ написан
    1 комментарий
  • Одинаковая ширина блоков?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Родителю - display: flex. Кнопкам - flex: 1
    https://jsfiddle.net/19zL1pey/1/
    Ответ написан
    Комментировать
  • Как сделать анимацию линии svg во всю высоту страницы при прокрутке?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Вот блок, который отвечает за анимацию линий:
    <div id="bg" class="" style="width: 100%; height: 7926.44px;">
      	<canvas id="mainBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
    	<canvas id="shinesBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
            <canvas id="animationC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
    </div>

    Как видно из html, тут не используется inline-svg. Поэтому Ваш подход изначально неправильный...

    Но если Вы хотите сделать такую линию на svg(тут будет мое имхо, которое не самое правильное(ибо это мазохизм такое делать так)), то я бы нарисовал всю svg-линию, которую поместил бы в div, который будет 100x100 вьюпорта(наверно нужно будет враппер какой-то). Спрятал бы svg (dashoffset etc). Отлавливаем скролл. Двигаем div в нужном направлении/ параллельно отрисовывая svg.
    Сразу можно сказать , что у Вас будут проблемы с адаптивностью(можно решить... но такое...) и fps

    А теперь как делают "нормальные ребята":
    Рисуем все в canvas. Полный контроль над всем. Никаких проблем с адаптивностью + 60 fps

    На данном сайте они вродь сами все js'ом рисовали в канвасе(анимировали gsap'ом) , но проще будет использовать PIXIjs или ThreeJS
    Ответ написан
  • Как загрузить текстуру на canvas при помощи PIXI.js?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    В пикcи есть удобный PIXI.loaders
    const loader = PIXI.loader;
    
    loader
      .add('first', '1.jpg')
      .add('second', '2.jpg');
    
    loader.load((loader, resources) => {
      let scene = new PIXI.Container();
    
      let bg = new PIXI.Sprite(resources.first.texture);
    
      bg.anchor.x = 0.5;
      bg.anchor.y = 0.5;
      bg.position.x = renderer.width / 2; 
      bg.position.y = renderer.height / 2;
    
      scene.addChild(bg);
      renderer.render(scene);
    }
    Ответ написан
    Комментировать
  • Как правильно конвертировать шрифт?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    https://www.fontsquirrel.com/tools/webfont-generator - это простой генератор на gulp(наверно) написанный. Он загружает файл. Имя файла без расширения помещает в название, полное имя файла помещает в url. На выходе и получаем Ваш код.

    Если хотите использовать один шрифт с разной "толщиной", то поменяйте название и font-weight
    @font-face {
        font-family: 'fira_sans';
        src: url('firasansbold.eot');
        src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
             url('firasansbold.woff2') format('woff2'),
             url('firasansbold.woff') format('woff'),
             url('firasansbold.ttf') format('truetype'),
             url('firasansbold.svg#fira_sansbold') format('svg');
        font-weight: 700;
        font-style: normal;
    }
    @font-face {
        font-family: 'fira_sans';
        src: url('firasansregular.eot');
        src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
             url('firasansregular.woff2') format('woff2'),
             url('firasansregular.woff') format('woff'),
             url('firasansregular.ttf') format('truetype'),
             url('firasansregular.svg#fira_sansregular') format('svg');
        font-weight: 400;
        font-style: normal;
    }

    Теперь можно использовать так:
    *{  
      font-family: "fira_sans";
    }
    .bold{
      font-weight: 700
    }
    .normal{
      font-weight: 400
    }


    ps или подключайте стандартные шрифты через fonts.google.com. Вот Fira Sans
    Ответ написан
    Комментировать
  • Как осуществить верстку, в которой настолько плавные переходы между страницами?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Если Вам нужен vanills JS, то используйте barbajs.org/transition.html
    Или любой из плагинов для jquery
    2. Дизайнер(моушен) рисует анимацию, Вы как верстальщик ее реализуете
    3. 5abc9021b49a2109119822.png
    У них на сайте просто сделали блоки разные и анимируют их(я бы делал в canvas - www.pixijs.com/)
    4. Да. Каждая страница является отдельной полноценной страницей со своим адресом, тегами и тд
    Ответ написан
    1 комментарий
  • Как создать бесконечное повторение скрипта js?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    https://jsfiddle.net/a3pvkhwp/1/
    const popup = document.querySelectorAll('.popup');
    let counter = 0;
    setInterval(function() {
    	popup[counter].classList.remove('show');
    	counter++;
    	counter === popup.length ? counter = 0 : console.log('¯\\_(ツ)_/¯')
    	popup[counter].classList.add('show');
    }, 1000)
    Ответ написан
    Комментировать
  • Как сделать прелоадер на сайт в %?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    демонстрация мокапов, очень много изображений которые очень высокого разрешения для ретины

    Подгружайте картинки js'ом(lazy load). Пусть вся станица будет 10%, то каждая загруженная картинка будет 90% / n-image. Вот и обновляйте статус после каждой картинки.

    Но изначально подход какой-то странный. Вы заставляете клиента ждать загрузки картинок всех? Почему не использовать lazy load? Под каждой картинкой pre-loader и по мере загрузки страницы меняйте pre-loader на картинку. Пусть клиент смотрит на 1 пока остальные грузятся.

    Ну и если уж совсем 'правильно', то делайте адекватную preview-картинку(маленького размера). Если ему понравится, то он перейдет на странице с полноразмерной картинкой
    Ответ написан
    1 комментарий
  • Как сделать выезжающее меню при свайпе JQuery?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    https://api.jquerymobile.com/swipeleft/
    $( "#el" ).on( "swipeleft", fn );
    $( "#el" ).on( "swiperight", fn );

    где fn - Ваша функция.

    ps ну и используйте on()
    $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
      $( this ).toggleClass( "active" );
    });
    Ответ написан
  • Canvas wave animate?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    У Вас какая цель стоит? Просто сделать: snapsvg.io
    Если цель стоит 60fps, то рисуйте на видеокарте https://threejs.org/
    Или тоже самое, но проще(2d): www.pixijs.com
    Ответ написан
    4 комментария
  • Есть ли аналог z-index для анимации и transition?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    z-index это такое же свойство и все остальные. которые используются в animation(transform)
    Вы чего хотите-то? От этого будет зависеть способ реализации...
    Ну допустим: https://jsfiddle.net/n5zz9fLj/2/ - можно плавности добавить при желании
    Ответ написан
    Комментировать
  • Svg и его друзья. Что с ним не так?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    <svg class="icon icon-vk">
      <use xlink:href="img/sprite.svg#icon-vk"></use>
    </svg>


    В папке img находится файл sprite.svg
    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-vk" viewBox="0 0 24 24">
        <path class="st0" d="M13.162 18.994c.609 0 .858-.406.851-.915-.031-1.917.714-2.949 2.059-1.604 1.488 1.488 1.796 2.519 3.603 2.519h3.2c.808 0 1.126-.26 1.126-.668 0-.863-1.421-2.386-2.625-3.504-1.686-1.565-1.765-1.602-.313-3.486C22.864 8.997 25.22 6 23.136 6h-3.981c-.772 0-.828.435-1.103 1.083-.995 2.347-2.886 5.387-3.604 4.922-.751-.485-.407-2.406-.35-5.261.015-.754.011-1.271-1.141-1.539A8.07 8.07 0 0 0 11.148 5c-2.273 0-3.841.953-2.95 1.119 1.571.293 1.42 3.692 1.054 5.16-.638 2.556-3.036-2.024-4.035-4.305C4.976 6.426 4.902 6 4.042 6H.787C.295 6 0 6.16 0 6.516c0 .602 2.96 6.72 5.786 9.77 2.756 2.975 5.48 2.708 7.376 2.708z"/>
    </symbol></svg>


    В sprite.svg добавляем другие иконки(добавляем symbol еще один
    <svg>
      <symbol id="icon-vk"></symbol>
      <symbol id="icon-instagram"></symbol>
      ...
    </svg>
    . Использовать точно также. Только id поменяйте.

    ps и еще. Надо поднять сервер, чтобы в chrome, opera отображались таким способом иконки(в firefox будут отображаться корректно всегда).Ибо chrome выдает ошибку
    Unsafe attempt to load URL .../img/sprite.svg#icon-vk from frame with URL ...page.html. 'file:' URLs are treated as unique security origins. , которую можно решить разрешением XMLHttpRequests. Вот тут можно решение найти https://github.com/jonathantneal/svg4everybody/iss...
    или вставлять инлайн. Тогда ошибки не будет и будут отображаться
    Ответ написан
    1 комментарий
  • Как поочередно подсветить блоки?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Ответ написан
    Комментировать
  • Как достать значения div?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Ответ написан
    Комментировать