Задать вопрос
  • Как изменить цвет элементу при пересечении экранов (при скролле)?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Делается по аналогии с стики-меню. Только добавить несколько условий.

    Вам необходимо узнать:
    1) Значение секций относительно верха страницы:
    topPos = element.offsetTop
    2) Высоту секций:
    h = document.getElementById('A').clientHeight ||
    h = document.getElementById('A').offsetHeight ||
    h = document.getElementById('A').scrollHeight ||

    3) Позицию скролла:
    t = window.pageYOffset

    Отслеживать событие onscroll
    Составить условие:
    Если t между topPos(значение секции A) и topPos(значение секции A) + h(значение секции A), то меняем класс
    Если t между topPos(значение секции B) и topPos(значение секции B) + h(значение секции B), то меняем класс
    ....
    Чтобы на загружать в пустую процессор лучше добавить debounce'р для onscroll

    Или использовать уже готовые библиотеки:
    ScrollReveal
    Scrollmagic/
    Их много. Выбирайте, которая будет Вам больше подходить.
    Тут нужно будет поправить отступ, при которых должно срабатывать Ваше событие. И, возможно, само событие(ибо это обычно появление, а у Вас смена класса)
    Ответ написан
    Комментировать
  • Как извлечь картинку с сайта?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Ctrl+shift+i (консоль разработчика) или правой кнопкой мыши по странице -> Исследовать (Inspect)
    2. Вкладка network
    3. В шапке выбрать img(изображения)
    4. Обновить страницу
    В ответ вы получите все изображения со страницы. и Вот ваша картинка
    Ответ написан
    8 комментариев
  • Два блока объединились. Как исправить?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    У Вас в строке 16 в css задана фиксированная ширина блока
    .logo {
      background: #000;
      /* width: 42px; удалить*/ 
      height: 42px;
      display: inline-block;
      margin-top: 14px;
    }
    Ответ написан
    2 комментария
  • Как сверстать(правильно) такое?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    А в чем состоит задача? Наклонить блоки? transform: skewY(20deg) вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами

    Сразу извинюсь за говнокод (совсем худо чет мне сейчас), но для показа идеи сойдет: https://jsfiddle.net/ejoqLu7m/1/

    1. Создаете блок, который смещаете по оси Y на N градусов
    2. Внутри создаете блок, который смещаете по оси Y на -N градусов.
    3. Первому блоку задаете oveflow: hidden
    4. Вопрос адаптивности решаете шириной в % (50% в нашем примере)

    Адаптивно\кросбраузерно. В2 картинка по аналогии делается.

    Или я задачу не так понял?
    Ответ написан
    2 комментария
  • Как через 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 комментария