Skip to Content »

Javascript Smooth Scroll

  • 30/11/2007
  • 12:37 am
  • unijimpe

df Javascript Smooth Scroll es una pequeña librería que te permitirá agregar un efecto de transición al acceder a los anchor en una página web. Es compatible con la mayoría de navegadores y solo pesa 1024 bytes.

smoothscroll.jpg

Típicamente al acceder a un anchor, el browser se mueve directamente a la posición del anchor, pero si deseamos aplicarlo un movimiento suave para acceder al anchor esta es la librería que necesitamos.

Como utilizar Smooth Scroll
El uso es muy sencillo, luego de descargar los archivos fuentes desde df_smooth_scroll.zip, luego al momento de crear nuestro html debemos incluir el archivo smooth.pack.js de la siguiente forma:

  1. <script type="text/javascript" src="smooth.pack.js"></script>

Lo siguiente es agregar los anchor de la forma normal es decir no hace falta agregar ningún código adicional para el funcionamiento.

  1. <a href="#footer" name="top">Go To Footer</a>
  2. <p> text body </p>
  3. <a href="#top" name="footer">Go To Header</a>

Uniendo estas lineas, obtendremos un resultado muy agradable pues los movimientos son muy suaves lo que facilita el proceso de moverse en la página. Finalmente pueden ver el ejemplo funcionando en df_smooth_scroll.html.

Posts Relacionados

FancyForm: CSS para checkbox

  • 26/11/2007
  • 10:58 pm
  • unijimpe

FancyForm es un script que te permitirá aplicarle el estilo que tu deseas a tus checkboxs o radio buttons. Este script esta basado en Mootools y un CSS que te permitirán cambiar fácilmente el estilo en tus formulario.

fancyform.jpg

Como utilizarlo
Lo primero es descargar los archivos desde FancyForm v0.91, luego de ello lo siguiente es incluir las librerías mootools.js y moocheck.js de la siguiente forma:

  1. <script type="text/javascript" src="js/mootools.js"></script>
  2. <script type="text/javascript" src="js/moocheck.js"></script>

Lo siguiente es crear los estilos, para los checkbox hay que crear dos estilos llamados checked y unchecked y para los radio buttons dos estilos llamados selected y unselected. Por ejemplo podemos crear los estilos en donde hemos reemplazado estos campos por imágenes:

  1. .checked {
  2.     background-color:#222;
  3.     background-image:url(chk_on.png);
  4. }
  5. .unchecked {
  6.     background-color:#1c1c1c;
  7.     background-image:url(chk_off.png);
  8. }
  9. .selected {
  10.     background-color:#222;
  11.     background-image:url(rdo_on.png);
  12. }
  13. .unselected {
  14.     background-color:#1c1c1c;
  15.     background-image:url(rdo_off.png);
  16. }

Lo siguiente es crear los campos tipo checkbox y radio button como de costumbre. Pueden ver el ejemplo funcionando en FancyForm Test.

fancyform-demo.jpg

Como ven muy sencillo de implementar, lo único de lo que hay que preocuparse es en armar correctamente el estilo para estos campos. Si desean hay muchas mas opciones para personalizar y dar mejores efectos visuales a los formularios y los pueden ver en la pagina oficial de FancyForm.

Posts Relacionados

PHPMotion: tu propio Youtube

  • 25/11/2007
  • 8:26 pm
  • unijimpe

PHPMotion es un script creado en PHP que te permitirá crear un servicio de hosting al estilo de Youtube. Este proyecto Open Source así que podrás descargar gratuitamente los archivos y modificarlo de acuerdo a tus necesidades.

phpmotion.gif

Características
PHPMotion es una herramienta muy completa y entre las principales características podemos destacar:

  • Facilidad para subir vídeos directamente desde el computador del usuario.
  • Soporta varios formatos de vídeo (mpg, avi, divx y mas)
  • Facilidad para editar los datos del vídeo (titulo, descripción y tags)
  • Soporte para vídeos públicos y privados.
  • Soporte para comentarios en los vídeos.
  • Soporte para embeber vídeos en otros dominios.
  • Soporte para grupos.
  • Facilidad para crear favoritos
  • Cuenta con un administrador muy completo el cual incluso cuenta con un administrador de publicidad.

phpmotion-demo.jpg

Requerimientos
PHPMotion necesita algunas características especiales, esto para poder convertir los vídeos subidos por los usuarios al formato FLV con el cual se puede visualizar.

  • PHP 4.3 o superior.
  • Servidor de base de datos MySQL
  • LAME MP3 Encoder
  • Libogg + Libvorbis
  • Mencoder y ademas Mplayer
  • FFMpeg-PHP
  • Librería GD 2 o superior
  • CGI-BIN

Obviamente si deseas implementarlo en un hosting este debe ser un servidor dedicado en donde puedes hacer todas las instalaciones necesarios o un hosting que te permita todas estas cualidades.

Como ven es un sistema muy completo, si desean pueden ver este sistema funcionando en: www.phpmotion.net, ahora si es que te parece difícil la instalación, hay un servicio de instalación y configuración que ofrecen ellos mismos.

Posts Relacionados