Hay un par de propiedades específicas de WebKit que hacen posible dar al texto un fondo degradado:
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;Estos permitirán que el fondo del elemento principal se convierta en el fondo del texto interior. Tengo que pensar, si hacemos un degradado horizontal que se desvanece en un patrón gris-blanco-gris, luego lo animamos de izquierda a derecha, podríamos hacer que la pantalla “deslizar para desbloquear” del iPhone/iPad no tenga imágenes en ¡todo!
WebKit solo demostración:
Ver demostración Descargar archivos
Estructura de degradado
El texto “deslizar para desbloquear” es una etiqueta h2. Le daremos el fondo degradado, que está estructurado así, con 5 “paradas de color”:
background:
-webkit-gradient(linear,left top,right top,
color-stop(0, #4d4d4d),
color-stop(0.4, #4d4d4d),
color-stop(0.5, white),
color-stop(0.6, #4d4d4d),
color-stop(1, #4d4d4d)); Con las dos propiedades del principio de este artículo, el texto se destaca así:
Observe que el ancho del fondo es el doble del ancho del área. Esto nos da un poco de gris para trabajar en ambos lados del resaltado, por lo que la parte resaltada en blanco puede deslizarse y el texto puede permanecer gris antes y después. Si tuviéramos que animar el fondo más a la izquierda o a la derecha de lo que está disponible, el texto se vuelve negro (malo).
El siguiente paso es animar la posición de ese fondo de izquierda a derecha.
La etiqueta h2 se encuentra dentro de un “pozo” que se encarga de obtener el fondo negro detrás del texto (ya que hemos robado el fondo del propio h2). Esto también controla el ancho de h2, ya que por defecto tiene un ancho del 100 % como elemento a nivel de bloque. El pozo tiene un ancho fijo. Entonces el h2 es el doble de ese ancho (200%). Entonces, nuestra animación puede comenzar con el ancho negativo del pozo y terminar con el ancho positivo del pozo.
#well {
width: 720px;
}
h2 {
width: 200%;
-webkit-animation: slidetounlock 5s infinite;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}¡Hurra! Destacado animado en el texto! Aquí está todo junto:
#well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
border: 2px solid #454545;
overflow: hidden;
}
h2 {
font-size: 80px;
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
padding: 0;
width: 200%;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100% {
background-position: 720px 0;
}
}Bonificación: la cosa desbloqueada en jQuery
Para mí, se trataba principalmente de replicar el efecto de texto genial sin imágenes. Hecho y hecho. Pero bueno, también podríamos abordar la parte de desbloqueo deslizante, ¿eh? El pequeño botón deslizante con la flecha probablemente podría lograrse con CSS puro (usando triángulos, entre otras cosas). Pero, no vayamos allí hoy. El control deslizante seguirá siendo una imagen e irá directamente dentro del propio h2.
<h2><img src="https://css-tricks.com/slide-to-unlock/images/arrow.png" alt="slider" /> slide to unlock</h2>Cargaremos jQuery, jQuery UI y nuestro propio script personalizado:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="js/slidetounlock.js"></script>Usaremos la función arrastrable jQuery UI en la imagen. Restringiremos su movimiento al eje X (horizontal). Como todas las buenas funciones de jQuery UI, esto tiene devoluciones de llamada. Adjuntaremos uno al evento de arrastre que se activa repetidamente a medida que se arrastra el elemento. Con eso, probaremos si ha llegado lo suficientemente lejos como para ser considerado “desbloqueado”. Si es así, dispararemos una acción. En este caso, desvaneciendo el pozo. Para la devolución de llamada de “detención”, que se activa cuando se suelta el botón del mouse, probaremos si el elemento está por debajo de nuestra distancia de finalización y lo devolveremos a la izquierda si no es así.
$(function() {
$("h2 img").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
}
},
stop: function(event, ui) {
if (ui.position.left < 551) {
$(this).animate({
left: 0
})
}
}
});
});Traté de hacer que el evento de arrastre también atenúe la opacidad del texto a medida que lo desliza, como el iPhone/iPad, pero me parece que WebKit no permite una opacidad parcial en el texto con un clip de fondo. No investigué mucho, pero sé que envolver el texto en un lapso y tratar de ajustar la opacidad de ese lapso simplemente no funcionaría (hasta que fuera cero).
notas
- Marco Kuiper también ha abordado esto antes, pero con un enfoque diferente (GIF animado).
- El código anterior es solo para navegadores web de escritorio y no funcionará en navegadores móviles. Evan Black tomó este ejemplo y le agregó eventos táctiles de JavaScript, haciendo que funcione en Mobile Safari. Enganché su código y entré en el ejemplo en vivo en este sitio, las únicas alternancias son un poco de jQuerification
.