Ingernirated

window.open('http://www.ya.ru', '_blank');

вот из google fonts берите а остальное если без свободной лицензии нельзя

Романыч!

Если речь идёт о кириллице, то с бесплатными шрифтами проблема: вроде то, но как-то не то.

это будет считаться, как правонарушением прав или чего-либо?

да, но это не значит что завтра за тобой приедут, есть популярные платные шрифты, но на них часто не берут лицензии, ибо слишком популярны, а бегать за каждым сайтом который их юзает это тоже проблемно. Есть шрифты от лучших студий, там уже следят за пиратством.

Хороший шрифт делает любой интерфейс приятным а текст удобным. И он не стоит сотни тысяч.
Сейчас недорого можно приобрести 1-2 начертаний на сайт:

Совет бюро, как приобрести шрифт чтобы не было про...
Паратайп каталог платных шрифтов с демократичными ценами, от 1900 рублей можно купить хороший шрифт (одно начертание) +бывают распрожади

потому что у родителя position: relative, убери его и будет как тебе нужно
https://jsfiddle.net/r896y5xL/1/

absolute относителен по отношению к родительскому relative

Во-первых, это бесплатно и при этом совершенно легально.

Во-вторых, Linux потребляет гораздо меньше аппаратных ресурсов.

В-третьих, хорошо настроенный Linux практически не нуждается во вмешательстве системного администратора, эксплуатируются по принципу «настроил и забыл».

Соглашусь с profesor08
Сами используем krpano. Писать с нуля смысла нет.
Добавлю только, что снимать с коптера нужно не абы как, а по определенном алгоритму.

Чекай WebGl думаю там ты найдешь ответ

Сфорткали панораму, с помощью коптера нарпимер, и нарисовали на canvas на webgl. Используется вот это: https://krpano.com/docu/html5/

Хороша статья по скроллу: https://evilmartians.com/chronicles/scroll-to-the-...

window.scrollTo({
    top: 1000,
    behavior: "smooth" // плавно
});

Без JS вовсе: якорь и scroll-behavior smooth https://developer.mozilla.org/ru/docs/Web/CSS/scro...

Вот хороший пример: https://jsfiddle.net/jmzpvm2e/4/

Надо использовать visibility и opacity

Есть 3 блока, которые хранятся в массиве
let block = document.querySelectorAll(".block");

NodeList - это не массив.

const index = Array.prototype.indexOf.call(block, e.target);

или

const index = [...block].findIndex(n => n === e.target);

или

let index = block.length;
while (index-- > 0 && block[index] !== e.target) ;

float: right или если через absolute, то right: 0;

Надо передавать в removeEventListener ту же функцию, что вы передавали в addEventListener. То есть, все color.bind(null, i) надо сохранить - в какой-нибудь массив, например.

Однако, раз вы используете bind ради передачи индекса, можно поступить иначе - уберите bind, вместо этого назначайте элементам атрибут, значение которого затем надо будет достать из целевого элемента внутри вашего color'а.

А на самом деле, не надо ничего - ни bind, ни дополнительных атрибутов, индекс вообще передавать не надо. Вы ведь используете индекс для того, чтобы обратится к элементу, на котором и произошёл клик. Он будет доступен в обработчике как this и как event.target (event.currentTarget, если клик был на дочернем элементе).

Смотря что ты хочешь сделать. Стилями можно управлять, если немного пошевелиться.

https://codepen.io/kris-iris/pen/MPJjgo

let wrap = document.querySelector('.wrap');

wrap.onclick = ()=> wrap.classList.toggle('noMagic');

.wrap{
  position: relative;
  width: 500px;
  height: 200px;
  background: lightblue;
  margin: 0 auto;
}

.wrap::before{
  position: absolute;
  content: 'Кликни на меня, детка!';
  height: 50px;
  width: 100%;
  background: lightgreen;
  transition: 2s;
}

.noMagic.wrap::before{
  content: 'А ты молодец!';
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move 1s forwards;
}

@keyFrames move{
  100% {
    height: 100%;
  }
}

let x = document.querySelectorAll(".x")

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function move() {
  x.forEach((e) => {
	await sleep(1000)
	e.style.display = "block"
  }
}

Напишем функцию перебора с задержкой элементов массивоподобного объекта, чтобы можно было делать так:

forEachWithDelay(
  document.querySelectorAll('.x'),
  1000,
  el => el.style.display = 'block'
);

Какие тут есть варианты:

Раз - таймауты сразу для всех элементов:

function forEachWithDelay(arr, delay, callback) {
  Array.prototype.forEach.call(arr, (n, i) => {
    setTimeout(callback, (i + 1) * delay, n);
  });
}

Два - рекурсивные таймауты, следующий назначается в коллбеке предыдущего:

function forEachWithDelay(arr, delay, callback) {
  (function next(i) {
    if (i < arr.length) {
      setTimeout(() => {
        callback(arr[i]);
        next(-~i);
      }, delay);
    }
  })(0);
}

Три - интервал:

function forEachWithDelay(arr, delay, callback) {
  let i = -1;
  const intervalId = setInterval(() => {
    if (++i < arr.length) {
      callback(arr[i]);
    } else {
      clearInterval(intervalId);
    }
  }, delay);
}

function move() {
    let wait = 0;
    x.forEach((e) => {
        setTimeout(function() {e.style.display = "block";}, wait);
        wait += 1000;
    }
}