Cristalab |
| Calcular distancia de un punto a otro con jQuery Posted: 30 Oct 2012 08:33 AM PDT En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia de un punto a otro con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web en donde se desee ejecutar un evento cuando el ratón del usuario se encuentre en una distancia determinada de un elemento. Sólo creamos las variables globales, el evento y la función para el documento. Código : <script type="text/javascript"> $(document).ready(function(){ var mX, mY, distance, $distance = $('#distancia span'), $element = $('#elemento'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; distance = calculateDistance($element, mX, mY); $distance.text(distance); }); }); </script> Como se puede ver en el código, hemos establecido una función en el evento .mousemove, luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento. Ahora creamos nuestros contenedores divs para recibir los datos: Código : <div id="distancia">La distancia hasta el punto es: <span> </span> pixeles.</div> <br /> <div id="texto"> <h4>Partiendo del punto de partida que es el 0 de color naranja</h4> <p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p> </div> <div id="elemento">0</div> Eso es casi todo, acá dejo una demo en donde está todo el código completo: DEMO Eso es todo, espero te haya gustado y que te sea muy útil.
|
| Cielo y nubes con Particle World en After Effects Posted: 28 Sep 2012 08:47 AM PDT Regresamos al uso del efecto de partículas Particle World en After Effects, para ajustar sus opciones, ralentizando el desplazamiento y limitando las variaciones en las partículas que crea, para generar un manto de nubes dinámico en tres dimensiones, por el que podremos navegar gracias a una cámara, después de incorporar elementos de iluminación y un texto estilizado que enriquecerá nuestra escena y completará el efectoque buscamos obtener. Añadiremos una composición sencilla, agregando un plano al fondo con un degradado lineal aplicado, que nos permitirá simular el cielo, para posteriormente añadir una cámara y las partículas obtenidas del Particle World, junto con varios efectos de iluminación y movimiento natural de cámara, que aumentará el realismo. Saludos.
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario