Frogx.Three » Javascript... http://www.frogx3.com Blog de diseño con recursos para diseño y desarrollo web - Tutoriales, tips, snippets, iconos, recursos, plantillas Thu, 09 Feb 2012 20:00:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 45 Diseños web utilizando efectos parallax http://www.frogx3.com/2012/02/01/45-disenos-web-utilizando-efectos-parallax/ http://www.frogx3.com/2012/02/01/45-disenos-web-utilizando-efectos-parallax/#comments Wed, 01 Feb 2012 15:00:04 +0000 Jorge http://www.frogx3.com/?p=11914 Que les parece esta increíble recopilación de 45 diseños web utilizando efectos parallax, los efectos parallax son uno de los efectos mas atractivos que podemos lograr utilizando JavaScript, una de las librerías que nos facilitan esto es jQuery, y es que los diseños con efecto Parallax aplicados de forma creativa pueden tener increíbles resultados en diseño web.

Un script de MooTools muy bueno para lograr este efecto es mParallax y por el otro lado para jQuery tenemos jParallax, se rompieron la cabeza con el nombre.

LivingWord

diseños web efecto parallax 1 45 Diseños web utilizando efectos parallax

Siebennull

diseños web efecto parallax 2 45 Diseños web utilizando efectos parallax

Moods of Norway

diseños web efecto parallax 3 45 Diseños web utilizando efectos parallax

Head 2 Hearth Us

diseños web efecto parallax 4 45 Diseños web utilizando efectos parallax

Tennessee Trails & Byways

diseños web efecto parallax 5 45 Diseños web utilizando efectos parallax

Enlace: Design Resource Box

]]> http://www.frogx3.com/2012/02/01/45-disenos-web-utilizando-efectos-parallax/feed/ 1 Increíbles diseños web con efecto parallax http://www.frogx3.com/2011/11/23/increibles-disenos-web-efecto-parallax/ http://www.frogx3.com/2011/11/23/increibles-disenos-web-efecto-parallax/#comments Wed, 23 Nov 2011 13:40:48 +0000 Jorge http://www.frogx3.com/?p=10165 Excelentes ejemplos de diseños web con efecto parallax, este efecto es muy atractivo ya que reemplaza el usual efecto de navegación vertical con el scroll basico, por un efecto mas atractivo con el que los diseñadores juegan ya sea vertical o horizontal, el diseño sigue una secuencia visual muy atractiva y agradable.

Consiste en utilizar multiples capas, con imagenes en posiciones absolutas, una combinación de CSS y JavaScript con excelentes resultados, algunas características de este efecto son:

  • CSS: Contenedores con posiciones relativas
  • CSS: Usar posiciones absolutas
  • CSS: Usar objetos flotantes z-index
  • Imagenes con fondos transparentes PNG
  • Imagenes, uso de sprites
  • JavaScript para reconocer posición del scroll
Les dejo un enlace a un pequeño tutorial para crear efecto parallax: Ver tutorial

Activate Drinks

diseño web efecto parallax active drinks Increíbles diseños web con efecto parallax

New Zeland

diseño web efecto parallax new zealand Increíbles diseños web con efecto parallax

Mario Kart Wii

diseño web efecto parallax mario kart Increíbles diseños web con efecto parallax

Smart USA

diseño web efecto parallax smart usa Increíbles diseños web con efecto parallax

Moods of Norway

diseño web efecto parallax moods of norway Increíbles diseños web con efecto parallax

Fuente: Web Designer Wall

]]> http://www.frogx3.com/2011/11/23/increibles-disenos-web-efecto-parallax/feed/ 0 14 galerias y slideshows usando CSS y JavaScript http://www.frogx3.com/2010/04/23/14-galerias-y-slideshows-usando-css-y-javascript/ http://www.frogx3.com/2010/04/23/14-galerias-y-slideshows-usando-css-y-javascript/#comments Fri, 23 Apr 2010 12:35:07 +0000 Jorge http://www.frogx3.com/?p=6666 gayadesign 600x193 14 galerias y slideshows usando CSS y JavaScript

Una de las cosas mas utilizadas ultimamente en sitios de empresas son los ya clasicos Slideshows ya que permiten exponer de una manera creativa e impactante productos o servicios con imágenes atractivas, en la siguiente recopilación se muestran un total de 14 galerias y slideshows muy buenos usando CSS y JavaScript.

Estos slideshows javascript no son de alguna librería en especial, la lista incluye tanto Slideshows jQuery como MooTools, ojala les sean útil solo tienen que seguir el enlace.

Enlace: 14 most sexy galleries and slideshows using javascript and css

]]> http://www.frogx3.com/2010/04/23/14-galerias-y-slideshows-usando-css-y-javascript/feed/ 3 Gráficas para estadísticas con JavaScript, HighCharts http://www.frogx3.com/2010/01/27/graficas-para-estadisticas-con-javascript-highcharts/ http://www.frogx3.com/2010/01/27/graficas-para-estadisticas-con-javascript-highcharts/#comments Wed, 27 Jan 2010 15:19:32 +0000 Jorge http://www.frogx3.com/?p=6465 Captura de pantalla 2010 01 27 a las 14.22.44 600x254 Gráficas para estadísticas con JavaScript, HighCharts

HightChart es una excelente librería JavaScript que te permite integrar en tu sitio web gráficas de estadísticas en diferentes formatos, es compatible con todos los navegadores y muy agil y facil de utilizar.

El completamente gratuita y para uso libre en proyectos no comerciales, maneja una sintaxis de configuración muy sencilla y muestra tooltips para información de los detalles, ofrece la posibilidad de manejar eventos y gráficas multinivel, maneja canvas y utiliza Ajax para cargar la información que alimenta las gráficas.

Entre las diferentes opciones de gráficas para estadísticas que puedes presentar con HighCharts, están:

  • Lineal
  • Spline
  • Areas
  • Areaspline
  • Columnas
  • Barras
  • Pastel

Enlace: HighCharts

]]> http://www.frogx3.com/2010/01/27/graficas-para-estadisticas-con-javascript-highcharts/feed/ 5 Ha sido lanzado Mootools 1.2.1 http://www.frogx3.com/2008/10/17/ha-sido-lanzado-mootools-121/ http://www.frogx3.com/2008/10/17/ha-sido-lanzado-mootools-121/#comments Fri, 17 Oct 2008 09:15:22 +0000 Jorge http://www.frogx3.com/?p=3468 mootools Ha sido lanzado Mootools 1.2.1

Mootools estrena versión Mootools 1.2.1 con muchas mejores y bugs arreglados, el soporte para Safari 2 en el Class.js ha regresado, que esperas descarga este excelente Framework Javacript.

]]> http://www.frogx3.com/2008/10/17/ha-sido-lanzado-mootools-121/feed/ 2 Lo mejor de la Web en Agosto http://www.frogx3.com/2008/08/27/lo-mejor-de-la-web-en-agosto/ http://www.frogx3.com/2008/08/27/lo-mejor-de-la-web-en-agosto/#comments Wed, 27 Aug 2008 11:30:43 +0000 Jorge http://www.frogx3.com/?p=2497 Excelente articulo de Smashing Apps donde nos retro alimentan sobre los mejores post sobre recursos a lo largo de este mes de agosto.

40+ Efectos de photoshop oscuros y futuristas

dark and futuristic photoshop effects Lo mejor de la Web en Agosto

La Ilustración en el diseño web

web design illustration Lo mejor de la Web en Agosto

Si quieren conocer mas recursos como por ejemplo:

  • Javascript y Ajax
  • XHTML y CSS
  • Diseño Web: tutoriales y recursos
  • Fuentes Gratis

Solo sigan el siguiente enlace.

Enlace: Discover The Best Of The Web In August 2008

]]> http://www.frogx3.com/2008/08/27/lo-mejor-de-la-web-en-agosto/feed/ 0 40+ técnicas para mejores estética y funcionalmente tus formularios http://www.frogx3.com/2008/08/18/40-tecnicas-para-mejores-estetica-y-funcionalmente-tus-formularios/ http://www.frogx3.com/2008/08/18/40-tecnicas-para-mejores-estetica-y-funcionalmente-tus-formularios/#comments Mon, 18 Aug 2008 11:00:09 +0000 Jorge http://www.frogx3.com/?p=2284 form elements9 40+ técnicas para mejores estética y funcionalmente tus formularios

Excelente el post que ha publicado Noupe con un total de 40 técnicas para mejorar la estética y funcionalidades de nuestros formularios utilizando CSS y Javascript, todas estas técnicas están apoyadas en frameworks javascript como Mootools y jQuery que ya le han robado el trono al prototype.

Enlace:Form Elements: 40+ CSS/JS Styling and Functionality Techniques

]]> http://www.frogx3.com/2008/08/18/40-tecnicas-para-mejores-estetica-y-funcionalmente-tus-formularios/feed/ 1 Posteet, recortes de código para desarrolladores http://www.frogx3.com/2008/07/29/posteet-recortes-de-codigo-para-desarrolladores/ http://www.frogx3.com/2008/07/29/posteet-recortes-de-codigo-para-desarrolladores/#comments Tue, 29 Jul 2008 19:39:42 +0000 Jorge http://www.frogx3.com/?p=2046 posteet Posteet, recortes de código para desarrolladoresPosteet es de esos sitios que es una obligación tenerlos en tus favoritos si eres desarrollador, porque? en posteet puedes copiar y compartir tips y recortes de codigo (snippets) completamente gratis.

Actualmente ay un total de 491 posteets de diferentes lenguajes de programación (php, javascript, c#, comandos shell, css, etc).

Por ejemplo en la siguiente imagen pueden ver un recorte para validar un correo electrónico en C#.

posteet validate mail with c Posteet, recortes de código para desarrolladores

Enlace: Posteet

]]> http://www.frogx3.com/2008/07/29/posteet-recortes-de-codigo-para-desarrolladores/feed/ 0 noobSlide, un elegante slide usando MooTools http://www.frogx3.com/2008/06/11/noobslide-un-elegante-slide-usando-mootools/ http://www.frogx3.com/2008/06/11/noobslide-un-elegante-slide-usando-mootools/#comments Wed, 11 Jun 2008 21:07:06 +0000 Jorge http://www.frogx3.com/?p=1618 noo noobSlide, un elegante slide usando MooTools

noobSlide es un script javascript basado en el framework MooTools que nos permite hacer un slide con diferentes elementos de nuestra pagina, puedes aplicarlo a imágenes obteniendo una elegante galería o a capas (DIV) para obtener una navegación dinámica y muy elegante.

Si quieres ver otras posibilidades que noobSlide y ajax nos da sigue los enaces.

Enlace:

]]> http://www.frogx3.com/2008/06/11/noobslide-un-elegante-slide-usando-mootools/feed/ 4 AjaxDaddy, descarga efectos ajax gratis http://www.frogx3.com/2008/05/12/ajaxdaddy-descarga-efectos-ajax-gratis/ http://www.frogx3.com/2008/05/12/ajaxdaddy-descarga-efectos-ajax-gratis/#comments Mon, 12 May 2008 11:01:01 +0000 Jorge http://www.frogx3.com/?p=1412 ajax daddy AjaxDaddy, descarga efectos ajax gratis

AjaxDaddy es un excelente sitio como ay mucho donde se han puesto las pilas para recopilar mas de 1000 efectos en ajax y ponerlos a funcionar en un mismo sitio para que los puedas probar y si te gustan pues los descargues.

Es muy sencillo, te dividen los efectos por categorias, buscas el que te interesa, y le haces click, en el mismo sitio te muestran un ejemplo aplicado del efecto y si te gusta hacen click en el boton para descargarlo, sencillo y util.

Muy buen sitio entre los ejemplos que puedes encontrar estan: Calendarios Ajax, Sliders, Menus, Ratings, Tooltips, Lightbox, Windows, etc…

Enlace: AjaxDaddy

Via: elWebmaster, efectos en Ajax (por cierto excelente sitio)

]]> http://www.frogx3.com/2008/05/12/ajaxdaddy-descarga-efectos-ajax-gratis/feed/ 1