Códigos para animar la URL de la barra de dirección del navegador

Animar la URL de la barra de direcciónPuedes utilizar emojis o graphical unicode characters, junto con un poco de código Javascript, para agregar una animación en la URL de la barra de dirección del navegador.

 

Estas pequeñas animaciones las puedes utilizar por pura diversión, no tienen un beneficio en particular.

 

La única animación que sí puede llegar a tener utilidad, es la barra de progreso, que se mueve cuando das Play a un video.

 

Si quieres agregar una animación a la URL de la barra de dirección, tienes que copiar uno de los 8 códigos que más abajo te comparto.

 

Luego debes de pegar ese código en el header, o en la META tag de la página.

 

Si quieres utilizar otro tipo de emoji, también lo puedes hacer. Sólo debes de sustituir los emojis en los códigos.




Animaciones para la URL de la barra de direcciones



Estos experimentos son los que me gustan porque no sirven para nada, pero al mismo tiempo son muy fascinantes.


Siempre agradecerá que existan personas con mucho talento, que se tomen el tiempo de experimentar.


Y que comparten sus descubrimientos, para que cualquiera los pueda adaptar, modificar y utilizar en cualquier tipo de proyectos.


Estos son los códigos junto con las animaciones que se verán en la barra de URL.


Si quieres un demo en vivo de las animaciones funcionando, entra a la página del creador de los códigosMatthew Rayfield– y da clic en la casilla de verificación. Para que se activen las animaciones.


Luna




Animar la URL de la barra de dirección




var f = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘'];
function loop() {
location.hash = f[Math.floor((Date.now()/100)%f.length)];
setTimeout(loop, 50);
}
loop();





Reloj




Animar la URL de la barra de dirección




var f = ['🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛'];





Bebés




Animar la URL de la barra de dirección




var e = ['🏻', '🏼', '🏽', '🏾', '🏿'];
function loop() {
var s = '',
i, m;
for (i = 0; i < 10; i ++) {
m = Math.floor(e.length * ((Math.sin((Date.now()/100) + i)+1)/2));
s += '👶' + e[m];
}
location.hash = s;
setTimeout(loop, 50);
}
loop();





Eclipse




Animar la URL de la barra de dirección




var f = ['🌑', '🌘', '🌗', '🌖', '🌕', '🌔', '🌓', '🌒'],
d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
m = 0;
function loop() {
var s = '', x = 0;
if (!m) {
while (d[x] == 4) {
x ++;
}
if (x >= d.length) m = 1;
else {
d[x] ++;
}
}
else {
while (d[x] == 0) {
x ++;
}
if (x >= d.length) m = 0;
else {
d[x] ++;
if (d[x] == 8) d[x] = 0;
}
}
d.forEach(function (n) {
s += f[n];
});
location.hash = s;
setTimeout(loop, 50);
}
loop();





Ola




Animar la URL de la barra de dirección




function loop() {
var i, n, s = '';
for (i = 0; i < 10; i++) {
n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4;
s += String.fromCharCode(0x2581 + n);
}
window.location.hash = s;
setTimeout(loop, 50);
}
loop();





Barra de progreso




Animar la URL de la barra de dirección




function loop() {
var s = '',
p;
p = Math.floor(((Math.sin(Date.now()/300)+1)/2) * 100);
while (p >= 8) {
s += '█';
p -= 8;
}
s += ['⠀','▏','▎','▍','▌','▋','▊','▉'][p];
location.hash = s;
setTimeout(loop, 50);
}





Barra progreso de video




Animar la URL de la barra de dirección




var video;
function formatTime(seconds) {
var minutes = Math.floor(seconds/60),
seconds = Math.floor(seconds - (minutes*60));
return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
}
function renderProgressBar() {
var s = '',
l = 15,
p = Math.floor(video.currentTime / video.duration * (l-1)),
i;
for (i = 0; i < l; i ++) {
if (i == p) s +='◯';
else if (i < p) s += '─';
else s += '┄';
}
location.hash = '╭'+s+'╮'+formatTime(video.currentTime)+'╱'+formatTime(video.duration);
}
video = document.getElementById('video');
video.addEventListener('timeupdate', renderProgressBar);





Barra de progreso con emojis




Animar la URL de la barra de dirección




var e = ['🌑', '🌘', '🌗', '🌖', '🌕'],
video;
function formatTime(seconds) {
var minutes = Math.floor(seconds/60),
seconds = Math.floor(seconds - (minutes*60));
return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
}
function renderProgressBar() {
var s = '',
c = 0,
l = 10,
p = Math.floor(video.currentTime / video.duration * ((l*5)-1)),
i;
while (p >= 5) {
s += e[4];
c ++;
p -= 5;
}
s += e[p];
c ++;
while (c < l) {
s += e[0];
c ++;
}
location.hash = s+formatTime(video.currentTime)+'╱'+formatTime(video.duration);
}
video = document.getElementById('video');
video.addEventListener('timeupdate', renderProgressBar);