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

enero 28. 2019,
 Autor: Roberto Ortiz

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);

Los comentarios están cerrados.

» ¡Suscríbete a nuestro boletín! Recibirás ofertas especiales en cursos y recursos gráficos gratis, una vez a la semana.


Sí quiero suscribirme