-
Cómo Slide Cajas con CSS
-
Antes de las relativamente nuevas hojas de estilo en cascada Web, o CSS, estándar CSS3 --- --- diseñadores tuvieron que crear animaciones sencillas, como por ejemplo una caja que se desliza hacia arriba o hacia abajo una página Web, con Flash. CSS3, un lenguaje de formato de elementos Web, le permite crear este tipo de animaciones con hojas de estilo incrustadas en el código HTML. HTML es el lenguaje de marcado predominante Web. La ventaja de usar CSS3 para crear animaciones simples es que el código CSS no requiere el navegador del usuario para descargar archivos flash externo que consumen muchos recursos.Instrucciones
1 Iniciar una nueva página Web en el programa que se utiliza para la edición de HTML. Se puede utilizar el tipo de documento XHTML Transición estándar de la industria para la página. Su código de partida debería tener este aspecto:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<Title> Animación </ title>
La <title> par de etiquetas puede, por supuesto, contener cualquier título que desee.
2 Crear el selector de cuadro de CSS. En CSS, un selector define un objeto o un área de la página. Puede hacer que el cuadro de cualquier tamaño y color que desee. El siguiente código CSS crea un cuadro negro de 200 por 200 píxeles. Colocarlo directamente debajo de la etiqueta <title> par de etiquetas.
<Style>
caja {
Anchura: 200px;altura: 200px;
background-color: negro;
position: absolute;
top: 0px;
left: 0px;
}
Para modificar el tamaño de la caja, y cambiar la propiedad "anchura" "altura". Para cambiar el color de la caja, editar la propiedad "background-color". Los últimos tres propiedades determinan la posición de la caja --- en este caso, la esquina superior izquierda de la página.
3 Crear el selector de control de la animación CSS. El siguiente código utiliza extensiones de WebKit, que funcionan con la mayoría de los navegadores. Colocarlo directamente debajo del código de selector de la caja.
.squarePath {
-webkit-animación-name: squarePath;
-webkit-animación-Duración: 8s;
-webkit-animación-tiempo-función: la facilidad de entrada-salida;
-webkit-animación-iteración de conteo: infinita;
}
El "webkit-animación-nombre de" propiedad define el nombre de la animación para hacer referencia en el código JavaScript que se ejecuta la animación. Los siguientes tres propiedades determinan la duración de la animación a 8 segundos, con y en-y-hacia fuera facilidad y una cuenta de iteración infinita. "Ease" es un efecto especial de animación que crea pausas a lo largo de la trayectoria de animación. Una facilidad para establecer "in-out" hace una pausa al principio y al final de la ruta. Para detener una animación en sólo el comienzo de la ruta, se usaría "facilidad en", por ejemplo. El "iteración contar" establece el número de veces que la animación se ejecuta. "Infinito" es una animación sin fin.
4 Crear el selector de la trayectoria de animación. El siguiente código crea un cuatro puntos, camino cuadrado. Las diapositivas de la caja a través de la página a la derecha, abajo de la página, a través de la página a la izquierda y, a continuación, la página a la posición original. Colocarlo directamente debajo del código creado en el paso 3.
@ -webkit-Fotogramas clave squarePath {
de {
top: 0px;left: 0px;
}
25% {
top: 0px;izquierda: 200px;
}
50% {
top: 200px;
izquierda: 200px;
}
75% {
top: 200px;left: 0px;
}
100% {
top: 0px;left: 0px;
}
}
</ Style>
Observe que los "superiores" y las propiedades de "izquierda" dicen a la animación, donde, mide en píxeles, para detener la caja de deslizamiento. La etiqueta </ style> cierra el código CSS.
5 Crear el código JavaScript. El siguiente código realiza la animación de acuerdo con las instrucciones que figuran en los selectores CSS. Colocarlo directamente debajo de la </ style> de cierre.
<Script type = "text / javascript">
función de movimiento () {
document.getElementById("box").className = "squarePath";}
</ Script>
</ Head>
Observe que la secuencia de comandos sabe qué instrucciones para utilizar el selector haciendo referencia a "squarepath" creado en el paso 3. El </ head> cierra la sección de cabecera de la página.
6 Coloque la animación en la sección del cuerpo de la página. La sección del cuerpo es donde se muestran los elementos de la página. El siguiente código le dice al navegador el cual selector CSS para usar referenciando el selector "#box" creado en el Paso 2. Coloque el código directamente debajo de la </ head> de cierre.
<Body onload = "move ()">
<Div id = "caja">
</ Div>
</ Body>
</ Html>
El "onload =" propiedad indica al navegador para iniciar la animación cuando se carga la página. La </ body> cierra la sección del cuerpo de la página, y la etiqueta </ html> se cierra, o extremos, la página Web.
Consejos y advertencias
- Puede modificar esta animación de muchas maneras, incluyendo la forma de la caja, tamaño y color, así como la ruta de la animación y la facilidad, mediante la sustitución de las propiedades de CSS3 existentes con otras propiedades válidas. Puede encontrar una lista completa de las propiedades de CSS3 válidos en el sitio web del W3C. W3C es el consorcio que desarrolla y mantiene los estándares web.
- No todos los navegadores soportan las extensiones de WebKit. Sin embargo, aquellos que no tienen normalmente una extensión de su propia, como .moz para los navegadores basados en Mozilla. No es raro tener que crear varias versiones de código CSS para dar cabida a todos los navegadores.
