Как делается такой эффект?

Question

[Александр]

Листайте до bullittagency

Есть такой плагин или придется писать самому?
Уж очень понравилось!

Answer 1

[DimaDolgoter]

Видео на фоне. При наведении фон буквы прозрачный, при mouseout задержка на восстановление фона

Comments

[Александр]

Я через css сейчас сделал. Правильнее ли будет на js? Точнее, какой код будет меньше нагружать устройство?

Answer 2

[Ivan Bogachev]

Конкретно у них это реализовано просто кучей квадратных дивов, которым меняется прозрачность при наведении мыши. Ну а спустя некоторый отрезок времени меняется обратно. И буквы в виде картинок (зачем - не понятно).

Можно также все это делать с помощью SVG-маски, тоже из кучи квадратов, тоже менять им прозрачность при наведении мыши. По идее маска должна быть более производительным решением в этой ситуации.

Answer 3

[frees2]

В общем плохо реализовано, по новому это было бы через объект history и fetch(myRequest).
Не надо никаких плагинов совсем.

Comments

[Александр]

Вот проблема в том, что я не совсем понимаю как это реализовать правильно. Делаю статичными блоками, он получается кривой. Может подскажете поподробнее?

[frees2]

Александр, https://developer.mozilla.org/ru/docs/Web/API/Hist...
Только вместо XMLHttpRequest использовать fetch, тогда будет безопасно и можно прямо строку не кодировать, все давно выложено в интернете.

[Александр]

frees2, Я говорю о эффекте, при котором при наведении на куб его opacity становиться 0, а после ухода от него становится 1

[frees2]

Александр, Если хочется запомнить событие то

function load(event) {
var tar = event.target.id;
 localStorage.setItem('a', tar); ..................