Анимация по мотивам фильма «Матрица»
В процессе пробежки по Сети случайно «попал» на любопытный скрипт, который «зацепил». «Матрица» фильм культовый, как и некоторые элементы «декора» из него. Появилась идейка — задействовать анимацию при оформлении страницы 404 одного из проектов.
Версий анимации «Матрица» в интернет много. Похожих на оригинал: практически нет. Однако, «обнаруженное» наиболее близко подошло к первоисточнику. Смотрим?
Респект автору работы: yuanchuan.
Применить скрипт анимации можно разно, в зависимости от задач. Достаточно широкие перспективы по варьированию переменных скрипта и версиям стилей css. Есть, однако, сомнения по поводу «тяжести» скрипта для его практического применения.
Тем не менее, пусть будет эта заметка «на память», может еще когда-нибудь вернемся к вопросу. Итого:Demo вариант выглядит как-то так
:
Картинка Харли Квинн к анимации «Матрица» отношения не имеет
Она превносит антураж легкомыслия данной публикации.
В исходный проект были внесены некоторые изменения (анимация видна только в окне div, но не в body). При желании всегда можно посмотреть исходник (ссылка выше). В настоящей версии зарисовка выглядит так:
HTML
CSS
#mainrain p {line-height:1;}
#mainrain span {display:block; width:1em; height:1em; font-size:1.3em; color:#9bff9b11; text-align:center; font-family:"Helvetica Neue", Helvetica, sans-serif;}
JS
function r(from, to) {
return ~~(Math.random() * (to - from + 1) + from);
}
function pick() {
return arguments[r(0, arguments.length - 1)];
}
function getChar() {
return String.fromCharCode(pick(
r(0x3041, 0x30ff),
r(0x2000, 0x206f),
r(0x0020, 0x003f)));
}
function loop(fn, delay) {
let stamp = Date.now();
function _loop() {
if (Date.now() - stamp >= delay) {
fn();stamp = Date.now();
}
requestAnimationFrame(_loop);
}
requestAnimationFrame(_loop);
}
class Char {
constructor() {
this.element = document.createElement('span');
this.mutate();
}
mutate() {
this.element.textContent = getChar();
}}
class Trail {
constructor(list = [], options) {
this.list = list;
this.options = Object.assign(
{ size: 10, offset: 0 }, options);
this.body = [];
this.move();
}
traverse(fn) {
this.body.forEach((n, i) => {
let last = i == this.body.length - 1;
if (n) fn(n, i, last);
});
}
move() {
this.body = [];
let { offset, size } = this.options;
for (let i = 0; i < size; ++i) {
let item = this.list[offset + i - size + 1];
this.body.push(item);
}
this.options.offset =
(offset + 1) % (this.list.length + size - 1);
}}
class Rain {
constructor({ target, row }) {
this.element = document.createElement('p');
this.build(row);
if (target) {
target.appendChild(this.element);
}
this.drop();
}
build(row = 20) {
let root = document.createDocumentFragment();
let chars = [];
for (let i = 0; i < row; ++i) {
let c = new Char();
root.appendChild(c.element);
chars.push(c);
if (Math.random() < .5) { loop(() => c.mutate(), r(1e3, 5e3));
}
}
this.trail = new Trail(chars, {
size: r(10, 30), offset: r(0, 100) });
this.element.appendChild(root);
}
drop() {
let trail = this.trail;
let len = trail.body.length;
let delay = r(10, 100);
loop(() => {
trail.move();
trail.traverse((c, i, last) => {
c.element.style = `
color: hsl(136, 100%, ${85 / len * (i + 1)}%)
`;
if (last) {
c.mutate();
c.element.style = `
color: hsl(136, 100%, 85%);
text-shadow:
0 0 .5em #fff,
0 0 .5em currentColor;
`;
}
});
}, delay);
}}
const mainrain = document.querySelector('#mainrain');
for (let i = 0; i < 50; ++i) {
new Rain({ target: mainrain, row: 50 });
}
При желании можно скачать скрипт, дабы его просто вызвать по месту применения стандартным: <script src="/rain-matrix.js"></script>
Как, зачем и «с какого перепугу» использовать данную «примочку» — дело сугубо личное. Я, например, разместил эту «матрицу» на «заглушку» тестовой страницы, можно посмотреть. Достаточно стильно можно оформить страницы 404, отдельные блоки тематических страниц, пр.
На этом, наверное, и закончим этот материал. Тестируйте, «перепиливайте», комментируйте. Оставьте свой комментарий, при желании. Вопросы, если возникнут, задавайте, по возможности ответим
Возможно, будет продолжение темы, поскольку есть еще парачка интересных аналогичных скриптов, достойных ковыряния. Удачи!
Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.