Navegando… más bien pen@##@ por la red, me encontré este interesante efecto de scrolling echo con javascript, la verdad me latió mucho este efecto.

Este efecto consisten que dentro de un div utilizándolo como contenedor de texto podemos agregarle una scrollbar a su costado y dándole clic a las fechas de arriba o abajo el texto se moverá consecutivamente, Es interezante pro que podemos personalizar la scrollbar a nuestro antojo, poniéndole un skin de imagenes y quedaría cool.

Aqui les dejo los ejemplo y el archivo a descargar.

Ver Ejemplo

Descargar el Script

Hola!!

Navegando por ahi me encontre con un sitio que nos muestra 8 trucos con JQUERY, que nos pueden ser util al momento de crear nuestro Sitio Web.

Chequenlos y pruebenlos!!!!

Les dejo aqui en Enlace.

Templates y Plantillas Gratis – CSS – Flash – FREE

Hola!!!

Navegando por Ahi me tope con una pagina de Templates Gratis, tanto en Flash como de CSS, esta bastante decente, hay uno que otro que si vale la pena, sobre todo en las de Flash, que tambien puede encontrar galerias para utilizar en tu Sitio Web.

Les dejo los Links!!

Templates Flash
Templates CSS

Hola les mostrare como crear el efecto de paginacion en tu Web. La mayoria de las veces esto lo crean con flash, pero les voy a mostrar una manera mas rapida y sencilla de hacerlo.
Les muestro como:

1ro vamos a crear el contenedor de nuestra esquina paginada.

1
2
3
4
5
6

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Ahora creamos nuestro style css, establecemos nuestra imagen de la esquina a un tamaño pequeño (50px por 50px) por defecto y establecemos el posicionamiento absoluto de nuestro span en la esquina superior derecha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

Y por ultimo nuestro codigo js, antes debemos llamar a nuestro archivo jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

Les dejo el link de la DEMO EL LINEA

Este es un codiguito muy sencillo pero muchas veces util, sobre todo cuando no quieres utilizar flash o javascript para hacer este efecto de marquesina, y lo mejor de todo solo es una etiqueta HTML y le agregamos dos eventos los cuales serian el onMouseOver y el onMouseOut para que cuando nos posicionemos en el texto o imagen que este dentro de nuestra marquesina se detenga y cuando quitemos el mouse siga ya sea verticalmente o horizontalmente la animación.

Ejemplo de marquesina HTML

1
2
3
4
5

<marquee onMouseOver="this.stop()"  onMouseOut="this.start()" scrollAmount="2" scrollDelay="4" direction="up" width="100%" height="120">
 
//tu contenido aquí
 
</marquee>

Ahora si le quieres poner mas estilo de opacidad y demas agregale esta linea:

style=”FILTER: Alpha(Opacity=90, FinishOpacity=100, StartX=100, StartY=2, FinishX=0, FinishY=0)”

El resultado de todo esto seria:

1
2
3
4
5

<marquee onMouseOver="this.stop()" style="FILTER: Alpha(Opacity=90, FinishOpacity=100, StartX=100, StartY=2, FinishX=0, FinishY=0)" onMouseOut="this.start()" scrollAmount="2" scrollDelay="4" direction="up" width="100%" height="120">
 
//tu contenido
 
</marquee>

Saludos.

Hola!!!!

Navegando por ahi encontre un script js muy chido Llamado reflection.js con el puedes aplicar reflejos a tus imagenes!!!

Les muestro como, es muy sencillo!!

Para empezar Llamamos a nuestro Script reflection.js

1

<script type="text/javascript" src="reflection.js"></script>

Ahora lo que sigue es aplicar nuestro reflejo en la imagenes

1

<img src="version.png" class="reflect rheight50 ropacity33"  />

Podemos variar el tamaño del reflejo, con tan solo cambiar la clase

1
2
3

<img src="user.png" class="reflect rheight33" alt="Muestra un 33% de la imagen" />
<img src="user.png" class="reflect rheight66" alt="Muestra un 66% de la imagen" />
<img src="user.png" class="reflect rheight100" alt="Muestra un 100% de la imagen" />

Por qué para utilizar este efecto?

Fácil de implementar. Solamente agrega class=”reflect” a la imagen y listo.

1. No necesitas perder tiempo con un editor de imágenes para crear el efecto de reflejo.
2. Trabaja muy bien con avatares, y no requiere de trabajo adicional por parte del servidor.
3. Es muy fácil cambiar la opacidad y el tamaño del reflejo.
4. Los reflejos pueden responder a la acción de usuario.
5. Es chido.

Eso es todo!!!!

Les dejo el Link para descargar el js Reflection.js

Ver demo en linea