html - tesis - investigaciones sobre netflix
¿Hay alguna manera de cambiar el color del texto "a medio camino" a través de un personaje en una página web? (3)
Aquí hay otra implementación: http://jsfiddle.net/3rcav4s4/ .
HTML:
<div class = "progressBar">
<div class = "background">0%</div>
<div class = "container">
<div class = "foreground">0%</div>
</div>
</div>
<button>Play</button>
CSS:
*:not(button) {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.progressBar {
width: 150px;
height: 15px;
border: 1px solid #000;
position: relative;
margin-bottom: 5px;
}
.progressBar .background,
.progressBar .foreground {
width: 150px;
height: 13px;
font: normal 10px/13px Sans-Serif;
text-align: center;
}
.progressBar .container {
position: absolute;
top: 0;
left: 0;
width: 0%;
overflow: hidden;
}
.progressBar .foreground {
background-color: navy;
color: yellow;
}
JS / jQuery:
$(function() {
$("button").click(function() {
var start = 0;
var interval = setInterval(function() {
if(start >= 100) clearInterval(interval);
$(".progressBar").find(".background, .foreground")
.text(start + "%")
.end()
.find(".container")
.css("width", start++ + "%");
}, 10);
});
});
Una cosa que he visto en algunas aplicaciones de escritorio es la capacidad de cambiar el color del texto a medida que cambia el fondo, para tener efectivamente varios colores en un solo carácter. Lo he visto más comúnmente con barras de progreso que muestran el porcentaje dentro de la barra. En general, se utilizará un color de fondo más oscuro como color de la barra de progreso, y a medida que avanza, el color oscuro no contrasta lo suficiente con el texto oscuro, por lo que el color cambia tan pronto como la barra se solapa con el texto. Esta imagen debería explicar a qué me refiero:
Como puede ver, el texto es negro cuando está al 0%, cuando no hay fondo oscuro. Cuando la imagen de fondo progresa completamente al 100%, el texto es completamente blanco. Pero en el medio, como puede ver al 50%, el texto es mitad negro / mitad blanco, y en realidad está dividido en el carácter "0" en este ejemplo.
¿Hay alguna manera de hacer esto en absoluto en una página web? CSS, imágenes, Jquery, de lo contrario? (Preferiblemente, no Flash ni un applet de Java; realmente me pregunto si es posible una solución basada en HTML.) ¡Gracias!
Esto es realmente interesante en realidad. Aquí está su barra de progreso. Funciona bien en IE5.5 + y Safari 5 (navegadores que probé).
Utiliza colores del sistema. :RE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progress</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.progressbar, .progressbar strong {
display:block;
height:1.2em
}
.progressbar, .progressbar em {
width:10em
}
.progressbar strong, .progressbar em {
position:absolute;
top:0;
left:0
}
.progressbar {
font:status-bar;
color:windowtext;
background:window;
border:1px solid windowframe;
text-align:center;
position:relative
}
.progressbar strong {
background:highlight;
width:0;
font-weight:normal;
overflow:hidden
}
.progressbar em {
color:highlighttext;
font-style:normal
}
</style>
<script type="text/javascript">
function progress(bar) {
var text1 = bar.getElementsByTagName(''span'')[0];
var overlay = bar.getElementsByTagName(''strong'')[0];
var text2 = bar.getElementsByTagName(''em'')[0];
var value = parseInt(bar.getAttribute(''progress''), 10);
value += 1;
overlay.style.width = value / 10 + ''em'';
text1.innerHTML = text2.innerHTML = value + ''%'';
bar.setAttribute(''progress'', value);
if (value < 100)
setTimeout(function() { progress(bar) }, 20);
}
window.onload = function() {
var span = document.getElementsByTagName(''span'');
for (var i = 0; i < span.length; i++) {
if (span[i].className == ''progressbar'') {
span[i].setAttribute(''progress'', 0);
var el1 = document.createElement(''span'');
el1.innerHTML = ''0%'';
span[i].appendChild(el1);
el1 = document.createElement(''strong'');
var el2 = document.createElement(''em'');
el2.innerHTML = ''0%'';
el1.appendChild(el2);
span[i].appendChild(el1);
progress(span[i]);
}
}
}
</script>
</head>
<body>
<p><span class="progressbar"></span></p>
</body>
</html>
Tenga en cuenta que utilicé setAttribute para asignar el valor a la barra de progreso usando un nombre de atributo personalizado.
Modificar el script para un progreso real
El ejemplo anterior es solo una barra de progreso ficticia, porque usa un temporizador para aumentar el valor. Para progresar realmente, tienes que modificar un poco la secuencia de comandos. Puede cambiar el progress la función para que agregue el valor al valor actual, o puede hacerlo para que establezca el valor. El segundo enfoque es probablemente lo que quieres usar.
function add(bar, value) {
bar = document.getElementById(bar);
value = parseInt(bar.getAttribute(''progress''), 10) + value;
value = value > 100 ? 100 : value < 0 ? 0 : value;
var text1 = bar.getElementsByTagName(''span'')[0];
var overlay = bar.getElementsByTagName(''strong'')[0];
var text2 = bar.getElementsByTagName(''em'')[0];
overlay.style.width = value / 10 + ''em'';
text1.innerHTML = text2.innerHTML = value + ''%'';
bar.setAttribute(''progress'', value);
}
function set(bar, value) {
value = value > 100 ? 100 : value < 0 ? 0 : value;
bar = document.getElementById(bar);
var text1 = bar.getElementsByTagName(''span'')[0];
var overlay = bar.getElementsByTagName(''strong'')[0];
var text2 = bar.getElementsByTagName(''em'')[0];
overlay.style.width = value / 10 + ''em'';
text1.innerHTML = text2.innerHTML = value + ''%'';
}
Puedes dejar de lado el value = value > 100 ? 100 : value < 0 ? 0 : value value = value > 100 ? 100 : value < 0 ? 0 : value value = value > 100 ? 100 : value < 0 ? 0 : value si se asegura de que el valor pasado a la función esté entre 0 y 100.
Editar:
Cambié innerText a innerHTML para que funcione en Firefox. No estaba enterado de esto. También cambié en la display:inline-block CSS display:inline-block en display:inline-block para display:block . Sé de esta manera que ya no puedes tener la barra de progreso en línea, pero esto funciona en Netscape 9.
Voy a empezar:
- Crea dos "barras de progreso" del mismo tamaño (
divs). Establezca su tamaño al ancho total que serían si estuvieran al 100%. - Ponga una barra en texto negro con fondo blanco y la otra en texto amarillo con fondo azul, como se muestra en el ejemplo anterior.
- Establezca la barra amarilla / azul en un
divprincipal y aumente el ancho del elemento principal en cada incremento porcentual. Coloque al padre sobre la barra negra / blanca. - También en cada aumento, actualice las etiquetas de ambas barras de progreso para representar el porcentaje.
Eso simulará el mismo efecto sin tener que pintar manualmente medio personaje. Será difícil en CSS porque tendrás que posicionar uno sobre el otro.
El beneficio de hacerlo de esta manera es que puede mostrar fácilmente caracteres medio pintados. Sin embargo, ya existe una barra de progreso jQuery que puede usar.