Bienvenidos sean a este post, hoy comenzaremos una serie muy particular con esta libreria.
En este caso vamos a interiorizarnos en como lograr animaciones por medio de jQuery, estos van a ser cambios simples pero que nos pueden ayudar a resaltar alguna modificacion realizada en la pagina, ya sea por medio de DOM o inclusive por Ajax, pero antes veremos un poco mas sobre CSS porque si bien ya en los posts anteriores hemos visto como aplicarlo o quitarlo mediante jQuery en algunas oportunidades no podremos manejarlo tan directamente, sin embargo afortunadamente tenemos un metodo que nos permite trabajar directamente llamado css.
Este metodo tiene la particularidad de poder recuperarnos el valor de una propiedad con solo especificar el nombre de la misma, su sintaxis es la siguiente:
.css('propiedad')Esto solo devolvera el valor de la propiedad informada pero esta funcion tambien nos permite obtener valores multiples de multiples propiedades, para ello debemos hacerlo de la siguiente manera:
.css(['propiedad1','propiedad2',...,'propiedad-n'])En lugar de pasar un elemento pasamos un array con todas las propiedades y esto nos devolvera un array con todos los valores en el mismo orden que lo solicitamos, pero tambien nos da la posibilidad de poder establecer valores para las propiedades:
.css('propiedad', 'valor')En este caso pasamos primero la propiedad y separado por una coma el valor que queremos ingresarle pero al igual que la recuperacion de valores multiples podemos establececer valores multiples y para ello debemos hacer lo siguiente:
.css({
'propiedad1': 'valor',
'propiedad2': 'valor',
...
'propiedad-n': 'valor'
})Esta segunda opcion es mas parecida a un dictionary donde estableceremos valores relacionados a una clave, la propiedad en este caso, y el metodo se encargara de aplicarlos por nosotros, su forma de trabajar es muy similar al metodo addClass que hemos visto en posts anteriores, como dato adicional podemos pasar las propiedades tanto como la nomenclatura del archivo, p.e background-color, como por DOM, p..e. backgroundColor, pero para entender el concepto vamos a crear un ejemplo, como van a ser varios archivos les recomiendo crear un directorio para poder tenerlos a todos en el mismo lugar, hablemos sobre el primero que sera el codigo HTML y para ello crearemos un archivo llamado libro.html y le agregaremos el siguiente codigo:
libro.html
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="codigo.js"></script>
<title>La llamada de Cthulhu</title>
</head>
<body>
<div id="contenedor">
<div id="encabezado">
<h2>La llamada de Cthulhu</h2>
<div class="autor">H.P. Lovecraft</div>
</div>
<div id="cambiador" class="cambiador">
<h3>Tamaño de Texto</h3>
<button id="el-default">
Default
</button>
<button id="el-chico">
Achicar
</button>
<button id="el-grande">
Agrandar
</button>
</div>
<div class="capitulo" id="cap-prefacio">
<h3 class="capitulo-titulo">Prefacio</h3>
<p>Es imposible que tales potencias o seres hayan sobrevivido... hayan
sobrevivido a una época infinitamente remota donde... la conciencia se
manifestaba, quizá, bajo cuerpos y formas que ya hace tiempo se retiraron ante
la marea de la ascendiente humanidad... formas de las que sólo la poesía y la
leyenda han conservado un fugaz recuerdo con el nombre de dioses,
monstruos, seres míticos de toda clase y especie...</p>
<p class="autor">Algernoon Blackwood</p>
</div>
<div class="capitulo" id="cap-1">
<h3 class="capitulo-titulo">1. El bajorrelieve de arcilla</h3>
<p>No hay en el mundo fortuna mayor, creo, que la incapacidad de la mente
humana para relacionar entre sí todo lo que hay en ella. Vivimos en una isla de
plácida ignorancia, rodeados por los negros mares de lo infinito, y no es
nuestro destino emprender largos viajes. Las ciencias, que siguen sus caminos
propios, no han causado mucho daño hasta ahora; pero algún día la unión de
esos disociados conocimientos nos abrirá a la realidad, y a la endeble posición
que en ella ocupamos, perspectivas tan terribles que enloqueceremos ante la
revelación, o huiremos de esa funesta luz, refugiándonos en la seguridad y la
paz de una nueva edad de las tinieblas. Algunos teósofos han sospechado la
majestuosa grandeza del ciclo cósmico del que nuestro mundo y nuestra raza
no son más que fugaces incidentes. Han señalado extrañas supervivencias en
términos que nos helarían la sangre si no estuviesen disfrazados por un blando
optimismo. Pero no son ellos los que me han dado la fugaz visón de esos
dones prohibidos, que me estremecen cuando pienso en ellos, y me
enloquecen cuando sueño con ellos. Esa visión, como toda temible visión de la
verdad, surgió de una unión casual de elementos diversos; en este caso, el
artículo de un viejo periódico y las notas de un profesor ya fallecido. Espero
que ningún otro logre llevar a cabo esta unión; yo, por cierto, si vivo, no añadiré
voluntariamente un sólo eslabón a tan espantosa cadena. Creo, por otra parte,
que el profesor había decidido, también, no revelar lo que sabía, y que si no
hubiese muerto repentinamente, hubiera destruido sus notas. </p>
</div>
</div>
</body>
</html>
Esta pagina es similar a la vista en los posts anteriores pero tiene un par de diferencias, primero como siempre estableceremos cual es nuestro archivo donde contendra todos los estilos CSS aplicados en la pagina, lo siguiente es un tag script donde cargaremos la libreria desde la pagina de jQuery, con nuestra libreria cargada lo siguiente sera otro tag script pero esta vez para cargar el archivo donde estara el codigo jQuery que aplicaremos a la pagina, despues tenemos el codigo html en si, con su titulo de pagina, un div llamado contenedor que contiene la pagina en si, tenemos una seccion para el titulo, seguido de otra llamada cambiador para modificar el tamaño del texto en la pagina, y despues una seccion para el prefacio y el primer capitulo, con esto tenemos cubierta la pagina principal, nuestro siguiente paso sera crear el archivo .css, para ello en el mismo directorio deben hacer un archivo con el nombre de estilo.css y le agregaremos este codigo inicial:
estilo.css
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
font-size: 1.2em;
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-middle: 0;
}
#cambiador {
width: 300px;
padding: .5em;
border: 1px solid #777;
}
En este caso agregaremos distintos estilos para los elementos que usaremos en la pagina, estos se aplican tanto a los contenedores como al html o el body del mismo, solo nos resta crear el archivo donde trabajaremos con el codigo de jQuery, para ello deben crear en el mismo directorio un archivo con el nombre de codigo.js y le agregaremos este primer codigo:
codigo.js
$(document).ready(function() {
var $cap1 = $('div.capitulo');
$('#el-grande').click(function() {
var num = parseFloat($cap1.css('fontSize'));
num *= 1.4;
$cap1.css('font-size', num + 'px');
});
});Como siempre primero estableceremos el ready para trabajar cuando la pagina este cargada, luego definiremos una variable para enlazarla con el div donde se encuentra el texto de nuestro primer capitulo, lo siguiente sera asociar el evento click al boton identificado con el-grande, aqui primero definiremos una variable llamada num el cual contendra el valor del fontSize que buscaremos en el archivo .css por medio de la funcion, pero observen que usamos un parseFloat para convertir el valor en uo de tipo float y poder trabajar con el en la siguiente linea donde ese valor lo multiplicaremos por 1.4, lo siguiente sera establecer el nuevo valor nuevamente al font-size desde donde obtuvimos el dato, esto lo hacemos en la ultima linea, como curiosidad le agregamos el px para evitar inconvenientes y que la pagina sepa que son en pixeles, con esto podemos probar y ver como funciona hasta ahora mediante el siguiente video
En el video podemos ver como funciona pero nos agranda todo y no solamente el texto, esto es debido a que el primer font-size en encontrar es el de contenedor por lo tanto trabajara siempre con ese, por el momento lo haremos de esta forma, pero ya tenemos como agrandar el texto de forma simple ahora vamos a agregar las acciones de los botones faltantes y para ello tomaremos el codigo anterior y lo modificaremos de la siguiente manera:
$(document).ready(function() {
var $cap1 = $('div.capitulo');
var tamDefault = $cap1.css('fontSize');
$('#cambiador button').click(function() {
var num = parseFloat($cap1.css('font-size'));
switch(this.id)
{
case 'el-grande':
num *= 1.4;
break;
case 'el-chico':
num /= 1.4;
break;
default:
num = parseFloat(tamDefault);
break;
}
$cap1.css('fontSize', num + 'px');
});
});Es bastante distinto pero mantenemos algo del anterior, la primera modificacion que realizamos fue almacenar el valor inicial de font-size para tener el valor «predeterminado», ya veremos para que, ahora nuestro evento click estara relacionado a los botones dentro de cambiador, volvemos a almacenar el valor de font-size en la variable num pero usaremos a parseFloat para convertirlo en numero, esto es igual que antes pero ahora tenemos un switch donde tomara el id de cada boton y lo examinara, el primer case sera para el boton de agrandar y hacemos la misma operacion que antes, el siguiente case es para el boton de achicar, la unica diferencia con el anterior es que en lugar de multiplicarlo procede a dividirlo, por ultimo tenemos a default donde interceptara al boton que nos falta, y este volvera todo a la normalidad gracias al valor que almacenamos al comienzo y seteandolo en num, la ultima linea al igual que antes es la encargada de modificar el font-size en base al valor de num, con todo esto comentado veamos como trabaja mediante el siguiente video
Ahora si ya tenemos operativo a nuestra pagina y en cierto punto de una manera mas simple como vimos en los posts anteriores pero esto es el comienzo ya que en los proximos posts iremos mejorando esto, antes de finalizar les dejo el codigo que trabajamos en este post:
En resumen, hoy hemos visto al metodo css, que es, para que sirve, como se utiliza, tambien las distintas formas de trabajar tanto para obtener un dato como para modificarlo, y un ejemplo bastante practico para verlo en accion, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 